/* feature vechicle helper functions */
$.fn.featureVechicle = function(options) {
	return this.each(function() {
		$.featureVechicle(this, options);
	});
};

$.featureVechicle = function(container, options) {
	$.featureVechicle.settings = {
		'speed':	'normal',
		'timeout':	2000
	};
	if (options){
		$.extend($.featureVechicle.settings, options);
	}

	var vechicle		= $(container).find('#featureList');
	var vechicleItems	= $(vechicle).find('.afeature');
	var arrow			= $(container).find('#theArrow');
	var control			= $(container).find('#featureTitles');
	var controlItems	= $(control).find('.afeaturetitle');
	var num 			= vechicleItems.length;

	//define the width of the feature title base on the no. of items
	switch(num){
		case 1:
			var menu_width		= 0;
			var selected_width  = 950; // [ 950 ] + 10 = 960
			break;
		case 2:
			var menu_width		= 340;
			var selected_width  = 600; // [ 340 + 600 = 940 ] + 10 * 2 = 960
			break;
		case 3:
			var menu_width		= 270;
			var selected_width  = 390; // [ 270 + 270 + 390 = 930 ] + 10 * 3 = 960
			break;
		case 4:
			var menu_width		= 200;
			var selected_width  = 320; // [ 200 + 200 + 200 + 320 = 920 ] + 10 * 4 = 960
			break;
		default:
			var menu_width		= 160;
			var selected_width  = 270; // [ 160 * 4 + 270 = 910 ] + 10 * 5 = 960
	}

	if (num > 1) {

		// start from zero
		var current = 0;

		// init styles
		for (var i=0; i < num; i++) {
		
			$('.v_tile',vechicleItems[i]).each(function(e){
				if ($(this).data('ellipsis')) return;
				
				$('.vt_name',this).ellipsis(true);
				$('.vt_tooltip',this).show();
				$('.vtt_des',this).css('overflow','hidden').height(60).ellipsis(true).height('auto').css('overflow','visible');
				$('.vt_tooltip',this).hide();
				$(this).hoverIntent({over:function(e){$('.vt_tooltip',this).fadeIn(100)},timeout: 500,out:function(e){$('.vt_tooltip',this).fadeOut(100)}}).data('ellipsis',true);
			});
			
			$(vechicleItems[i])
				.hide()
				.css({
					'z-index' : String(num-i),
					'position' : 'absolute'
				})
			if (i==current)
				$(vechicleItems[i])
					.show()
					.addClass('selectedFeature');
		};

		// Get first child width / height as container width / height
		var vechicleWidth	= $(vechicleItems[0]).width()
			+ parseInt($(vechicleItems[0]).css('padding-left').replace(/px/,''))
			+ parseInt($(vechicleItems[0]).css('padding-right').replace(/px/,''));
		var vechicleHeight	= $(vechicleItems[0]).height()
			+ parseInt($(vechicleItems[0]).css('padding-top').replace(/px/,''))
			+ parseInt($(vechicleItems[0]).css('padding-bottom').replace(/px/,''));
		
		// build box
		$(vechicle)
			.css({
				'position' : 'relative',
				'height' : vechicleHeight
			});
		
		//init arrow position
		var menu_padding = parseInt($(controlItems[current]).find('a').css('padding-left').replace(/px/,''))
						 + parseInt($(controlItems[current]).find('a').css('padding-right').replace(/px/,''));
		var arrow_margin = parseInt($(arrow).css('left').replace(/px/,''));
		var left_space	 = (current * (menu_width + menu_padding)) + arrow_margin;

		$(arrow).css({ left : left_space + 'px' });

		// wrap all numbers in a json
		var control_settings = {
			'width'		: menu_width,
			'selected'	: selected_width,
			'padding'	: menu_padding,
			'margin'	: arrow_margin
		}

		// init the control bar
		for (var i=0; i < num; i++) {
			$(controlItems[i])
				.css('display','inline-block')
				.addClass( (i==current) ? 'selectedFeature' : '')
					.find('a')
					.attr('href', 'javascript:;')	//remove original link
					.attr('rel', i)					//remove original rel and attach the index
					.css(
						{ 'width' : ((i==current) ? selected_width : menu_width) + 'px' }
					)
					.click(function(e){
						$.featureVechicle.moveTo(vechicleItems, controlItems, arrow, control_settings, $(this).attr('rel'), $.featureVechicle.settings.speed);
					});
		};

		// create interval
		$.featureVechicle.interval = setInterval(function(){
			$.featureVechicle.move(vechicleItems, controlItems, arrow, control_settings, $.featureVechicle.settings.speed);
		}, $.featureVechicle.settings.timeout);

		// Container Hover event
		$(container).hover(
			function(){
				if($.featureVechicle.pause){return}
				$.featureVechicle.pause = true;
				$.featureVechicle.interval = clearInterval($.featureVechicle.interval);
			},
			function(){
				if(!$.featureVechicle.pause){return}  //Prevent double firing of mouseout
				$.featureVechicle.pause = false;
				$.featureVechicle.interval = setInterval(function() {
					$.featureVechicle.move(vechicleItems, controlItems, arrow, control_settings, $.featureVechicle.settings.speed);
				}, $.featureVechicle.settings.timeout);
			}
		);
	}
};


