// flags
var country_datas = $H(country_datas);

// GoogleMap
var map = new GMap2($('map'));

// countries to show
var countries = [];
var country_markers = [];
var country_marker_manager;

// blogs to show
var total_all_countries = 0;
var country_to_show = null;
var blogs = [];
var blog_markers = [];
var blog_marker_manager;
var total_country = 0;
var offset = 0;
var limit = 0;
var c_prev = $('c_prev');
var c_next = $('c_next');
var b_prev = $('b_prev');
var b_next = $('b_next');

var heart_icon = new GIcon();

//img
var c_loading;
var b_loading;

// text
var text_blogs_in = document.createTextNode('blogs in ');

init();

// init app
function init(){

	map.setCenter(new GLatLng(country_datas.get('jp')['lat'],country_datas.get('jp')['lng']),2);

	map.addControl(new GLargeMapControl());

	map.setMapType(G_NORMAL_MAP);

	country_marker_manager = new MarkerManager(map);
	blog_marker_manager = new MarkerManager(map);

	heart_icon.image = "./img/v.png";
	heart_icon.shadow = "./img/vs.png";
	heart_icon.iconSize = new GSize(16,16);
	heart_icon.shadowSize = new GSize(27,16);
	var anc_x = 8;
	var anc_y = 8;
	var icon_center = new GPoint(anc_x,anc_y);
	heart_icon.iconAnchor = icon_center;
	heart_icon.infoWindowAnchor = icon_center;

	// build flags
  _build_flag_markers();

  // adjust dialogs
  adjust_dialogs();
  Event.observe(window,'resize',adjust_dialogs,false);

  c_loading = document.createElement('img');
  c_loading.src = 'img/loading.gif';
  b_loading = document.createElement('img');
  b_loading.src = 'img/loading.gif';
}

/**
 * 全国旗アイコンをインスタンス化するメソッド
*/
function _build_flag_markers(){
  country_datas.each( function(country){
	  var icon = new GIcon();
	  icon.image = "./img/flag/"+country.key+".png";
	  icon.shadow = "./img/shadow.png";
	  icon.iconSize = new GSize(16,11);
	  icon.shadowSize = new GSize(25,11);
	  var anc_x = icon.iconSize.width/2;
    var anc_y = 3;
	  var icon_center = new GPoint(anc_x,anc_y);
	  icon.iconAnchor = icon_center;
	  icon.infoWindowAnchor = icon_center;
	  country_datas.get(country.key)["icon"] = icon;

	  var lat = country.value["lat"];
	  var lng = country.value["lng"];

	  if(lat == null || lng == null){
	    return;
	  }
	  var marker = new GMarker(new GLatLng(lat,lng),{icon: icon,title: country.value["name"]});

    var func = GEvent.callbackArgs(
      this,
      function(country){
        show_blogs(country);
      },
      country.key
    );
    GEvent.addListener(marker,'click',func);

	  country_datas.get(country.key)["marker"] = marker;
	  country_datas.get(country.key)["name"] = country.value["name"];
  });
}

function update_total(){
  total_all_countries = 0;
  countries.keys().each(function(country_id,index){
    total_all_countries += eval(countries.get(country_id)['c']);
  });

  var span = $('total_count');
  span.innerHTML = "";
  span.appendChild(document.createTextNode(total_all_countries));
}

function show_countries(){
  new Ajax.Request(
    './json/countries?'+(new Date().getTime()),
    {
      method: 'get',
      onCreate: function(transport){
        c_prev.hide();
        c_next.hide();
        $('c_list').hide();
        $('c_loading').show();
      },
      onComplete: function(response){

        countries = $H(eval("("+response.responseText+")"));
        update_total();
        plot_countries();
        update_country_list();
        $('c_loading').hide();
        $('c_list').show();
      },
      asynchronous: true
    }
  );
}

function plot_countries(){
  remove_country_markers();

  countries.keys().each(function(country_id){
    var marker = country_datas.get(country_id)['marker'];
    if(marker != null){
      country_markers.push(marker);
    }
  });
  country_markers = country_markers.compact();
  country_marker_manager.addMarkers(country_markers,1);
  country_marker_manager.refresh();
}

