//Philip Vergunst, Schutte Informatisering 2006
//==================================================================DEZE VARIABELEN MOGEN VERANDERD WORDEN==================================================================

var tab_width = 165;												//De breedte van de tabs
var tab_height = 171;												//De hoogte van de tabs
var tab_top = 164;													//De initiele y-positie van de tabs
var tab_overlapping = -10;											//De afspand tussen de tabs
var tab_start_left = 40;											//De x-positie van de meest linkse tab
var all_tabs = new Array("tab1", "tab2", "tab3");					//De divs die als zich als tab gaan gedragen

var hitearea_width = 144;											//De breedte van de button
var hitearea_height = 15;											//De hoogte van de button
var hitearea_top = 5;												//De y-positie van de button
var hitarea_left = 5;												//De x-positie van de button

var interval_speed = 20;											//De interval in milliseconden
var max_move = 120;													//De maximale verplaatsing in pixels
var easing_factor = 0.8;											//Hiermee is verloopt de animatie mooier. Naarmate de eindpositie dichtebij komt, gaat de verplaatsing langzamer wanneer het getal kleiner is dan 1 (0.6). Wanneer het getal groter is (1.2) versnelt hij.

var tabs_background = "http://www.kmbv.nl/_globScripts/tabs/tab_back.png"
var titles_backgrounds = new Array("http://www.kmbv.nl/_globScripts/tabs/contact.png", "http://www.kmbv.nl/_globScripts/tabs/login.png", "http://www.kmbv.nl/_globScripts/tabs/zoeken.png");
var titles_hover_backgrounds = new Array("http://www.kmbv.nl/_globScripts/tabs/contact_hover.png", "http://www.kmbv.nl/_globScripts/tabs/login_hover.png", "http://www.kmbv.nl/_globScripts/tabs/zoeken_hover.png");
var titles_up_backgrounds = new Array("http://www.kmbv.nl/_globScripts/tabs/contact_up.png", "http://www.kmbv.nl/_globScripts/tabs/login_up.png", "http://www.kmbv.nl/_globScripts/tabs/zoeken_up.png");
var titles_up_hover_backgrounds = new Array("http://www.kmbv.nl/_globScripts/tabs/contact_up_hover.png", "http://www.kmbv.nl/_globScripts/tabs/login_up_hover.png", "http://www.kmbv.nl/_globScripts/tabs/zoeken_up_hover.png");

//====================================================================DEZE VARIABELEN NIET VERANDEREN!!!====================================================================

var clicked_tab;													//Om te registreren welke tab geklikt is. Deze zal als enige kunnen bewegen
var clicked_hitarea;												//Om te registreren welke tab geklikt is. Deze zal als enige kunnen bewegen
var interval_is_running = false;									//Gebruikt om te voorkomen dat meerdere intervals tegelijk gaan lopen
var move_interval;													//Dit is de recourse voor de lopende interval
var move_counter;													//De teller die de verplaatsing bepaalt
var at_bottoms = new Array();										//Deze array registreert welke index (uit de array all_tabs) op beginpositie staat. Hiermee kun je kijken of de geklikte tab onderaan staat of niet
var at_tops = new Array();											//Deze array registreert welke index (uit de array all_tabs) op eindpositie staat. Hiermee kun je kijken of de geklikte tab bovenaan staat of niet
var array_index;													//Registreert de array index van de geklikte tab.

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
var is_ie = (((version >= 5.5) && (version < 7)) && (document.body.filters)) ? true : false;

