/*
var gPictures = ["1_1002_06C", "1_1005_40C"];

var gDB = {
	"1_1002_06C": [["08", "06"], ["42", "48"]],
	"1_1005_40C": [["04", "05"], ["50"]]
};

var gColors = {"04": "Blue", "05": "Orange", "06": "Yellow", "08": "Red"};

var gSeriesName = {"1": "Opban", "2": "Pino", "3": "Faset", "4": "Focus"};
*/

gLanguage = "Turkish";

function test() {
	//console.log(makeArrayString(["42", "48"]));
	//console.log(makeInfoText("1_1002_06C"));
	//console.log("Tests Completed");
}

function index(obj, arr) {
  for(var i=0; i < arr.length; i++) {
    if (arr[i] == obj) return i;
  }
	return false;
}

function capitalizeFirstLetter(string)
{
    return string.charAt(0).toUpperCase() + string.slice(1);
}

function whereAmI(who,wch) {
	var L=0, R=0;
	var pa=who;
	while(pa.parentNode){
		L+= ( pa.offsetLeft)? pa.offsetLeft - pa.scrollLeft: 0;
		R+= (pa.offsetTop)? pa.offsetTop - pa.scrollTop: 0;	

		if(pa==document.body || wch===false)break;
		pa= pa.parentNode;
	}
	var A=[L,R];
	return(wch===1 || wch=== 2)? A[wch]: A;
}

function initialize() {
	test();
	selectSeries("11L");
	initMenus();
	return null;
}

function initMenus() {
	if (gLanguage === "Turkish")
		$("#Language").mousedown(function() { location.href = "index_en.html"; });
	else
		$("#Language").mousedown(function() { location.href = "index.html"; });
	$("#AboutUs").mousedown(function() { changeViewer("AboutUsViewer") });
	$("#Products").mousedown(function() { changeViewer("ProductsViewer") });
	$("#ContactUs").mousedown(function() { changeViewer("ContactUsViewer") });

	$(".MenuItem").mousedown(function() { expandMenu(this.id) });
	$(".SubMenuItem").mousedown(function() { selectSeries(this.id) });
	$(document.body).keydown(function(Event) { handleKeyDown(Event); });
	
	//$("#PrevButton").mousedown(function() { stopAnimation(); doPreviousPicture(); });
	//$("#AutoButton").mousedown(function() { startAnimation(); doNextPicture(); });
	//$("#NextButton").mousedown(function() { stopAnimation(); doNextPicture(); });
	
	$("#PlayButton").mousedown(playButtonHandler);
	
	return null;
}

function playButtonHandler(Event) {
	//Hard Coded!  Window PosLeft = 166, PosRight = 233, Width = 57
	if (Event.clientX < 180) {
		stopAnimation(); 
		doPreviousPicture();
	}
	else if (Event.clientX < 219) {
		startAnimation(); 
		doNextPicture();
	}
	else {
		stopAnimation(); 
		doNextPicture();
	}
}

function selectSeries(SeriesCode) {
	if (!$("#" + SeriesCode).hasClass("ItemSelected"))
	{
		$(".ItemSelected").removeClass("ItemSelected");
		$("#" + SeriesCode).addClass("ItemSelected");
		//console.log("Series " + SeriesCode + " selected.");
		setCurrentPictures(gSeries[SeriesCode]);
		initPictures(gSeries[SeriesCode]);
		viewPicture(gSeries[SeriesCode][0]);
	}
}

function expandMenu(Item) {
	if ($("#" + Item + ">.SubMenu:hidden").length)
 		$(".SubMenu:visible").hide(250, 
			function() { $("#" + Item + ">.SubMenu").show(250); });
}

function changeViewer(Item) {
	switch (Item) {
		case "ProductsViewer":
			$(".Page:visible").hide(500);
			startAnimation();
			break;
		case "AboutUsViewer":
			stopAnimation();
			$("#ContactUsViewer").hide(); 
			$("#AboutUsViewer").show();
			break;
		case "ContactUsViewer":
			stopAnimation();
			$("#AboutUsViewer").hide(); 
			$("#ContactUsViewer").show();
			break;
	};
	//if ($("#" + Item + ":hidden").length)
	//	$(".Page:visible").hide(500, 
	//		function() { $("#" + Item).show(500); });
}

