/**
 * This file contains functions for manipulating tab areas.
 * 
 * @author Pexeto
 */

var sliderTabs = new Array();
var sliderTabNumber = 0;

var divArray = new Array();

var tabColor1 = "#f55b18";
var tabColor2 = "#dc1f52";
var tabColor3 = "#54c6d7";

var currentDivIndex = 0;
var articleWidth = 958;

var sidebarDivs = new Array();
var sidebarDivNumber = 0;

var maxHeight = 0;

$(function() {
	getSliderDivs();
	setSliderTabClickHandler();
	// selectDiv(0);

	setDefaultWidth();
	setSlider();

	getSidebarDivs();
	setSidebarTabs();
});

/**
 * Fills the divs from the slider tab in an array.
 * 
 * @return
 */
function getSliderDivs() {
	$(".articleHolder").each(function(i) {
		divArray[i] = $(this);
	});
}

/**
 * Selects a tab by its index.
 * 
 * @param index
 *            the index of the tab.
 * @return
 */
function selectDiv(divIndex) {
	// this is not the last div, go to the next one

	if (divIndex == 0) {
		$("#sliderTab1").css( {
			zIndex : 3
		});
		$("#sliderTab2").css( {
			zIndex : 2
		});
		$("#sliderTab3").css( {
			zIndex : 1
		});
		$("#sliderLine").css( {
			backgroundColor : tabColor1
		});
	} else {
		if (divIndex == 1) {
			$("#sliderTab1").css( {
				zIndex : 2
			});
			$("#sliderTab2").css( {
				zIndex : 3
			});
			$("#sliderTab3").css( {
				zIndex : 1
			});
			$("#sliderLine").css( {
				backgroundColor : tabColor2
			});
		} else {
			if (divIndex == 2) {
				$("#sliderTab1").css( {
					zIndex : 1
				});
				$("#sliderTab2").css( {
					zIndex : 2
				});
				$("#sliderTab3").css( {
					zIndex : 3
				});
				$("#sliderLine").css( {
					backgroundColor : tabColor3
				});
			}
		}
	}

	$(".wrapper ul").animate( {
		marginLeft : -divIndex * articleWidth
	}, 600);
	currentDivIndex = divIndex;

}

/**
 * Sets a click handler to the slider tab area.
 * 
 * @return
 */
function setSliderTabClickHandler() {

	$(".sliderTab").each(function(i) {
		sliderTabs[i] = $(this);
		sliderTabNumber++;
		$(this).mouseover(function() {
			$(this).css( {
				cursor : "pointer"
			});
		});
	});

	$(".sliderTab").each(function(i) {
		$(this).click(function() {
			selectDiv(i);
		});
	});

}

/**
 * Makes the initial setting of the tab slider area.
 * 
 * @return
 */
function setSlider() {

	$(".rightSliderArrow").hover(function() {
		$(this).css( {
			cursor : "pointer"
		});
	});

	$(".leftSliderArrow").hover(function() {
		$(this).css( {
			cursor : "pointer"
		});
	});

	// set a click event handler for the right arrow
	$(".rightSliderArrow").click(function() {

		if (currentDivIndex < divArray.length - 1) {
			// this is not the last div, go to the next one
			currentDivIndex++;
			selectDiv(currentDivIndex);
		}
	});

	// set a click event handler for the left arrow
	$(".leftSliderArrow").click(function() {

		if (currentDivIndex > 0) {
			currentDivIndex--;
			selectDiv(currentDivIndex);
		}
	});
}

/**
 * Sets the width of a single div and the width of the div wrapper.
 */
function setDefaultWidth() {

	var allDivsWidth = articleWidth * divArray.length;
	$(".wrapper ul").css( {
		width : allDivsWidth + "px"
	});
}

/**
 * Get the divs from the sidebar tabs.
 * @return
 */
function getSidebarDivs() {
	// fill the divs in an array
	$(".sidebarContent").each(function(i) {
		sidebarDivs[i] = $(this);
		sidebarDivNumber++;
		var height = $(this).height();
		if (height > maxHeight) {
			maxHeight = height;
		}

	});
	
	$(".sidebarContent").each(function(i) {
		$(this).css({height:maxHeight});
	});

	maxHeight = maxHeight + 70;
	$("#sidebarTabArea").css( {
		height : maxHeight
	});
}

/**
 * Makes the initial setting of the sidebar tabs area.
 * 
 * @return
 */
function setSidebarTabs() {
	selectSidebarTab(0);

	$(".sidebarTab").each(function(i) {
		$(this).hover(function() {
			$(this).css( {
				cursor : "pointer"
			});
		});

		$(this).click(function() {
			selectSidebarTab(i);
		});
	});
}

/**
 * Selects a tab by its index.
 * 
 * @param index
 *            the index of the tab.
 * @return
 */
function selectSidebarTab(index) {
	if (sidebarDivNumber > 0) {
		for ( var i = 0; i < sidebarDivNumber; i++) {
			sidebarDivs[i].css( {
				display : "none"
			});
			$(".sidebarTab").eq(i).removeClass("selectedTab");
		}

		sidebarDivs[index].css( {
			display : "block"
		});
		$(".sidebarTab").eq(index).addClass("selectedTab");
	}
}