// JavaScript Document
window.onload = init;

function init() {
	//alert("OK");
	setTabs();
	changeTab(document.getElementById("project_tab_process_image"), false);
	thumbnailClickInit();
}

function setTabs()
{
	setTabImages("project_tab_process_image", "images/projectpage/toptab_process.png", "images/projectpage/toptab_process_selected.png");
	setTabImages("project_tab_design_image", "images/projectpage/toptab_design.png", "images/projectpage/toptab_design_selected.png");
}

function setTabImages(elementId, notSelectedImage, selectedImage)
{
	var object = document.getElementById(elementId);
	
	object.notSelectedImage = new Image();
	object.notSelectedImage.src = notSelectedImage;
	
	object.selectedImage = new Image();
	object.selectedImage.src = selectedImage;
	
	object.src = object.notSelectedImage.src;
	object.onclick = tabClicked;
}

function tabClicked() 
{
	changeTab(this, true);
}

function changeTab(tabObject, doFadeAnimation)
{
	var processTab = document.getElementById("project_tab_process_image");
	var designTab = document.getElementById("project_tab_design_image");
	var processContent = document.getElementById("project_content_process");
	var designContent = document.getElementById("project_content_design");
	if(tabObject == processTab)
	{
		processTab.src = processTab.selectedImage.src;
		designTab.src = designTab.notSelectedImage.src;
		if(doFadeAnimation)
			animateContentFade(designContent, processContent);
	}
	else if(tabObject == designTab)
	{
		processTab.src = processTab.notSelectedImage.src;
		designTab.src = designTab.selectedImage.src;
		if(doFadeAnimation)
			animateContentFade(processContent, designContent);
	}	
}

var currentProcessMainImageIndex = 0;
var currentDesignMainImageIndex = 0;

function thumbnailClickInit() {
	var processMainImage = null;
	var designMainImage = null;
	var processThumbnailIndex = 0;
	var designThumbnailIndex = 0;
	
	var imageList = document.getElementsByTagName("img");
	for (var i=0; i<imageList.length; i++)
	{
		if(imageList[i].className == "project_thumbnail_image_process")
		{
			if(processMainImage == null)
			{
				processMainImage = imageList[i];
			}
			imageList[i].onmouseover = processThumbnailClick;
			imageList[i].index = processThumbnailIndex;
			processThumbnailIndex++;
		}
		else if(imageList[i].className == "project_thumbnail_image_design")
		{
			if(designMainImage == null)
			{
				designMainImage = imageList[i];
			}
			imageList[i].onmouseover = designThumbnailClick;
			imageList[i].index = designThumbnailIndex;
			designThumbnailIndex++;
		}
	}

	// show first thumbnail's content as default main image
	var contentArray = getChildArrayWithClassName("project_main_img_list_process", "project_main_img_process");
	var item = getContentItemFromArrayWithIndex(contentArray, "0");
	item.style.display = "block";
	
	contentArray = getChildArrayWithClassName("project_main_img_list_design", "project_main_img_design");
	item = getContentItemFromArrayWithIndex(contentArray, "0");
	item.style.display = "block";
}

var oldContent, newContent, isFadingOut2, opacityValue2;
var opacityDelta2 = 0.2;
var opacityChangeInterval2 = 20;
function animateContentFade(old_content, new_content)
{
	oldContent = old_content;
	newContent = new_content;
	isFadingOut2 = 1;
	opacityValue2 = 1;
	
	doContentFade();
}