function initPictures(Pics) {
	stopAnimation();
	$("#PictureListH").empty();
	var Tokens = Pics[0].split("_");
	var Dir = gSeriesDictionary[Tokens[0]];
	for (I in Pics)
	{
		var PicName = Pics[I];
		Div = document.createElement("div");
		$(Div).css("display", "inline");
		$(Div).append("<img id=" + Pics[I] + " SRC=images/" + Dir + "/"+ Pics[I] 
			+ "_SM.jpg BORDER=2 HSPACE=3 VSPACE=0>");
		$(Div).mousedown(function(PicName) { 
			return function() {stopAnimation(); viewPicture(PicName);} }(Pics[I]));
		$(Div).mouseenter(function(PicName, ThisDiv) { 
			return function() {showGlobalInfoBox([PicName, whereAmI(ThisDiv)])} }(Pics[I], Div));
			//return function() {showInfoBox(PicName, ThisDiv)} }(Pics[I], Div));
		$(Div).mouseleave(function() { hideGlobalInfoBox() });
		//$(Div).append(makeLabel(Name));
		$("#PictureListH").append(Div);
	}
	startAnimation();
	return null;
}

function viewPicture(Pic, OptPreload) {
	//changeViewer("ProductsViewer");
	var Tokens = Pic.split("_");
	var Dir = gSeriesDictionary[Tokens[0]];
	$("#PicturePane").fadeOut(250, 
		function() { 
			$("#ViewerInfoBox").html(makeInfoText(Pic, "&nbsp;&nbsp;&nbsp;"));
			showColors(Pic);
			$("#PicturePane").html("<img src=images/" + Dir + "/" + Pic + ".jpg>");
			if (OptPreload)
				$("#PicturePane").fadeIn(250, function() { preload(OptPreload); }); 
			else
				$("#PicturePane").fadeIn(250); 
			setCurrentPicture(Pic);
			//console.log("Viewing " + Pic);
		});
	return null;
}

function preload(Pic) {
	var Tokens = Pic.split("_");
	var Dir = gSeriesDictionary[Tokens[0]];
	$("#TheImageBuffer").html("<img src=images/" + Dir + "/" + Pic + ".jpg>");
}

function makeArrayString(AnArray) {
	if (AnArray.length === 0)
		return "";
	else if (AnArray.length === 1)
		return AnArray[0];
	else
	{
		var Acc = AnArray[0];
		for (var I = 1; I < AnArray.length; I++)
			Acc = Acc + ", " + AnArray[I];
		return Acc;
	}
}

function makeInfoText(PicName, Comma) {
	var EOL = "<br />";
	if (Comma)
		EOL = Comma;
	var Tokens = PicName.split("_");
	var SeriesName = capitalizeFirstLetter(gSeriesDictionary[Tokens[0]]);
	var ModelName = Tokens[1];
	var Data = gInanDB[ModelName];
	var ColorName = Tokens[2];
	var ColorList = Data[2];
	var SizesList = Data[1];
	var SizeName = "";
	if (Tokens[3])
		SizeName = Tokens[3];
	else
		SizeName = SizesList[0];
	if (gLanguage === "Turkish")
	{
		if (SizesList.length > 1)
			Sizes = "Mevcut Boyutler: " + makeArrayString(SizesList);
		else
			Sizes = "";
		var OutString = 
			"Seri: " + SeriesName + EOL +
			"Model: " + ModelName + EOL + 
			"Renk: " + ColorName + EOL + 
			"Boyut: " + SizeName + EOL +
			//"Colors: " + makeArrayString(ColorList) + EOL +
			Sizes;
	}
	else
	{
		if (SizesList.length > 1)
			Sizes = "Available Sizes: " + makeArrayString(SizesList);
		else
			Sizes = "";
		var OutString = 
			"Series: " + SeriesName + EOL +
			"Model: " + ModelName + EOL + 
			"Color: " + ColorName + EOL + 
			"Size: " + SizeName + EOL +
			//"Colors: " + makeArrayString(ColorList) + EOL +
			Sizes;
	}
	return OutString;
}

function showGlobalInfoBox(Contents) { //Contents = [PicName, [DivLeft, DivTop]]	
	$("#TheGlobalInfoBox").css("left", Contents[1][0] + 10).html(makeInfoText(Contents[0])).show();
	return null;
}

function showInfoBox(PicName, This) { 
	$("<div id=TheInfoBox class=InfoBox>" + makeInfoText(PicName) + "</div>")
		.appendTo(This).show();
	return null;
}

function hideGlobalInfoBox() {
	$("#TheGlobalInfoBox").hide();
	return null;
}

function hideInfoBox() {
	$(".InfoBox").remove();
	return null;
}

