/*

Content Timeline 3.0

Date organised content slider.

Copyright (c) 2012 Br0 (shindiristudio.com)

Project site: http://codecanyon.net/

Project demo: http://shindiristudio.com/timeline

*/

(function($){

	// EVENTS.timeline

	// init.timeline          : triggered when timeline is initialised

	// scrollStart.timeline   : triggered when item move animation starts

	// scrollEnd.timeline     : triggered when item move animation ends

	// itemOpen.timeline      : triggered on click to open item

	// itemClose.timeline     : triggered on click to close item

	// ---------------------------------------------------------

	// On KeyPress (left)     : trigger $.timeline('left')

	// On KeyPress (right)    : trigger $.timeline('right')

	// ---------------------------------------------------------

	// $.timeline(METHODS)

	// $.timeline('init')     : initialises timeline

	// $.timeline('destroy')  : clears timeline data

	// $.timeline('left')     : moves one left by one element

	// $.timeline('right')    : moves right by one element

	// $.timeline('open', id) : opens element with 'data-id' = id

	// $.timeline('close', id): closes element with 'data-id' = id

	// $.timeline('goTo', id) : goes to element width 'data-id' = id

	var t_methods = {

		init : function( options ) {

			 // Default settings

   			var settings = $.extend( {

				'itemClass'              : '.item',       // class used for timeline items

				'itemOpenClass'          : '.item_open',  // class used for item details

				'openTriggerClass'       : '.item',       // class of read more element (default uses whole item to trigger open event)

				'closeText'              : 'Close',       // text of close button in open item

				'itemMargin'             : 10,            // spacing between items

				'scrollSpeed'            : 500,           // animation speed

				'startItem'              : 'last',        // timeline start item id, 'last' or 'first' can be used insted

				'easing'                 : 'easeOutSine', // jquery.easing function for animations,

				'categories'             : ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], // categories shown above timeline (months are default)

				'nuberOfSegments'        : [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], // number of elements per category (number of days)

				'yearsOn'                : true,           // show years (can be any number you use in data-id (elementNumber/category/yearOrSomeOtherNumber))

				'swipeOn'                : true,           // turn on swipe moving function

				'hideTimeline'           : false,

				'hideControles'          : false

   			}, options); // Setings

			// main queries

			var $this = this,

				$body = $('body'),

				$items = $this.find(settings.itemClass),

				$itemsOpen = $this.find(settings.itemOpenClass),

				itemWidth = $items.first().width(),

				itemOpenWidth = $itemsOpen.first().width();

			// Trigger init event

			$this.trigger('init.Timeline');	

			// If no index found

			var startIndex = $items.length-1;

			// Find index of start element

			if(settings.startItem == 'first')

			{

				startIndex = 0;

			}

			else if (settings.startItem == 'last')

			{

				startIndex = $items.length-1;

			}

			else {

				$items.each(function(index){

					if(settings.startItem == $(this).attr('data-id'))

					{

					startIndex = index;

					return true;

					}

				});	

			}

			$items.each(function(index){

				$(this).attr('data-count', index);

				$(this).next(settings.itemOpenClass).attr('data-count', index);

				if(!$(this).hasClass(settings.openTriggerClass)) {

					$(this).find(settings.openTriggerClass).attr('data-count', index);

				}

			});

			// Create wrapper elements, and needed properties

			$this.append('<div style="clear:both"></div>');

			$this.css({width: '100%', 'overflow' : 'hidden', marginLeft : 'auto', marginRight : 'auto','text-align': 'center', height:0});

     		$this.wrapInner('<div class="timeline_items" />');

			$this.find('.timeline_items').css('text-align','left');

			if(!settings.hideControles) {

				$this.append('<div class="t_controles"><div class="t_left"></div><div class="t_right"></div></div>');

			}

			// ZoomOut placement fix

     		$this.wrapInner('<div class="timeline_items_holder" />');

			$this.find('.timeline_items_holder').css({width: '300px', marginLeft : 'auto', marginRight : 'auto'});

			$items.css({paddingLeft:0 , paddingRight:0, marginLeft: settings.itemMargin/2, marginRight: settings.itemMargin/2, float: 'left', position:'relative'});

			$itemsOpen.each(function(){

				$(this).prepend('<div class="t_close" data-count="'+$(this).attr('data-count')+'" data-id="'+$(this).attr('data-id')+'">'+settings.closeText+'</div>');

				$(this).wrapInner('<div class="'+settings.itemOpenClass.substr(1)+'_cwrapper"  />').find('div:first').css({position: 'relative'});

				$(this).css({width: 0, padding:0 , margin: 0, float: 'left', display : 'none', position : 'relative', overflow : 'hidden'});

			});

			// Get new queries

			var	$iholder =  $this.find('.timeline_items:first'),

				$line = $this.find('.t_line_wrapper:first'),

				margin = 300/2 - (itemWidth + settings.itemMargin)*(1/2 + startIndex) ,

				width = (itemWidth + settings.itemMargin)*$items.length + (itemOpenWidth + settings.itemMargin) + 660 ,

				data = $this.data('timeline');

			// Set margin so start element would place in midle of the screen	

			$iholder.css({width: width, marginLeft: margin});

			// If the plugin hasn't been initialized yet

			if (!data){

     		$this.data('timeline', {

					currentIndex  : startIndex,

					itemCount     : $items.length,

					margin        : margin,

					itemWidth     : itemWidth,

					itemOpenWidth : itemOpenWidth,

					lineMargin    : 0,

					lineViewCount : 0,

					options       : settings,

					items         : $items,

					iholder       : $iholder,

					open          : false,

					noAnimation   : false,

					marginResponse: false,

					mousedown     : false,

					mousestartpos : 0

				});

			}

			if(!settings.hideTimeline) {

				$this.timeline('createElements');

			}

			// Bind keyLeft and KeyRight functions

			$(document).keydown(function(e){

				if (e.keyCode == 37) { 

					$this.timeline('left');

					return false;

				}

				if (e.keyCode == 39) {

					$this.timeline('right');

					return false;

				}

			});

			// Respond to window resizing

			$(window).resize(function() {

				//var id = $this.find('.active:first').attr('href').substr(1);

				var data = $this.data('timeline'),

					id = $items.eq(data.currentIndex).attr('data-id');

				itemWidth = $items.first().width(),

				itemOpenWidth = $itemsOpen.first().find('div:first').width();

				data.margin += data.itemCount*(data.itemWidth-itemWidth);

				data.itemWidth = itemWidth;

				if(data.open) data.margin += (data.itemOpenWidth-itemOpenWidth)/2;

				data.itemOpenWidth = itemOpenWidth;

				if($('body').width() < 767 && data.open && !data.marginResponse) {

					data.margin -= (itemWidth+settings.itemMargin)/2;

					data.marginResponse = true;

				}

				else if($('body').width() >= 767 && data.marginResponse && data.open) {

					data.margin += (itemWidth+settings.itemMargin)/2;

					data.marginResponse = false;

				}

				data.noAnimation = true;

				$this.timeline('goTo', id);

			});

			// Bind left on click

			$this.find('.t_left').click(function(){

				$this.timeline('left');

			});

			// Bind right on click

			$this.find('.t_right').click(function(){

				$this.timeline('right');

			});

			// SWIPE bind

			if(settings.swipeOn) {

				$items.find('*').each(function(){

					$(this).css({'-webkit-touch-callout': 'none',

								'-webkit-user-select': 'none',

								'-khtml-user-select': 'none',

								'-moz-user-select': 'none',

								'-ms-user-select': 'none',

								'user-select': 'none'});

				});

				$this.find(settings.itemClass).mousedown(function(e){

					$this.timeline('mouseDown', e.pageX);

				});

				$(document).mouseup(function(e){

					var data = $this.data('timeline');

					if(data.mousedown) {

						$this.timeline('mouseUp', e.pageX);

					}

				});

			}

			// Bind open on click

			$this.find(settings.openTriggerClass).click(function(){

				$this.timeline('goTo',$(this).attr('data-id'), $(this).attr('data-count'), true);

			});

			// Bind close on click

			$this.find('.t_close').click(function(){

				$this.timeline('close',$(this).attr('data-id'),$(this).attr('data-count'));

			});

			// Show when loaded

			$this.css({height: 'auto'}).show();

			// Reposition nodes due to their width

			$this.find('.t_line_node').each(function(){

				if($(this).width() < 10) $(this).width(12);

				$(this).css({marginLeft: -$(this).width()/2});

			});

			return $this;

		},

		// Clear data

		destroy : function( ) {

			$(document).unbind('mouseup');

			$(window).unbind('resize');

			var $this = this,

				data = $this.data('timeline');

			$this.removeData('timeline');

		},

		mouseDown : function(xpos) {

			var $this = this,

				data = $this.data('timeline'),

				xmargin = 0;

			data.mousedown = true;

			data.mousestartpos = xpos;

			$('body').css('cursor','move');

			$(document).mousemove(function(e){

				xmargin = data.margin - xpos + e.pageX;

				data.iholder.css('marginLeft', xmargin + 'px');

			});

		},

		mouseUp : function(xpos) {

			var $this = this,

				data = $this.data('timeline'),

				itemWidth = data.itemWidth + data.options.itemMargin,

				itemC = data.currentIndex,

				mod = 0,

				xmargin = xpos - data.mousestartpos;

			data.mousedown = false;

			$(document).unbind('mousemove');

			$('body').css('cursor','auto');

			itemC -= parseInt(xmargin/itemWidth);

			mod = xmargin%itemWidth;

			if (xmargin < 0 && mod < -itemWidth/2) {

				itemC++;

			}

			if (xmargin > 0 && mod > itemWidth/2) {

				itemC--;

			}

			if(itemC < 0) {

				itemC = 0;

			}

			if(itemC >= data.itemCount) {

				itemC = data.itemCount-1;

			}

			$this.timeline('goTo', data.items.eq(itemC).attr('data-id'), data.items.eq(itemC).attr('data-count'));

		},

		open : function (id, data_count) {

			var $this = this,

				data = $this.data('timeline'),

				$items = $this.find(data.options.itemOpenClass),

				speed = data.options.scrollSpeed,

				width =  data.itemOpenWidth,

				easing = data.options.easin,

				itemMargin = data.options.itemMargin;

			$items.each(function(){

				if ($(this).attr('data-id') == id) {

					if (!data_count || data_count == $(this).attr('data-count')) {

						// Trigger itemOpen event

						$this.trigger('itemOpen.Timeline');

						// Open content and move margin	

						$(this).stop(true).show().animate({width: width, marginLeft: itemMargin/2, marginRight: itemMargin/2,}, speed, easing);

						if($('body').width() < 767) {

							data.margin -= (data.itemWidth+data.options.itemMargin)/2;

							data.marginResponse = true;

						}

						else {

							data.marginResponse = false;

						}

						data.margin -= (width + data.options.itemMargin + data.itemWidth)/2 - data.itemWidth/2;

						data.iholder.stop(true).animate({marginLeft : data.margin}, speed, easing);

						data.open = id;

					}

				}