function update_country_list(){
  var ul = $('c_list');

  ul.innerHTML = '';

  var li_all = document.createElement('li');
  if(!country_to_show) li_all.setAttribute('class','selected');

  var span_all = document.createElement('span');
  Event.observe(span_all, 'click', function(){show_blogs();});

  li_all.appendChild(span_all);
  span_all.appendChild(document.createTextNode('all countries ... '+total_all_countries));
  ul.appendChild(li_all);

  countries.keys().each(function(country_id,index){
    var country_name = country_datas.get(country_id)["name"];
    var icon = country_datas.get(country_id)["icon"];
    var li = document.createElement('li');
    var span = document.createElement('span');

    Event.observe(span, 'click', function(){
      show_blogs(countries.values()[index].name);
    });

    var img = document.createElement('img');
    img.src = icon.image;
    li.appendChild(img);
    li.appendChild(span);
    var text = document.createTextNode(country_name+" ... "+countries.get(country_id)['c']);
    span.appendChild(text);
    ul.appendChild(li);

    if(country_id == country_to_show) li.setAttribute('class','selected');
  });

  if(!ul.hasChildNodes()){
    var no_countries = document.createElement('li');
    no_countries.appendChild(document.createTextNode('no countries'));
    ul.appendChild(no_countries);
  }

  // pageing
  c_prev.hide();
  c_next.hide();

  //// prev
  c_prev.innerHTML = '';
  var prev_arrow = document.createElement('span');
  prev_arrow.appendChild(document.createTextNode('▲'));

  /*
  if(offset > 0){
    prev_arrow.setAttribute('style','cursor:pointer;');
    Event.observe(prev_arrow,'click',function(){
      show_blogs(country_to_show,offset-1);
    });
  }else{
    prev_arrow.setAttribute('style','visibility:hidden');
  }
  */
  prev_arrow.style.visibility = 'hidden';
  c_prev.appendChild(prev_arrow);

  //// next
  c_next.innerHTML = '';
  var next_arrow = document.createElement('span');
  next_arrow.appendChild(document.createTextNode('▼'));

  /*
  if((offset+1)*limit < total_country){
    next_arrow.setAttribute('style','cursor:pointer;');
    Event.observe(next_arrow,'click',function(){
      show_blogs(country_to_show,offset+1);
    });
  }else{
    next_arrow.setAttribute('style','visibility:hidden');
  }
  */
  next_arrow.style.visibility = 'hidden';
  c_next.appendChild(next_arrow);

  c_prev.show();
  c_next.show();
}


function show_blogs(country_name,page){
  country_to_show = country_name;
  show_countries();
  var url = './json/blogs';

  if(page != null){
    offset = page;
  }else{
    offset = 0;
  }
  if(country_name){
    url += '/'+country_name+'/'+offset;
  } else {
    url += '/'+offset;
  }

  if(country_name){
    focus(country_datas.get(country_name)['marker']);
  }
  new Ajax.Request(
    url+'?'+(new Date().getTime()),
    {
      method: 'get',
      onCreate: function(transport){
        b_prev.hide();
        b_next.hide();
        $('b_list').hide();
        $('b_loading').show();
      },
      onComplete: function(response){
        var result = $H(eval("("+response.responseText+")"));
        blogs = result.get('blogs');
        total_country = result.get('total');
        limit = result.get('limit');

        plot_blogs();
        $('b_loading').hide();

        update_blog_list();
        $('b_list').show();
      },
      asynchronous: true
    }
  );
}

function update_blog_list(){

  var ul = $('b_list');

  ul.innerHTML = '';

  blogs.each(function(blog,index){
    var title = blog.title;

    var li = document.createElement('li');

    var span = document.createElement('span');

    var text = document.createTextNode(title);
    span.appendChild(text);

    Event.observe(span, 'click', function(){
      show_blog(index);
    });

    li.appendChild(span);
    ul.appendChild(li);
  });

  if(!ul.hasChildNodes()){
    var no_blogs = document.createElement('li');
    no_blogs.appendChild(document.createTextNode('no blogs to show. please select a country. ---->'));
    ul.appendChild(no_blogs);
  }

  // pageing
  b_prev.hide();
  b_next.hide();

  //// prev
  b_prev.innerHTML = '';
  var prev_arrow = document.createElement('span');
  prev_arrow.appendChild(document.createTextNode('▲'));

  if(offset > 0){
    prev_arrow.style.cursor = 'pointer';
    Event.observe(prev_arrow,'click',function(){
      show_blogs(country_to_show,offset-1);
    });
  }else{
    prev_arrow.style.visibility = 'hidden';
  }

  b_prev.appendChild(prev_arrow);

  //// next
  b_next.innerHTML = '';
  var next_arrow = document.createElement('span');
  next_arrow.appendChild(document.createTextNode('▼'));

  if((offset+1)*limit < total_country){
    next_arrow.style.cursor = 'pointer';
    Event.observe(next_arrow,'click',function(){
      show_blogs(country_to_show,offset+1);
    });
  }else{
    next_arrow.style.visibility = 'hidden';
  }

  b_next.appendChild(next_arrow);

  b_prev.show();
  b_next.show();
}