var gCurrentPictures = [];
var gCurrentPictureIndex = 0;
var gTheTimer = null;
var gTimerOn = false;

function setCurrentPictures(Pictures) {
	gCurrentPictures = Pictures;
	gCurrentPictureIndex = 0;
}

function setCurrentPicture(Picture) {
	var Idx = index(Picture, gCurrentPictures);
	if (Idx >= 0)
	{
		gCurrentPictureIndex = Idx;
		$(".SmallPictureSelected").removeClass("SmallPictureSelected");
		$("#" + gCurrentPictures[gCurrentPictureIndex]).addClass("SmallPictureSelected");
	}
}

function doNextPicture() {
	gCurrentPictureIndex = gCurrentPictureIndex + 1;
	if (gCurrentPictureIndex >= gCurrentPictures.length)
		gCurrentPictureIndex = 0;
	var PreloadFrame = gCurrentPictureIndex + 1;
	if (PreloadFrame >= gCurrentPictures.length)
		PreloadFrame = 0;
	viewPicture(gCurrentPictures[gCurrentPictureIndex], gCurrentPictures[PreloadFrame]);
}

function doPreviousPicture() {
	gCurrentPictureIndex = gCurrentPictureIndex - 1;
	if (gCurrentPictureIndex < 0)
		gCurrentPictureIndex = gCurrentPictures.length - 1;
	var PreloadFrame = gCurrentPictureIndex - 1;
	if (PreloadFrame < 0)
		PreloadFrame = gCurrentPictures.length - 1;
	viewPicture(gCurrentPictures[gCurrentPictureIndex]);
}

function handleAnimate() {
	if (gTimerOn)
	{
		doNextPicture();
		gTheTimer = setTimeout(function() { handleAnimate(); }, 5000);
	}
	else
		gTheTimer = null;
}

function startAnimation() {
	gTimerOn = true;
	if (!gTheTimer)
		gTheTimer = setTimeout(function() { handleAnimate(); }, 5000);
}

function stopAnimation() {
	gTimerOn = false;
	if (gTheTimer)
	{
		clearTimeout(gTheTimer);
		gTheTimer = null;
		//console.log("Animation Stopped.");
	}
}

function handleKeyDown(Event) {
	//console.log(Event);
	if (Event.type === "keydown")
		switch (Event.keyCode) {
			case 190:
			case 39:
				stopAnimation();
				doNextPicture();
				break;
			case 188:
			case 37:
				stopAnimation();
				doPreviousPicture();
				break;
		}
}

function lookupColor(ColorNumber) {
	switch (ColorNumber) {
		case 1: return [106, 3,	3];
		case 4:	return [20, 1, 91];
		case 6:	return [146, 120, 17];
		case 10:	return [227, 217, 122];
		case 12:	return [8, 1, 1];
		case 21:	return [24, 25, 45];
		case 22:	return [58, 60, 100];
		case 24:	return [101, 77, 3];
		case 27:	return [111, 75, 28];
		case 28:	return [93, 28, 8];
		case 31:	return [132, 82, 2];
		case 40:	return [63, 61, 59];
		case 42:	return [166, 164, 137];
		case 54:	return [88, 1, 104];
		case 55:	return [156, 176, 187];
		case 56:	return [141, 11, 109];
		default: return undefined;
	}
}

function showColors(PicName) {
	var Tokens = PicName.split("_");
	var SeriesNum = parseInt(Tokens[0]);
	var ModelName = Tokens[1];
	var Data = gInanDB[ModelName];
	var ColorList = Data[2];
	if (gLanguage === "Turkish")
		AvailableColors = "Mevcut Renkler:";
	else
		AvailableColors = "Available Colors:";
	$("#ColorsBox").empty();
	if (SeriesNum < 40000) {
		$("#ColorsBox").append('<div style="padding-right:10px; display:inline;">' + AvailableColors + '</div>');
		for (I in ColorList) {
			Color = lookupColor(parseInt(ColorList[I]));
			if (Color) {
				ColorText = 'rgb(' + Color[0] + ',' + Color[1] + ',' + Color[2] +')';
				$("#ColorsBox").append(
					'<div class="ColorBlock" style="width:60px; height:20px; display:inline; '
					+ 'padding-left: 40px; padding-right: 40px; '
					+ 'border-left: 1px solid gray; border-right: 1px solid gray; background-color:' 
						+ ColorText + '">' + ColorList[I] + '</div>');
			}
		}
	}
}