$(document).ready(function(){

  if($("#Timeline").length > 0)
  {
      var timeStart = 8;
      var timeScale = 15;
      var playerWidth = 800;
      var marker = '/data/images/marker.gif';
      var positionMarker = '/data/images/positionMarker.gif';
      var timePoints = $("#Timeline li");
      var timeline = $("#Timeline");
      var timelineUl = $("#Timeline ul")
      var timelineImages = timeline.find(".image");
      var timelineSummaries = timeline.find(".text");
      var timelineImageHolder;
      var timelinePlayer;
      var timelineScore;
      var timelineLabel;
      var timelineImageClipper;
      var timelinePositionMarker;
      var playButtonImage = '/data/images/playButton.gif';
      var playButton;
      var currentTimePointIndex = 0;
  
      //hide original ul for timeline
      timelineImages.hide();
      timelineUl.hide();
      
      //create the image holder
      timeline.prepend("<div id=\"TimelineImageHolder\"></div>");
      timelineImageHolder = timeline.find("#TimelineImageHolder");
    
      //create timeline image clipper
      timelineImageHolder.prepend("<div id=\"TimelineImageClipper\"></div>");
      timelineImageClipper = timelineImageHolder.find("#TimelineImageClipper");
    
      //create the player
      timelineUl.wrap("<div class=\"player\"></div>");
      timelinePlayer = timeline.find(".player");
    
      //wrap the timepoints ul in score tag
      timelineUl.wrap("<div class=\"score\"></div>");
      timelineScore = timeline.find(".score");
      timelineScore.wrap("<div class=\"scoreOuter\"></div>");      
    
      timeline.find(".score").css({
        'width': playerWidth + 'px',
        'height': '80px'        
      });
    
      //create label for when hovering over timepoint
      timelineScore.append("<div class=\"label\"></div>");
      timelineLabel = timelineScore.find(".label");
      timelineLabel.prepend("<div class=\"labelInner\"></div>");
      timelineLabel.find(".labelInner").prepend("<div class=\"labelContent\">Label</div>");
      timelineLabel.hide();
    
      //add position
      timelineScore.append("<img id=\"PositionMarker\" src=\"" + positionMarker + "\" />");
      timelinePositionMarker = $(timelineScore.find("#PositionMarker"));
    
      //play button
      timelinePlayer.prepend("<div id=\"PlayButton\" style=\"position: absolute\"><img id=\"ImgPlayButton\" src=\"" + playButtonImage + "\" /></div>");
      playButton = $(timelinePlayer.find("#PlayButton"));
      playButton.find("img").bind("load", function(){
        playButton.css({
          'left': '20px',
          'top': (timelinePlayer.outerHeight()/2) - (playButton.outerHeight()/2) + 'px'
        });
      });
      
      //Make play button hoverable
      MakeElementHoverable(playButton, "hover");
      
      timelinePositionMarker.css({
        'text-align': 'center',
        'position': 'absolute',
        'top':  '0px',
        'left': '0px',
        'z-index': '99'
      });  
    
      //add first intro marker
      var distanceFromLeft = 50;  
      var distancePerMark = playerWidth / timeScale;
      var markerTopPosition;
      var timelineScoreMarker;
      var markerImageHeight;
    
      timelineScore.append("<div style=\"position: absolute; text-align: center;\" class=\"marker marker0\"><img src=\"" + marker + "\" /><div class=\"time\">" + convert24To12Hour($(this).find(".time").html()) + "</div></div>");
      timelineScoreMarker = $(timelineScore.find(".marker0"));
      
      markerTopPosition = (timelinePlayer.outerHeight()/2) - (timelineScoreMarker.outerHeight()/2);
      timelineScoreMarker.css({
        'top':  markerTopPosition + 'px',
        'left': '10px'
      });
    
      var i = timeStart;
      for(i=timeStart;i<timeStart+timeScale;i++)
      {
          //when loaded set position
          $(timelineScoreMarker.find("img")).bind("load", function(){
            $(this).parent().css({
              'top':  (timelinePlayer.outerHeight()/2) - (timelineScoreMarker.find("img").outerHeight()/2) + 'px'
            });
          }); 
        
          timePoints.each(function(){
            if($(this).find(".time").html() == i)
            {
              timelineScore.append("<div style=\"position: absolute; text-align: center;\" class=\"marker marker" + i + "\"><img src=\"" + marker + "\" /><div class=\"time\">" + convert24To12Hour($(this).find(".time").html()) + "</div></div>");
              timelineScoreMarker = $(timelineScore.find(".marker" + i));
              
              markerTopPosition = (timelinePlayer.outerHeight()/2) - (timelineScoreMarker.outerHeight()/2);
              timelineScoreMarker.css({
                'top':  markerTopPosition + 'px',
                'left': distanceFromLeft + distancePerMark * (i-timeStart) + 'px'
              });
              
              //when loaded set position
              $(timelineScoreMarker.find("img")).bind("load", function(){
                $(this).parent().css({
                  'top':  (timelinePlayer.outerHeight()/2) - (timelineScoreMarker.find("img").outerHeight()/2) + 'px'
                });
              });              
            }            
          });          
      }
    
      //start animating the marker
      playButton.click(function(){
        if(currentTimePointIndex < timePoints.length-1)
        {
          selectTimePoint(timePoints[currentTimePointIndex+1], 200);          
        }        
      });
    
      timelineScore.find(".marker").bind("mouseenter", function(){
        var markerIndex = timelineScore.find(".marker").index($(this));
        showTimePointLabel($(timePoints[markerIndex]),200);
      });
    
      timelineScore.find(".marker").bind("mouseleave", function(){
        var markerIndex = timelineScore.find(".marker").index($(this));
        hideTimePointLabel($(timePoints[markerIndex]),200);
      });
  
      timelineScore.find(".marker").click(function(){
        var markerIndex = timelineScore.find(".marker").index($(this));
        selectTimePoint($(timePoints[markerIndex]),200);
      });
      
      selectTimePoint(timePoints[0],0);
    
      $(window).bind("load", function(){
        selectTimePoint(timePoints[0], 0);
      });
    
      function animateMarker(marker, endPoint)
      {
        if($(marker).position().left < endPoint)
        {
          $(marker).css("left",($(marker).position().left + 1) + "px");
          setTimeout(function() { animateMarker(marker, endPoint); }, 30);
        }
      }
  }
  
});