function plot_blogs(){
  remove_blog_markers();

  var q_index = 0;

  blog_markers = blogs.collect(function(blog){
    var lat = blog['lat'];
    var lng = blog['lng'];
    if(blog['country'] == 'q'){
      lat = country_datas.get('q')['lat'];
      lng = country_datas.get('q')['lng']+(q_index+1)*8;
      q_index += 1;
    }
    var marker = new GMarker(new GLatLng(lat,lng),{icon: heart_icon});

    var suffix = 'th';
    switch(blog['id']%10){
      case 1:
        suffix = 'st';
        break;
      case 2:
        suffix = 'nd';
        break;
      case 3:
        suffix = 'rd';
    }
    var html = '<div style="text-align:left;font-size:12px;">';
    html += '<div><h2 style="font-size:18px; float:left;"><img src="img/flag/%s.png" style="margin-right: 5px;">'.replace('%s',blog['country']);
    html += '<a href="%s" style="text-decoration:none" target="_blank">'.replace('%s',blog['url']);
    html += '%s</a></h2>'.replace('%s',blog['title']);
    html += '<span style="float:left; margin:5px 0px 0px 10px;"><a href="%s" target="_blank">visit</a></span></div>'.replace('%s',blog['url']);
    html += '<div style="clear:both; padding: 10px;">';
    html += '<div style="border: 1px solid #ababab;background:#fbf8f1 none repeat scroll 0%; padding:10px; color=#7a7a7a;">';
    html += '<div><span>%s member '.replace('%s',blog['id']+suffix);
    html += 'from %s</span></div>'.replace('%s',blog['city']);
    html += '</div></div>';


    blog["html"] = html;
    marker.bindInfoWindowHtml(html);

    return marker;
  });

  blog_markers = blog_markers.compact();
  blog_marker_manager.addMarkers(blog_markers,2);
  blog_marker_manager.refresh();
}

function show_blog(id){
  var blog_marker = blog_markers[id];
  if(blog_marker != null){
    var zoom = map.getZoom();
    if(zoom > 5 ){
      map.setZoom(5);
    }
    if(zoom < 2){
      map.setZoom(2);
    }
    GEvent.trigger(blog_marker,'click');
  }
}

function remove_country_markers(){
  country_markers.each(function(marker){
    country_marker_manager.removeMarker(marker);
  });
  country_markers = [];
}

function remove_blog_markers(){
  blog_markers.each(function(marker){
    blog_marker_manager.removeMarker(marker);
  });
  blog_markers = [];
}

function focus(marker){
  if(marker != null){
    var zoom = map.getZoom();
    if(zoom > 5 ){
      map.setZoom(5);
    }
    if(zoom < 2){
      map.setZoom(2);
    }
    map.panTo(marker.getLatLng());
  }
}

function create_widget(lang){
  var url = $F('url_'+lang);
  var city = $F('city_'+lang);
  var code = '<script type="text/javascript" src="http://welove.jp/widget?url='+encodeURIComponent(url)+'&city='+encodeURIComponent(city)+'"></script>\n<noscript>Please Enable Javascript :)</noscript>';
  var text_area = $('widget_code_'+lang);
  text_area.value = code;
  display_plot(lang, city);
}

function display_plot(lang, city) {
    var time = new Date().getTime();
    jQuery.get("./", {action_json_preview:1, lang:lang, city:city, time:time}, function(data){
        insert_text(data, lang);
    });
}

function insert_text(text, lang) {
    var pre = $('pre_'+lang);
    pre.innerHTML = '';
    var data = eval("("+text+")");
    var texts = data.address;
    var flag = data.flag;
    if (texts == 'unknown') {
        var texts = '';
        if (lang == 'ja') {
            var text_before = '入力された地域情報では住所を取得出来ませんでした。';
            var text_after = '地域情報を変更し、ブログパーツコードを生成し直してください。';
        } else {
            var text_before = 'Your Blog will not be plotted on the map.';
            var text_after = 'Please change your input, and try generate Widget-Code again.';
        }
        var text_area = $('widget_code_'+lang);
        text_area.value = '';
    } else {
        if (lang == 'ja') {
            var text_before = '下記のコードを貼りつけるとあなたのブログは';
            var text_after = 'にプロットされます。意図した場所でない場合は地域情報を変更し、ブログパーツコードを生成し直してください。';
        } else {
            var text_before = 'Your Blog will be plotted on the';
            var text_after = '. If Area is wrong, Please change your input, and try generate Widget-Code again.';
        }
    }
    var text_city = document.createElement('div');
    var flag_img = document.createElement('img');
    text_city.appendChild(flag_img);
    text_city.appendChild(document.createTextNode(texts));
    pre.appendChild(document.createTextNode(text_before));
    pre.appendChild(text_city);
    pre.appendChild(document.createTextNode(text_after));
    jQuery('#pre_'+lang+' img').attr({src:"./img/flag/"+flag+".png"});
    jQuery('#pre_'+lang+' img').css({marginRight:"10px",marginLeft:"5px"});
    jQuery('#pre_'+lang + ' div').css({fontSize:'20px',fontWeight:'bold',marginTop:"2px",marginBottom:"2px"});
}

function adjust_dialogs(){
  // width
  var w = document.body.clientWidth;
  var map_w = $('map').clientWidth;

  // horizonal-scrollbar and IE causes slip when Effect.toggle()
  if(/*@cc_on!@*/false){
    var offsets = document.viewport.getScrollOffsets();
    w += offsets[0];
  }

  $('total').style.top = $('map').offsetTop + 'px';

  $('dialogs').style.top = $('map').offsetTop + 'px';
  $('dialogs').style.right = (w>map_w ? (w-map_w)/2 : w-map_w) + 'px';
  $('dialogs').style.display = 'block';

}

// start
//show_countries();
// update_blog_list();
show_blogs();