// PC用 星を見る JavaScript
var map,timer;
var page = 1;
var is_iphone;

// 座標、名前、メッセージ配列
var latlngs=[];
var names=[];
var messages=[];
var ids=[];

// 星の配列
var stars_arr=[];

// 座標の最小最大値
var maxLongitude = 0;
var minLongitude = 999;
var maxLatitude = 0;
var minLatitude = 999;

// 各変数の初期化
var totalcount = 0;
var remainder = 0;
var iterator = 0;
var pagelimit_def = 10;
var pagelimit = pagelimit_def;
var comment_id = 0;

// 地図のサイズ
mapHeight = 460;
mapWidth  = 670;
maskHeight = 1;

// 星のアイコンを定義
var image = new google.maps.MarkerImage('/11/res/img/common/star.png',
  new google.maps.Size(24.0, 27.0),
  new google.maps.Point(0, 0),
  new google.maps.Point(12.0, 13.0)
);
var shadow = new google.maps.MarkerImage('/11/res/img/common/shadow-star.png',
  new google.maps.Size(38.0, 27.0),
  new google.maps.Point(0, 0),
  new google.maps.Point(12.0, 13.0)
);
var shape = {
  coord: [1, 1, 1, 20, 18, 20, 18 , 1],
  type: 'poly'
};

