// usage: log('inside coolFunc', this, arguments);
// paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
window.log = function(){
  log.history = log.history || [];   // store logs to an array for reference
  log.history.push(arguments);
  arguments.callee = arguments.callee.caller;  
  if(this.console) console.log( Array.prototype.slice.call(arguments) );
};
// make it safe to use console.log always
(function(b){function c(){}for(var d="assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,markTimeline,profile,profileEnd,time,timeEnd,trace,warn".split(","),a;a=d.pop();)b[a]=b[a]||c})(window.console=window.console||{});


// place any jQuery/helper plugins in here, instead of separate, slower script files.

/**
 * Timeline plugin
 */
(function($){
  var settings = {
    'moveDistance'  : 50,           //distance to move the timeline when a user clicks one of the side arrows
    'moveLeftID'  : '#timeline-left',     //id of the "move left" arrow
    'moveRightID' : '#timeline-right',    //id of the "move right" arrow
    'timelineID'  : '#timeline',        //id of the actual timeline
    'eventSelector' : 'ol li ol li',      //selector for all of the events. This could be changed to a class, e.g. '.event'
    'eventAction' : 'click'         //what user interaction should the event bind to? 'click', 'mouseover', 'dblclick' are probably the only ones that make sense ( see http://api.jquery.com/bind/ for full list of event types)
  };
  
  //store the starting point of the timeline for later use
  var timelineStart = 0;
  $(document).ready(function(){
    timelineStart = $(settings.timelineID).offset();
    //console.log(timelineStart);
  })
  
  var methods = {
    init : function( options ){
      //$(this).find("#timeline").children("ol").children("li").css("border","1px solid #f00");
      var years = $(this).find("#timeline").children("ol").children("li").length;
      if(years < 9){
/*        $(this).find("#timeline").children("ol").children("li").css("width","120px"); */
      }
      return this.each(function(){
        // If options exist, lets merge them
        // with our default settings
        if (options) { 
          $.extend(settings, options);
        }
        //some shortcut vars
        //prepend '$' to any jQ objects
        var $wrapper = $(this),
          $left = $(settings.moveLeftID),
          $right = $(settings.moveRightID),
          $timeline = $(settings.timelineID),
          $events = $(settings.eventSelector);
          
        $left.bind('click', function(){
          return methods.move('right', $wrapper);
        });
        $right.bind('click', function(){
          return methods.move('left', $wrapper);
        });
        $events.bind(settings.eventAction, function(){
          return methods.showEvent($(this), $wrapper);
        });
        
        //if the users clicks outside of the event dot, make the baloons go away
        $('html').click(function(){
          methods.destroyBaloons();
        });
        $(window).resize(function() {
          methods.destroyBaloons();
        });
        $(settings.eventSelector).click(function(e){
          e.stopPropagation();
        });
      });
    },
    //move the timeline
    move : function(dir, $w){
      //destroy any content baloons
      methods.destroyBaloons();
      var $timeline = $(settings.timelineID),
        distance = settings.moveDistance,
        move = $timeline.offset().left;
        
      if(dir === 'left'){
        //figure out the right-side bounds of the timeline and wrapper to know when to stop scrolling left
        var tl_right = $timeline.position().left + $timeline.width(),
          w_right = $w.offset().left + $w.width();
        if(tl_right <= w_right){
          move = ($timeline.width() - $w.width() - $w.offset().left + $(settings.moveRightID).width()) * -1;
          $('#timeline-right').addClass("at-end");
        } else{
          move = $timeline.offset().left - distance;
          $('#timeline-left').removeClass("at-start");
        }
        
      } else{
        if($timeline.position().left <= (0-distance)){
          move = $timeline.offset().left + distance;
          $('#timeline-right').removeClass("at-end");
          if(timelineStart.left === move){
            $('#timeline-left').addClass("at-start");
          }
        } else{
          move = timelineStart.left;
          $('#timeline-left').addClass("at-start");
        }
      }
      $timeline.offset({left: move});
    },
    //show the selected event
    showEvent : function($e, $w){
      //first things first, destroy any cloned event content blocks
      methods.destroyBaloons();
      //we'll need these later to figure out where to position the event content baloon
      var newTop = newLeft = 0;
      var leftBuffer = 10;
      var bottomBuffer = 30;
      //clone the selected timeline event, add it after the wrapper
      var $c = $e.contents().clone();
      $c.addClass('cloned-tl-event');
      var closer = ('<span class="event-close"></span>');
      $c.prepend(closer);
      $w.after($c);
      //create the arrow and the arrow border that drop below the content baloon - they're just divs that get styled to look like an arrow
      $c.after('<div class="timeline-baloon-arrow-border cloned-tl-event">&nbsp;</div>');
      $arrowBorder = $('.timeline-baloon-arrow-border');
      $arrowBorder.after('<div class="timeline-baloon-arrow cloned-tl-event">&nbsp;</div>');
      $arrow = $('.timeline-baloon-arrow');
      
      var bubbleHeight = $e.children().height();
      
      newTop = $e.offset().top - bubbleHeight - bottomBuffer;// $c.height()
      //figure out the position of the event dot relative to the wrapper
      var relativeLeft = $e.offset().left - $w.offset().left;
      //divide the width of the wrapper in 3 to determine where to horizontally position the event content baloon
      var wrapperThirds = Math.floor($w.width() / 3);
      
      if(relativeLeft < wrapperThirds){
        //event is in the left third of the timeline, position the baloon with a right overhang
        newLeft = $e.offset().left - leftBuffer;
      } else if(relativeLeft > (wrapperThirds * 2)){
        //event is in the right third of the timeline, position the baloon with a left overhang
        newLeft = $e.offset().left - $c.width() + leftBuffer;
      } else{
        //event is in the middle third of the timeline, center the baloon
        newLeft = $e.offset().left - ($c.width() / 2);
      }
      $c.offset({top:newTop,left:newLeft});
      
      $arrow.offset({top: $e.offset().top - 6, left: $e.offset().left});
      $arrowBorder.offset({top: $e.offset().top - 5, left: $e.offset().left});
    },
    destroyBaloons : function(){
      $('.cloned-tl-event').remove();
    }
  };
  
  $.fn.timeline = function( method ){
    if ( methods[method] ) {
      return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'Method ' +  method + ' does not exist on jQuery.timeline' );
    }
  };

})(jQuery);