var SHOW_TIMER_IND = 0;
var HIDE_TIMER_IND = 1;

$(document).ready(function()  {
   $("#progress div.bar").bind("mouseover", cloud.divOver);
   $("#progress div.bar").bind("mouseout", cloud.divOut);

   $("#progress-cloud").bind("mouseover", cloud.protect);
   $("#progress-cloud").bind("mouseout", cloud.divOut);

   $(document).bind("click", cloud.outerClick);
});

$(document).bind("keypress", function(event){
   var code = event.keyCode;
   switch(code)   {
      case 27:
         cloud.hideWindow();
         break;
   }
});

var cloud = {
   timers: [0, 0],
   hidden: true,

   stopTimer: function(ind)  {
      if (cloud.timers[ind]) {
         clearTimeout(cloud.timers[ind]);
         cloud.timers[ind] = 0;
      }
   },

   launchTimer: function(ind, command, val)  {
      cloud.timers[ind] = setTimeout(command, val);
   },

   divOver: function(e) {
      cloud.stopTimer(SHOW_TIMER_IND);
      cloud.stopTimer(HIDE_TIMER_IND);
      
      var div = $(e.target);
      var id = div.attr("id");
      if ("undefined" == typeof(id) || "" == id) return;
      var ind = Number(id.replace(/item\-([0-9]+)/, "$1"));

      cloud.ecy = e.clientY;
      cloud.epy = e.pageY;

      cloud.launchTimer(SHOW_TIMER_IND, "cloud.showWindow(" + ind +");", 750);
   },

   divOut: function(e) {
      cloud.stopTimer(SHOW_TIMER_IND);
      cloud.launchTimer(HIDE_TIMER_IND, "cloud.hideWindow();", 500);
   },

   hideWindow: function()  {
      cloud.stopTimer(SHOW_TIMER_IND);
      $("#progress-cloud").addClass("none");
      cloud.hidden = true;
   },

   protect: function()  {
      cloud.stopTimer(HIDE_TIMER_IND);
   },

   outerClick: function(e)  {
      if (cloud.hidden) return;
      var target = e.target || e.srcElement;
      if (target.id == "progress-cloud") return;
      if ($(target).parents("#progress-cloud").length > 0) return;
      cloud.hideWindow();
   },

   showWindow: function(ind)   {

      //filling the data
      var track = tracks[ind];
      $("#progress-cloud h1").text(track.title);
      $("#progress-cloud .preview").attr("href", HOME + "/track/" + track.track_id);
      $("#progress-cloud .preview img").attr("src", HOME + "/video/" + track.track_id + ".jpg");
      $("#progress-cloud #prog-duration span").text(track.duration);
      $("#progress-cloud #prog-stars img").removeClass("stars-1 stars-2 stars-3 stars-4 stars-5");
      $("#progress-cloud #prog-stars img").addClass("stars-" + track.stars);
      $("#progress-cloud #prog-completed span").text(track.completed);
      $("#progress-cloud #prog-skill span").text(track.skill);
      $("#progress-cloud #prog-started span").text(track.started);
      $("#progress-cloud #prog-finished span").text(track.finished);

      $("#progress-cloud").css("top", "-1000px");
      $("#progress-cloud").removeClass("none");

      var div = $("#progress .bar:eq(" + ind + ")");
      var cloud_offset = $("#progress-cloud").offset();
      var cloud_position = $("#progress-cloud").position();
      var div_center_offset = ($.browser.opera) ? getOffset(div[0]) : div.offset();
      div_center_offset.left += div.width()/2;
      var dx = -$("#progress-cloud").width()/2;

//      $("#cloud").css("top", (span_center_offset.top + dy + cloud_position.top - cloud_offset.top) + "px");
      $("#progress-cloud").css("left", (div_center_offset.left + dx + cloud_position.left - cloud_offset.left) + "px");
      $("#progress-cloud").css("top", (10 + cloud.epy - cloud_offset.top + cloud_position.top) + "px");


      
/*
         var h = $("#cloud").height() + 10 - 2; //due to cloud-cont relative position offset and underline(-2)
         var h_ = $("#cloud #cloud-top-link").height();
         var wh = $(window).height();
         var cloud_offset = $("#cloud").offset();
         var cloud_position = $("#cloud").position();
         //var span_center_offset = cloud.espan.offset();
         var span_center_offset = ($.browser.opera) ? getOffset(cloud.current_state().espan[0]) : cloud.current_state().espan.offset();

         span_center_offset.top += cloud.current_state().espan.height()/2;
         span_center_offset.left += cloud.current_state().espan.width()/2;
         var BUFF = 6;

         var dx = -$("#cloud").width()/2;
         var dy;
         if (cloud.ecy + (h + h_ + BUFF + 15) > wh && cloud.ecy - (h + h_ + BUFF + 15)  >= 0) {
            $("#cloud #cloud-bottom-link").removeClass("none");
            $("#cloud #cloud-top-link").addClass("none");
            dy = -(h + h_ + BUFF);
            cloud.current_state().linkage = "top";
         }  else  {
            $("#cloud #cloud-bottom-link").addClass("none");
            $("#cloud #cloud-top-link").removeClass("none");
            dy = (h_ + BUFF);
            cloud.current_state().linkage = "bottom";
         }

         $("#cloud").css("top", (span_center_offset.top + dy + cloud_position.top - cloud_offset.top) + "px");
         $("#cloud").css("left", (span_center_offset.left + dx + cloud_position.left - cloud_offset.left) + "px");

         cloud.hidden = false;

         $(".active-cloud-word").removeClass("active-cloud-word");
         cloud.current_state().espan.addClass("active-cloud-word");
*/
   }
};