function showTimePointLabel(timePoint)
{
    var timePointIndex = timePoints.index(timePoint);
    var marker = $($(".marker")[timePointIndex]);
    var labelTopPosition, labelLeftPosition;
  
    //hide first
    timelineLabel.stop().animate({
      'opacity': '0',
      'top': labelTopPosition-30 + 'px'
    }, 100, function(){
      
      timelineLabel.hide();
      
      //change content of label        
      timelineLabel.find(".labelContent").html("<nobr>" + timePoint.find("h3").html() + "</nobr>");

      labelTopPosition = marker.position().top-timelineLabel.outerHeight();
      labelLeftPosition = marker.position().left-(timelineLabel.outerWidth()/2)+(marker.outerWidth()/2);
    
      //position label
      timelineLabel.css({
        'position': 'absolute',
        'top': labelTopPosition-10 + 'px',
        'left': labelLeftPosition + 'px',
        'opacity': '0'
      });
      
      var backgroundPosition = String((timelineLabel.outerWidth()/2)-10) + "px " + String(timelineLabel.outerHeight()-12 + "px");
      $(timelineLabel.find(".labelContent")).css("background-position",backgroundPosition);

      //show and animate
      timelineLabel.show();          
      timelineLabel.animate({
        'opacity': '1',
        'top': labelTopPosition-5 + 'px'
      }, 100);
  
    });
}

function hideTimePointLabel(timePoint, functionCallBack)
{
    var timePointIndex = timePoints.index(timePoint);
    var marker = $($(".marker")[timePointIndex]);
    var labelTopPosition, labelLeftPosition;
  
    //hide first
    timelineLabel.find(".labelContent").html("<nobr>" + timePoint.find("h3").html() + "</nobr>");

    labelTopPosition = marker.position().top-timelineLabel.outerHeight();
    labelLeftPosition = marker.position().left-(timelineLabel.outerWidth()/2)+(marker.outerWidth()/2);
    timelineLabel.stop(true, true).animate({
      'opacity': '0',
      'top': labelTopPosition-10 + 'px'
    }, 100, function(){$(this).hide();});
}

function selectTimePoint(timePoint, duration)
{
  var timePointIndex = timePoints.index(timePoint);
  var marker = $($(".marker")[timePointIndex]);
  var timePointTextOuter;
  var timePointText;
  
  //Createtime point text
  if($("#Timeline #TimePointText").length == 0)
  {
    $("#Timeline").append("<div id=\"TimePointTextOuter\"><div id=\"TimePointText\"></div></div>");       
  }      
  timePointTextOuter = $("#Timeline #TimePointTextOuter");
  timePointText = $("#Timeline #TimePointText");
  
  //Mark time point as selected
  $("#TimeLine li").removeClass("selected");
  $(timePoint).addClass("selected");
  
  //Fade TimePointText
  timePointTextOuter.stop().animate({
    'opacity': '0',
    'left': '610px'
  }, duration, function(){    
    
    timePointText.html($(timePoint).find(".text").html());
    if(timePointText.find(".time").html() != "0")
    {
      timePointText.find("h3").prepend("<span class=\"time\">" + convert24To12Hour(timePointText.find(".time").html()) + "</span> - ");
    }
    timePointText.find("div.time").remove();
    
    timePointTextOuter.animate({
      'opacity': '1',
      'left': '590px'
    }, duration * 2); 
    
    timelinePositionMarker.animate({        
      'left': marker.position().left + (marker.outerWidth()/2)-(timelinePositionMarker.attr("width")/2) + 'px',
      'top': marker.position().top + 'px'
    }, duration, function(){
      
        //set currently selected timepoint
        currentTimePointIndex = timePointIndex;
    });
    
  });
  
  //Fade Image
  timelineImageClipper.stop().fadeTo(duration,0, function(){
    timelineImageClipper.html($(timePoint).find(".image").html());
    timelineImageClipper.fadeTo(duration,1);
  });
}

function convert24To12Hour(hourtoconvert)
{
  if(hourtoconvert != 0)
  {
    if(hourtoconvert > 12)
    {
      return hourtoconvert-12 + "pm";
    }
    else
    {      
      return hourtoconvert + "am";
    }
  }
  else
  {
    return "";
  }
}