function initTabs()
{
	for(var i = 0; i < all_tabs.length; i++)
	{
		$(all_tabs[i]).style.position = "absolute";
		$(all_tabs[i]).style.width = tab_width + "px";
		$(all_tabs[i]).style.height = tab_height + "px";
		$(all_tabs[i]).style.top = tab_top + "px";
		$(all_tabs[i]).style.left = (((tab_width * i) + (tab_overlapping * i)) + tab_start_left) + "px";		
		if(is_ie)
		{
			$(all_tabs[i]).style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image, src='" + tabs_background + "');";
		}
		else
		{
			$(all_tabs[i]).style.backgroundImage = "url(" + tabs_background + ")";
		}

		var sp1 = document.createElement("a");
		sp1.setAttribute("id", "hitarea" + i);
		sp1.setAttribute("href", "javascript:void(0)");
		sp1.setAttribute("class", "hitereas");
		var sp2 = $(all_tabs[i]);
		var parentDiv = sp2.parentNode;
		parentDiv.insertBefore(sp1, sp2.nextSibling);

		$(all_tabs[i]).innerHTML += '<div id="title_tab' + i + '"></div>';
	}
	
	for(var i = 0; i < all_tabs.length; i++)
	{
		$("hitarea" + i).style.position = "absolute";
		$("hitarea" + i).style.width = hitearea_width + "px";
		$("hitarea" + i).style.height = hitearea_height + "px";
		$("hitarea" + i).style.top = (tab_top + hitearea_top) + "px";
		$("hitarea" + i).style.left = ((((tab_width * i) + (tab_overlapping * i)) + tab_start_left) + hitarea_left) + "px";		
		$("hitarea" + i).style.display = "block";
		$("hitarea" + i).style.outline = 0;

		$("title_tab" + i).style.position = "absolute";
		$("title_tab" + i).style.width = hitearea_width + "px";
		$("title_tab" + i).style.height = hitearea_height + "px";
		$("title_tab" + i).style.top = hitearea_top + "px";
		$("title_tab" + i).style.left = hitarea_left + "px";
		if(is_ie)
		{
			$("title_tab" + i).style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image, src='" + titles_backgrounds[i] + "');";
		}
		else
		{
			$("title_tab" + i).style.backgroundImage = "url(" + titles_backgrounds[i] + ")";
		}
	}

	for(var i = 0; i < all_tabs.length; i++)
	{
		at_bottoms[i] = true;
		at_tops[i] = false;
	}

	for(var i = 0; i < all_tabs.length; i++)
	{
		$("hitarea" + i).onclick = function()
		{
			tabClickHandler(this.previousSibling.id, this.id);
		}
		$("hitarea" + i).onmouseover = function()
		{
			changeBackground(this.id, "over");
		}
		$("hitarea" + i).onmouseout = function()
		{
			changeBackground(this.id, "out");
		}
	}
}

function tabClickHandler(tab_clicked, hitarea_clicked)
{
	if(interval_is_running == false)
	{
		clicked_tab = tab_clicked;
		clicked_hitarea = hitarea_clicked;
		array_index = all_tabs.indexOf(clicked_tab);
		move_counter = max_move;
		if(at_bottoms[array_index])
		{
			move_interval = setInterval('moveUp()', interval_speed);
			at_bottoms[array_index] = false;
			interval_is_running = true;
		}
		else if(at_tops[array_index])
		{
			move_interval = setInterval('moveDown()', interval_speed);
			at_tops[array_index] = false;
			interval_is_running = true;
		}
	}
}

function moveUp()
{
	move_counter = parseInt(move_counter * easing_factor);
	$(clicked_tab).style.top = (move_counter + (tab_top - max_move)) + "px";
	$(clicked_hitarea).style.top = ((move_counter + (tab_top - max_move)) + hitearea_top) + "px";

	//Dit is eventjes vlug neergezet!!!
	if(array_index == 0)
	{
		$("contact_div").style.top = ((move_counter + (tab_top - max_move)) + 25) + "px";
	}
	else if(array_index == 1)
	{
		$("login_div").style.top = ((move_counter + (tab_top - max_move)) + 25) + "px";
	}
	else if(array_index == 2)
	{
		$("zoek_div").style.top = ((move_counter + (tab_top - max_move)) + 35) + "px";
	}
	//Einde 

	if(move_counter < 1)
	{
		clearInterval(move_interval);
		interval_is_running = false;
		at_tops[array_index] = true;
		changeBackground(clicked_hitarea, "out");

		//Dit is eventjes vlug neergezet!!!
		if(array_index == 1)
		{
		    if (document.login)
			document.login.username.focus();
		}
		if(array_index == 2)
		{
		    if (document.zoek)
			document.zoek.query.focus();
		}

		//Einde 		
	}
}

