/*
 * 34HKIFF Scrolling Timetable Script
 */
;(function($)
{
	var contextTimeout = false;

	$.fn.timetable = function(options)
	{
        options = options || {};

		options.timeline = $(this);

		setupTimetable(options);
		setupNavButtons(options);
		setupFilmSlotBehaviors(options);
		setupFilmBaloonTips(options);
	};

	function setupTimetable(options)
	{
		var $timeline = options.timeline;
		$timeline.mousedown(function(event) {
			  $(this)
				.data('down', true)
				.data('x', event.clientX)
				.data('scrollLeft', this.scrollLeft)
				.data('scrolled', false)
				.trigger('timetableScrollStart');
			})
			.mouseup(function(event) {
				$(this).data('down', false)
					.trigger('timetableScrollEnd');
			})
			.mousemove(function(event, delta) {
			  if ($(this).data('down') == true)
			  {
					if (!$(this).data('scrolled'))
					{
						$(this).trigger('timetableScroll');
					}
					$(this).data('scrolled', true);
					this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
			  }
			})
			.mousewheel(function(event, delta) {

			$timeline.trigger('timetableScroll');

				$(this).animate(
					{scrollLeft: (this.scrollLeft - (delta * 250))},
					{
						queue: false,
						duration: 150,
						easing: 'swing',
						complete: function() {
						}
					}
				);
			 return false;
			});

      $timeline.bind('touchstart', function(event) {
        var touch = event.originalEvent.touches[0] || event.originalEvent.changedTouches[0];
        $(this)
        .data('touchDown', true)
        .data('touchX', touch.pageX)
        .data('touchScrollLeft', this.scrollLeft)
        .data('touchScrolled', false)
        .trigger('timetableTouchScrollStart');
      })
      .bind('touchend', function(event) {
        $(this).data('touchDown', false).trigger('timetableTouchScrollEnd');
      })
      .bind('touchmove', function(event) {
        var touch = event.originalEvent.touches[0] || event.originalEvent.changedTouches[0];

        if ($(this).data('touchDown') == true)
        {
          if (!$(this).data('touchScrolled'))
          {
            $(this).trigger('timetableTouchScroll');
          }
          $(this).data('touchScrolled', true);
          this.scrollLeft = $(this).data('touchScrollLeft') + $(this).data('touchX') - touch.pageX;
        }
      });

		$(window)
			.mouseout(function(event) {
				if ($timeline.data('down') == true)
				{
					var nn = event.originalTarget.nodeName;
					if (nn == 'BODY' || nn == 'HTML')
					{
						$timeline.data('down', false)
							.trigger('timetableScrollEnd');
					}
				}
			})
			.mousemove(function(event) {
				if ($timeline.data('down') == true)
					return false;
			});

		if (options.initScrollLeft)
		{
			$timeline.animate(
				{scrollLeft: options.initScrollLeft},
				{duration: 200 , easing: 'swing'}
			);
		}
	};

	/**
	 * Setup the behavior of film slots:
	 * 1. When hovered, display context menu with "Detail" / "Buy Ticket" options
	 * 2. When clicked, scroll timeline to the visible region
	 */
	function setupFilmSlotBehaviors(options)
	{
		var $cells = $(options.filmSlots);
		var $contextMenuContainer = $(options.contextMenuContainer);
		var slotContextMenuSelector = options.filmSlotContextMenuSelector;

		var $timeline = options.timeline;

		// show context menu on hover
		$cells.hover(
			function() {
				var p = $(this).position();

				if (contextTimeout)
				{
				  window.clearTimeout(contextTimeout);
				}

				$(options.contextMenuContainer+' div').html($(slotContextMenuSelector, $(this)).html());

				$contextMenuContainer
					.css('left', p.left > 150?p.left:150)
					.css('top', p.top - 21)
					.show();
			},
			function() {
				contextTimeout = window.setTimeout(function() {
				   hideContextMenu($contextMenuContainer, true);
				}, 1000);
			}
		);

		$contextMenuContainer.hover(
			function() {
				window.clearTimeout(contextTimeout);
			},
			function() {
				contextTimeout = window.setTimeout(function() {
				   hideContextMenu($contextMenuContainer, true);
				}, 1000);
			}
		);

		$timeline.bind('timetableScroll', function() {
			hideContextMenu($contextMenuContainer, false); // hide context menu immediately
		});

		// scroll film slot to view
		/*
		$cells.click(function() {
			var p = $(this).position();
			scrollLeft = document.getElementById('film-timeline').scrollLeft;

			$timeline.animate(
				{ scrollLeft: (scrollLeft + p.left - 250) },
				{queue: false, duration: 150, easing: 'swing'}
			);
		});
		*/
	};


	/**
	 * Setup film baloon tips.
	 */
	function setupFilmBaloonTips(options)
	{
		var $filmTipTarget = $(options.filmTips);

		$filmTipTarget.bt({
			// trigger: 'dblclick',
			contentSelector: options.filmTipContentSelector,
			width: 300,
			offsetParent: 'body',
			shadow: true,
			overlap: -20,
			shadowOffsetX: 3,
			shadowOffsetY: 3,
			shadowBlur: 5,
			shadowColor: 'rgba(0,0,0,.2)',
			closeWhenOthersOpen: true,
			padding: 5,
			cornerRadius: 15,
			fill: '#d5b476',
			strokeStyle: '#BB9754',
			strokeWidth: 1,
			hoverIntentOpts: {
				interval: 200,
				timeout: 200
			}
		});
	};


	function setupNavButtons(options)
	{
		var $navLeft = $(options.btnNavLeft);
		var $navRight = $(options.btnNavRight);
		var $timeline = options.timeline;

		if ($navLeft)
		{
			$navLeft.click(function() {
				$timeline.animate(
				  {scrollLeft: ($timeline.scrollLeft() - 719)},
				  {duration: 100}
				);
				return false;
			});
		}

		if ($navRight)
		{
			$navRight.click(function() {
				$timeline.animate(
				  {scrollLeft: ($timeline.scrollLeft() + 719)},
				  {duration: 100}
				);
				return false;
			});
		}
	};

	function hideContextMenu(item, animate)
	{
		if (animate)
			item.fadeOut();
		else
			item.hide();
	};

})(jQuery);