function doContentFade() {	
	if(isFadingOut2 == 1 && opacityValue2 > 0)
	{
		opacityValue2 = opacityValue2 - opacityDelta2;
		setOpacity(oldContent, opacityValue2);
		setTimeout(doContentFade, opacityChangeInterval2);
	}
	else if(isFadingOut2 == 1 && opacityValue2 <= 0)
	{
		isFadingOut2 = 0;
		opacityValue2 = 0;
		oldContent.style.display = "none";
		newContent.style.display = "block";
		setOpacity(newContent, 0);
		setTimeout(doContentFade, opacityChangeInterval2);
	}
	else if(isFadingOut2 == 0 && opacityValue2 < 1)
	{
		opacityValue2 = opacityValue2 + opacityDelta2;
		setOpacity(newContent, opacityValue2);		
		setTimeout(doContentFade, opacityChangeInterval2);
	}
	else if(isFadingOut2 == 0 && opacityValue2 >= 1)
	{
		opacityValue2 = 1;
	}
	else
	{
		alert("DEBUG: entered invalid code area");
	}
}

var imageObject;
var newImageSrc;
var isFadingOut;
var opacityValue;
var opacityDelta = 0.2;
var opacityChangeInterval = 20;

function processThumbnailClick() {
	var contentArray = getChildArrayWithClassName("project_main_img_list_process", "project_main_img_process");
	getContentItemFromArrayWithIndex(contentArray, currentProcessMainImageIndex).style.display = "none";
	getContentItemFromArrayWithIndex(contentArray, this.index).style.display = "block";
	currentProcessMainImageIndex = this.index;	
}

function designThumbnailClick() {
	var contentArray = getChildArrayWithClassName("project_main_img_list_design", "project_main_img_design");
	getContentItemFromArrayWithIndex(contentArray, currentDesignMainImageIndex).style.display = "none";
	getContentItemFromArrayWithIndex(contentArray, this.index).style.display = "block";	
	currentDesignMainImageIndex = this.index;
}

function animateMainImageFade(mainImageObject, newImage) {
	if(mainImageObject.src == newImage.src)
		return;
	
	imageObject = mainImageObject;
	newImageSrc = newImage.src;
	isFadingOut = 1;
	opacityValue = 1;
	
	doMainImageFade();
}

function doMainImageFade()
{	
	if(isFadingOut == 1 && opacityValue > 0)
	{
		opacityValue = opacityValue - opacityDelta;
		setOpacity(imageObject, opacityValue);
		setTimeout(doMainImageFade, opacityChangeInterval);
	}
	else if(isFadingOut == 1 && opacityValue <= 0)
	{
		isFadingOut = 0;
		opacityValue = 0;
		imageObject.src = newImageSrc;
		setOpacity(imageObject, 0);
		setTimeout(doMainImageFade, opacityChangeInterval);
	}
	else if(isFadingOut == 0 && opacityValue < 1)
	{
		opacityValue = opacityValue + opacityDelta;
		setOpacity(imageObject, opacityValue);		
		setTimeout(doMainImageFade, opacityChangeInterval);
	}
	else if(isFadingOut == 0 && opacityValue >= 1)
	{
		opacityValue = 1;
	}
	else
	{
		alert("DEBUG: entered invalid code area");
	}
}

function setOpacity(imageObject, opacityValue)
{
	imageObject.style.opacity = opacityValue;
	imageObject.style.filter = 'alpha(opacity = ' + (opacityValue*100) + ')';
}


function getChildArrayWithClassName(parentId, childClassName)
{
	var fullArray = document.getElementById(parentId).childNodes;
	var finalArray = new Array();
	var finalArrayIndex = 0;
	for(var i=0; i<fullArray.length; i++)
	{
		if(fullArray[i].className == childClassName)
		{
			finalArray[finalArrayIndex] = fullArray[i];
			finalArrayIndex++;
		}
	}
	
	return finalArray;
}
	
function getContentItemFromArrayWithIndex(array, index)
{
	for(var i=0; i<array.length; i++)
	{
		if(array[i].getAttribute("index") == index)
		{
			return array[i];
		}
	}
	
	alert("DEBUG: index not found in array");
	return null;
}

function addToLog(logText)
{
	var logObject = document.getElementById("log");
	logObject.innerHTML = logObject.innerHTML + " " + logText;
}