function moveDown()
{
	move_counter = parseInt(move_counter * easing_factor);
	$(clicked_tab).style.top = ((max_move - move_counter) + (tab_top - max_move)) + "px";
	$(clicked_hitarea).style.top = (((max_move - move_counter) + (tab_top - max_move)) + hitearea_top) + "px";

	//Dit is eventjes vlug neergezet!!!
	if(array_index == 0)
	{
		$("contact_div").style.top = (((max_move - move_counter) + (tab_top - max_move)) + 25) + "px";
	}
	else if(array_index == 1)
	{
		$("login_div").style.top = (((max_move - move_counter) + (tab_top - max_move)) + 25) + "px";
	}
	else if(array_index == 2)
	{
		$("zoek_div").style.top = (((max_move - move_counter) + (tab_top - max_move)) + 35) + "px";
	}
	//Einde 
	
	if(move_counter  < 1)
	{
		clearInterval(move_interval);
		interval_is_running = false;
		at_bottoms[array_index] = true;
		changeBackground(clicked_hitarea, "out")

		//Dit is eventjes vlug neergezet!!!

		document.zoek.query.blur();
		//Einde 		
	}
}

function changeBackground(div_id, way)
{
	var arr_index = parseInt(div_id.substring((div_id.length - 1), div_id.length));
	switch(way)
	{
		case "over":
			if(is_ie)
			{
				if(at_bottoms[arr_index])
				{
					$("title_tab" + arr_index).style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image, src='" + titles_hover_backgrounds[arr_index] + "');";
				}
				else
				{
					$("title_tab" + arr_index).style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image, src='" + titles_up_hover_backgrounds[arr_index] + "');";
				}
			}
			else
			{
				if(at_bottoms[arr_index])
				{
					$("title_tab" + arr_index).style.backgroundImage = "url(" + titles_hover_backgrounds[arr_index] + ")";
				}
				else
				{
					$("title_tab" + arr_index).style.backgroundImage = "url(" + titles_up_hover_backgrounds[arr_index] + ")";
				}
			}
		break;
		case "out":
			if(is_ie)
			{
				if(at_bottoms[arr_index])
				{
					$("title_tab" + arr_index).style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image, src='" + titles_backgrounds[arr_index] + "');";
				}
				else
				{
					$("title_tab" + arr_index).style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image, src='" + titles_up_backgrounds[arr_index] + "');";
				}
			}
			else
			{
				if(at_bottoms[arr_index])
				{
					$("title_tab" + arr_index).style.backgroundImage = "url(" + titles_backgrounds[arr_index] + ")";
				}
				else
				{
					$("title_tab" + arr_index).style.backgroundImage = "url(" + titles_up_backgrounds[arr_index] + ")";
				}
			}
		break;
	}
}

initTabs();


//Png fix voor de inputveldjes:

function getElementsByClassName(clsName, htmltag) 									//Deze functie zoekt alle elementen met eenzelfde clasnaam bijelkaar en retourneert deze in een array
{
	var arr = new Array();
	var elems = document.getElementsByTagName(htmltag);
	for(var cls, i = 0; ( elem = elems[i] ); i++ )
	{
		if ( elem.className == clsName )
		{
			arr[arr.length] = elem;
		}
	}
	return arr;
}

var input_divs = new Array();
//input_divs[0] = "login_password_div";
//input_divs[1] = "login_username_div";
input_divs[0] = "zoek_field_div";

var input_png_image = "http://www.kmbv.nl/_globScripts/tabs/input_back.png";

for(var i=0; i < input_divs.length; i++)
{
	if(is_ie)
	{
		$(input_divs[i]).style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image, src='" + input_png_image + "');";
	}
	else
	{
		$(input_divs[i]).style.backgroundImage = "url(" + input_png_image + ")";
	}
	
}