﻿$(document).ready(function () {

	InitializeHomepage();

	// Featured Content Tabs

	$(".tab_content").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab

	//$("#featured").show(); //DEV ONLY, comment this out and comment in the next line for LIVE!!
	$(".tab_content:first").show(); //Show first tab content

	if ($(".tab_content:first").find('.item').length > 3) {

		$("#nav_featureditems").show();
	}
	else {
		$("#nav_featureditems").hide();
	}


	//Slider Tabl Click Event
	$("ul.tabs li").bind('click', NavigationTabClick);

	InitializeTabProductSlider();



});

function InitializeHomepage() {

	$('#home_slider').nivoSlider({ controlNav: false, effect: 'sliceDown', pauseTime: 6000 });

}

function NavigationTabClick(event) {
	$("ul.tabs li").removeClass("active"); //Remove any "active" class
	$(this).addClass("active"); //Add "active" class to selected tab
	$(".tab_content").hide(); //Hide all tab content

	var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content

	// Looks terrible in IE because of the alpha/text blending bug/feature that Trident has
	//$(activeTab).fadeIn(); //Fade in the active ID content
	$(activeTab).show();

	if ($(activeTab).find('.item').length > 3) {

		$("#nav_featureditems").show();
	}
	else {
		$("#nav_featureditems").hide();
	}

	return false;
}

// if needed, change this to represent itemWidth * itemsPerPage
var _scrollAmount = (218 * 3);
//var _scrollAmount = 25;

function InitializeTabProductSlider() {
	var containers = $('.container_featureditems');

	for (var i = 0; i < containers.length; i++) {

		var container = containers[i];
		var items = $(container).find('.item');

		var itemWidth = 218;

		var item = items[0];
		//var itemWidth = $(item).width();
		//console.debug(itemWidth);

		// multiply our item width by the number of items we consider 1 "page"
		var containerWidth = (itemWidth * items.length) + 2;
		//console.debug('CID:' + $(container).parent().attr('id'), containerWidth);

		// Explicitly set container width so the scrollLeft attribute will work
		$(container).css('width', containerWidth.toString() + 'px');
	}


	var leftButton = $('#nav_featureditems .left');
	var rightButton = $('#nav_featureditems .right');

	if (leftButton.length > 0 && rightButton.length > 0) {

		$(leftButton).bind('click', function (event) {
			ScrollLeftToRight.call(this);
		});

		$(rightButton).bind('click', function (event) {
			ScrollRightToLeft.call(this);
		});
	}
}

function ScrollLeftToRight(event) {

	var tmpParentId = $("ul.tabs li.active").find('a').attr('href');

	if (tmpParentId !== '') {

		var parentContainer = tmpParentId;

		var currentScrollLeft = $(parentContainer).attr('scrollLeft');

		currentScrollLeft -= _scrollAmount;

		$(parentContainer).animate({ scrollLeft: currentScrollLeft }, 500, function () {
			// success function
		});

	}

	return false;
}

function ScrollRightToLeft(event) {

	var tmpParentId = $("ul.tabs li.active").find('a').attr('href');

	if (tmpParentId !== '') {

		var parentContainer = tmpParentId;

		var currentScrollLeft = $(parentContainer).attr('scrollLeft');

		currentScrollLeft += _scrollAmount;

		$(parentContainer).animate({ scrollLeft: currentScrollLeft }, 750, function () {
			// success function
		});

	}

	return false;
}