$(function(){

  // 引数の取得、自分の星が指定された場合
  var qs = getUrlVars();
  comment_id = qs['comment_id'];

  // 地図の中心地を設定
  var _latlng = new google.maps.LatLng(37.857507,137.197266);

  // 地図のオプション設定
  var myOptions = {
    zoom: 4,
    center: _latlng,
    scaleControl: false,
    mapTypeControl: false,
    streetViewControl:false,
    navigationControl: true,
    navigationControlOptions: {
        style: google.maps.NavigationControlStyle.SMALL,
        position: google.maps.ControlPosition.RIGHT_BOTTOM
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  // 地図オブジェクト作成
  map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  $('#map_canvas').css({ 'height':mapHeight, 'width':mapWidth });

  // 自分の星を含んだ最新n個の場合
  if( jQuery.isNumeric( comment_id ) && comment_id > 0 ){
    $.scrollTo( $('#stars') );
    pagelimit = pagelimit_def - 1;
    remainder = 2;
    // 星の描写
    getXmlPager( page );
    getXmlTarget( comment_id );

  // 自分の星を含まない最新n個の場合
  }else{
    pagelimit = pagelimit_def;;
    remainder = 1;
    // 星の描写
    getXmlPager( page );
  }
  
    // 前のページボタンを押した際
  $("li.btn_prev").click(function (){
  
   $("div.message-box-above").fadeOut(200);

   // 背景のグレーのオーバーレイを表示
   $('#dialog-overlay').css({height:mapHeight, width:mapWidth}).fadeIn(500);
    // 表示されている星を削除
    for(var i=0; i<stars_arr.length; i++){
      stars_arr[i].setMap( null );
    }
    page--;
    if( page < 1 ) page = 1;

    // 前のページの星を表示
    init_param();
    getXmlPager(page);
    return false;
  });

  // 次のページボタンを押した際
  $("li.btn_next").click(function (){

   $("div.message-box-above").fadeOut(200);

   // 背景のグレーのオーバーレイを表示
   $('#dialog-overlay').css({height:mapHeight, width:mapWidth}).fadeIn(500);
    // 表示されている星を削除
    for(var i=0; i<stars_arr.length; i++){
      stars_arr[i].setMap( null );
    }
    page++;
    // 次のページの星を表示
    init_param();
    getXmlPager(page);
    return false;
  });

    // メッセージダイアログの削除ボタンを押した際
  $('p.btn_close').click(function (){

    for(var i=0; i<stars_arr.length; i++){
      stars_arr[i].setAnimation( null );
    }

   // メッセージダイアログを非表示
   $("div.message-box-star").fadeOut(600);
   // 背景のグレーのオーバーレイを非表示
   $('#dialog-overlay').fadeOut(100);
   // ページ遷移ボタンを表示
   if( page == 1 ){
     $("li.btn_prev").hide();
   }else{
     $("li.btn_prev").fadeIn(800);
   }
   if( end_count == totalcount ){
     $("li.btn_next").hide();
   }else{
     $("li.btn_next").fadeIn(800);
   }
   $("div.message-box-above").fadeIn(800);
  });

});

// 変数の初期化
function init_param(){

// 座標、名前、メッセージ配列
latlngs=[];
names=[];
messages=[];
ids=[];

// 星の配列
stars_arr=[];

// 座標の最小最大値
maxLongitude = 0;
minLongitude = 999;
maxLatitude = 0;
minLatitude = 999;

// 各変数の初期化
totalcount = 0;
remainder = 1;
iterator = 0;
pagelimit = pagelimit_def;
comment_id = 0;
}


// XMLを取得し、星をプロット
function getXmlPager( page ){

  var offset = (page-1) * pagelimit;

  $.ajax({
    type:"get",
    cache:false,
    url:'/11/star/comment_page.xml?limit='+ pagelimit +'&offset='+offset,
    success:function(xml){
      totalcount = $(xml).find("count").text();
      parseXml(xml);
    },
    error:function(XMLHttpRequest, textStatus, errorThrown){
      alert('通信状態をご確認の上、再度ご利用ください。:'+textStatus);
      $('#dialog-overlay').hide();
    }
  });
}

// XMLを取得し、星をプロット
function getXmlTarget( comment_id ){

  $.ajax({
    type:"get",
    cache:false,
    url:'/11/star/comment_target.xml?comment_id='+comment_id,
    success:function(xml){
      parseXml(xml);
    },
    error:function(XMLHttpRequest, textStatus, errorThrown){
      alert('通信状態をご確認の上、再度ご利用ください。:'+textStatus);
      $('#dialog-overlay').hide();
    }
  });
}

// XMLをパースして配列に
function parseXml(xml){

$(xml).find("Entry").each(function(){

  // XML内のデータ代入
  var _msgDate      = $(this).find('Date').text();
  var _msgName      = $(this).find('Name').text();
  var _msgMessage   = $(this).find('Message').text();
  var _msgLongitude = $(this).find('Latitude').text();
  var _msgLatitude  = $(this).find('Longitude').text();
  var _msgEntryID   = $(this).find('EntryID').text();

  // 座標の最大値・最小値記録
  if( maxLongitude < _msgLongitude ) maxLongitude = _msgLongitude;
  if( maxLatitude  < _msgLatitude  ) maxLatitude  = _msgLatitude;
  if( minLongitude > _msgLongitude ) minLongitude = _msgLongitude;
  if( minLatitude  > _msgLatitude  ) minLatitude  = _msgLatitude;

  // 座標取得
  var _latlng= new google.maps.LatLng(_msgLatitude, _msgLongitude);

  // 星ごとの座標・名前・メッセージを配列に
  latlngs.push(_latlng);
  names.push(_msgName);
  messages.push(_msgMessage);
  ids.push(_msgEntryID);
});

  // XML取得がすべて終わったら、描写処理へ
  remainder--;
  if( remainder == 0 ){
    iterator = 0;
    makeStars();
  }
}

// 配列から 星描写へ
function makeStars(){

      start_count = ( ( page - 1 ) * pagelimit_def ) + 1;
      end_count   = ( page * pagelimit_def );
      if( totalcount < end_count ) end_count = totalcount;
      $('#message-box-number').html( '( ' + totalcount + '個中 <em class="totalcount">' +start_count+'個目～'+end_count+'個目</em> の星を表示 )' );

      if( page == 1 ){
        $("li.btn_prev").hide();
      }else{
        $("li.btn_prev").show();
      }
      if( end_count == totalcount ){
        $("li.btn_next").hide();
      }else{
        $("li.btn_next").show();
      }

      // 北西端の座標を設定
      var sw = new google.maps.LatLng(maxLatitude,minLongitude);
      // 東南端の座標を設定
      var ne = new google.maps.LatLng(minLatitude,maxLongitude);
      // 中心座業を設定
      var cn = new google.maps.LatLng( ( maxLatitude + minLatitude ) / 2, ( maxLongitude + minLongitude ) / 2 );

      // 範囲を設定
      var bounds = new google.maps.LatLngBounds(sw, ne);

      // マップのスケール自動調整
      //map.fitBounds(bounds,5);

      // 地図の中心地を設定
      var _latlng = new google.maps.LatLng(37.857507,137.197266);
      map.setCenter( _latlng );
      map.setZoom( 4 );

      // マップのセンターの移動
      // map.setCenter( cn );
      $('#dialog-overlay').fadeOut(500);
      $("div.message-box-above").fadeIn(200);

      // 時間をずらしながら星を描写
      for(var i=0; i<latlngs.length; i++){
        timer=setTimeout( function() { drawStar(); }, i*400);
      }
}

// 地図に星を描写
function drawStar(){

  var star = new google.maps.Marker({
    map:    map,
    shape:  shape,
    shadow: shadow,
    icon:   image,
    position: latlngs[iterator],
    title:    names[iterator],
    zIndex:   iterator,
    animation: google.maps.Animation.DROP
  });

  // クリックした際のイベント追加
  google.maps.event.addListener( star, 'click', function( event ) {

    // クリックした場所を地図の中心位置に
    map.panTo( event.latLng );
    map.panBy( 0, 80 );

    // オーバーレイにてメッセージを追加
    var zIndex = star.getZIndex();
    popup( messages[zIndex], names[zIndex], zIndex );
  });

  // 星を星の配列に追加
  stars_arr.push( star );
  // 自分の星を常に バウンドさせる
  if(iterator==latlngs.length-1){
    clearTimeout(timer);
    for(var i=0; i<stars_arr.length; i++){
      if( ids[i] == comment_id ){
        stars_arr[i].setAnimation(google.maps.Animation.BOUNCE);
        var zIndex = stars_arr[i].getZIndex();

        // クリックした場所を地図の中心位置に
        map.panTo( latlngs[zIndex] );
        map.panBy( 0, 80 );

        // オーバーレイにてメッセージを追加
        popup( messages[zIndex], names[zIndex], zIndex );
      }
    }
  }

  // 星の数を増やす
  iterator++;
}

// ダイアログをポップアップする関数
function popup(message,name_str,zindex){

  for(var i=0; i<stars_arr.length; i++){
    stars_arr[i].setAnimation( null );
  }

  // クリックした星をバウンドさせる
  stars_arr[zindex].setAnimation(google.maps.Animation.BOUNCE);

  // ページ遷移ボタンを非表示
  $("li.btn_prev").fadeOut(500);
  $("li.btn_next").fadeOut(500);
  $("div.message-box-above").fadeOut(500);


  // メッセージダイアログを非表示
  if( $("div.message-box-star").css('display') != 'none' ){
    $("div.message-box-star").fadeOut(600);
  }

  // 背景のグレーのオーバーレイを表示
  $('#dialog-overlay').css({height:maskHeight, width:mapWidth}).fadeIn(1500);

  // メッセージダイアログを表示
  message = message.replace(/\\n/g, "<br>");
  setTimeout(
    function(){
      $('#message-name').html(name_str);
      $('#message-textarea').html(message);
      $("div.message-box-star").fadeIn(800);
   }, 1000);
}

// GETパラメータ取得
function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i <hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}