$.featureVechicle.move = function (vechicleItems, controlItems, arrow, control_settings, speed) {
	if($.featureVechicle.pause){ return }
	if($.cookie('turn') == 'noani'){ return }
	
	var current 	= $(vechicleItems).filter('.selectedFeature');
	var next 		= ($(current).next().length) ? $(current).next() : vechicleItems[0];

	var ctlCurent	= $(controlItems).filter('.selectedFeature');
	var ctlNext		= ($(ctlCurent).next().length) ? $(ctlCurent).next() : controlItems[0];

	var n = parseInt($(ctlNext).find('a').attr('rel'));

	//innerfade
	$(current)
		.fadeOut(speed)
		.removeClass('selectedFeature');
	$(next)
		.fadeIn(speed)
		.addClass('selectedFeature');

	//slide the arrow
	var left_space	 = ( n * (control_settings.width + control_settings.padding) ) + control_settings.margin;
	$(arrow).animate({ left : left_space + 'px' }, 300);

	//animate the title
	$(ctlCurent)
		.removeClass('selectedFeature')
		.find('a')
			.animate({ 'width' : control_settings.width + 'px' }, 300);
	$(ctlNext)
		.addClass('selectedFeature')
		.find('a')
			.animate({ 'width' : control_settings.selected + 'px' }, 300);
	
	var vechicleHeight	= $(next).height()
		+ parseInt($(next).css('padding-top').replace(/px/,''))
		+ parseInt($(next).css('padding-bottom').replace(/px/,''));

		$('#featureList').animate({ 'height' : vechicleHeight + 'px' }, 300);
};

$.featureVechicle.moveTo = function (vechicleItems, controlItems, arrow, control_settings, n, speed) {
	$.featureVechicle.pause = true;
	$(vechicleItems).stop(true,true);
	$(controlItems).stop(true,true);
	$('#featureList').stop(true,true);

	var current		= $(vechicleItems).filter('.selectedFeature');
	var next		= vechicleItems[n];

	var ctlCurent	= $(controlItems).filter('.selectedFeature');
	var ctlNext		= controlItems[n];
	
	if ( $(ctlCurent).find('a').attr('rel') != n ) {
		//innerfade
		$(current)
			.fadeOut(speed)
			.removeClass('selectedFeature');
		$(next)
			.fadeIn(speed)
			.addClass('selectedFeature');

		//slide the arrow
		var left_space	 = ( n * (control_settings.width + control_settings.padding) ) + control_settings.margin;
		$(arrow).animate({ left : left_space + 'px' }, 300);

		//animate the title
		$(ctlCurent)
			.removeClass('selectedFeature')
			.find('a')
				.animate({ 'width' : control_settings.width + 'px' });
		$(ctlNext)
			.addClass('selectedFeature')
			.find('a')
				.animate({ 'width' : control_settings.selected + 'px' });
				//not to use animate() for clicking event as it may casue the layout break.
		
		var vechicleHeight	= $(next).height()
			+ parseInt($(next).css('padding-top').replace(/px/,''))
			+ parseInt($(next).css('padding-bottom').replace(/px/,''));

		$('#featureList').animate({ 'height' : vechicleHeight + 'px' }, 300, 'swing', function(e){$.featureVechicle.pause = false;});
	}
};