SrnMapMarker = {};
SrnMapMarker.current_id = undefined;
SrnMapMarker.pictures = [];
/**
 * add the map markers
 */
SrnMapMarker.clickHandler = function(ev){
 var $this = ev.__gm_id == undefined ? this : ev;

  var id = parseInt($this.__gm_id, 10)-1;

  
  // the open picture box
  var pictureBox = document.createElement("div");
  pictureBox.className = "map_picturebox";
  pictureBox.id = "picture_slider";
  pictureBox.innerHTML = '';

  // options for the info box
  var infoBoxOptions = {
    content: pictureBox,
    disableAutoPan: true,
    maxWidth: 0,
    pixelOffset: new google.maps.Size(-122, -270),
    zIndex: null,
    boxStyle: {
      opacity: 100,
      width: "275px"
    },
    closeBoxURL: "",
    infoBoxClearance: new google.maps.Size(1, 1),
    pane: "floatPane",
    enableEventPropagation: false
  };
  
  // close all other infoboxes
  SrnMap.closeInfoBoxes();
  // reset picture
  SrnMapMarker.currentPicture = 0;

  // add current id
  SrnMapMarker.current_id = id;

  // creates the info box
  SrnMap.infoboxes[id] = new InfoBox(infoBoxOptions);
  google.maps.event.addListener(SrnMap.infoboxes[id],'domready',function(){
    SrnMapMarker.loadPictures();
  });
  SrnMap.infoboxes[id].open(SrnMap.map, $this);
};

SrnMapMarker.loadPictures = function(){
  var $div = $("#picture_slider");
  if($div.length === 0){
    return;
  }

  var current_country = srn_countries_list[SrnMapMarker.current_id];
  // setup the initial HTML
  var html = "<img src='assets/images/infobox_close.gif' id='infobox_close' width='14' height='13'/>";
  html += "<div id='pic_country'>"+current_country.country_name+"</div>";
  html += "<div id='pictures_container'><div id='pictures_list'></div></div>";
  $div.html(html);

  // get the country id
  var country_id = current_country.id;

  // the close button
  $("#infobox_close").click(function(){
    SrnMap.infoboxes[SrnMapMarker.current_id].close();
    return false;
  });

  function getCallback(rs){
    if(rs.error){
      alert(rs.message);
      return false;
    }
    // add the pictures
    SrnMapMarker.addPictures(rs.pictures);
  }
  //
  $.get('pictures/list', {'id':country_id}, getCallback, 'json');

};

SrnMapMarker.addPictures = function(pictures){
  SrnMapMarker.pictures = pictures;
  SrnMapMarker.totalPictures = pictures.length;

   // check for arrow
  if(pictures.length > 1){
    SrnMapMarker.addArrows();
  }

  SrnMapMarker.showPicture(0);
  /**
  // add the pictures
  var html = "";

  for(var i = 0; i < SrnMapMarker.totalPictures; i++){
    var pic = pictures[i];
    html += "<a href='uploads/map/pictures/"+pic.picture_file+"' rel='shadowbox[country_"+(SrnMapMarker.current_id)+"]' class='pic_gallery' title='"+(pic.picture_caption)+"'>";
    html += "<img src='image.php/map/pictures/"+pic.picture_file+"*170*170*C' width='170' height='170' />";
    html += "</a>";
  }

  var $div = $("#pictures_list");
  $div.html(html);

  // set up all anchor elements with a "movie" class to work with Shadowbox
  Shadowbox.setup("a.pic_gallery");

  /**/
};

SrnMapMarker.showPicture = function(i){
    var pic = SrnMapMarker.pictures[i];
    var html = "";
    html += "<a href='uploads/map/pictures/"+pic.picture_file+"' rel='shadowbox[country_"+(SrnMapMarker.current_id)+"]' class='pic_gallery' title='"+(pic.picture_caption)+"'>";
    html += "<img src='image.php/map/pictures/"+pic.picture_file+"*170*170*C' width='170' height='170' />";
    html += "</a>";

    var $div = $("#pictures_list");
    $div.html(html);

    // set up all anchor elements with a "movie" class to work with Shadowbox
    Shadowbox.setup("a.pic_gallery");
}

SrnMapMarker.addArrows = function(){
  var $main_div = $("#picture_slider");
  // add arrow images
  var $pic_right = $("<img/>").attr("id", "pic_arrow_right").attr("src", "assets/images/map/arrow_right.jpg");
  var $pic_left = $("<img/>").attr("id", "pic_arrow_left").attr("src", "assets/images/map/arrow_left.jpg");

  // paginator
  var $paginator = $("<div></div>").attr("id", "pic_paginator").html("1 of "+(SrnMapMarker.totalPictures)+" photos");

  // click events
  $pic_right.click(SrnMapMarker.slidePictures);
  $pic_left.click(SrnMapMarker.slidePictures);

  // append to dom
  $main_div.append($pic_right);
  $main_div.append($pic_left);
  $main_div.append($paginator);
};

// total pictures
SrnMapMarker.totalPictures = '';
// current picture on slide
SrnMapMarker.currentPicture = 0;

SrnMapMarker.slidePictures = function(){
  // check the id
  if(this.id == "pic_arrow_right"){
    SrnMapMarker.currentPicture++;
  } else {
    SrnMapMarker.currentPicture--;
  }
  if(SrnMapMarker.currentPicture < 0){
    SrnMapMarker.currentPicture = SrnMapMarker.totalPictures-1;
  }
  if(SrnMapMarker.currentPicture == SrnMapMarker.totalPictures){
    SrnMapMarker.currentPicture = 0;
  }
  SrnMapMarker.showPicture(SrnMapMarker.currentPicture);

  // paginator
  $("#pic_paginator").html((SrnMapMarker.currentPicture+1)+" of "+(SrnMapMarker.totalPictures)+" photos");
  
  /**
  var $div_list = $("#pictures_list");
  $div_list.stop().animate({left:'-'+(SrnMapMarker.currentPicture*170)+'px'},{queue:false,duration:160});
  /**/
  return false;
};