var FPS = 40;
var mw, mh;

function selectCategory(category) {
	if ((document.selectedCategory != null) && (document.selectedCategory == category || CATEGS[document.selectedCategory]["parent"] == category)) {
		return;	
	}
	if (document.selectedCategory == null) {
		document.selectedCategory = "house";
	}
	
	if (document.getElementById(category) != null)
		document.getElementById("categories").setCurrentSlide("categories#" + category);

    if (category != "house" && CATEGS[category]["parent"] != "house") {
		//hideMenu("leftNavBottom");
		document.getElementById("leftNavBottom").style.display = "none";
		document.getElementById("houseLink").parentNode.className = "menuItem";
	} 
	if (category == "house") {
		//getMenuEffect("leftNavBottom").start();
		document.getElementById("leftNavBottom").style.display = "block";
		document.getElementById("houseLink").parentNode.className = "menuItem selected";
		selectCategory("living");
		return;
	}
	
	if (document.selectedCategory != CATEGS[category]["parent"])
		document.getElementById(document.selectedCategory + "Link").parentNode.className = "menuItem";
	document.selectedCategory = category;
	document.getElementById(document.selectedCategory + "Link").parentNode.className = "menuItem selected";
}

function generateCategories(language) {
	for (c in CATEGS) {
		if (CATEGS[c]["imageCount"] > 0)
	    	generateCategory(c, language);
	}
}

function generateCategory(category, language) {
	document.write("<div id='" + category + "'>");
	
	document.write("<div id='" + category + "PContainer' class='pContainer'>");
    document.write("<div id='" + category + "Portofolio' class='slideshow portofolio' transition='fade' transitionTime='500' updateAddress='false' transitionSpeed='" + FPS + "'"
        //+ " transitionAcceleration='[{acceleration: 2.1, time:\"50%\"}, {acceleration: 0, time:0.2}, {acceleration: -0.5, time:0.3}]'"
		+ ">");
    generateSlides(category);
    document.write("</div>");
    document.write("<a href='javascript:goToImage(\"" + category + "\", \"previous\");' class='previousSlide'></a>");
    document.write("<a href='javascript:goToImage(\"" + category + "\", \"next\");' class='nextSlide'></a>");
    document.write("</div>");
    document.write("<div id='" + category + "ThumbPageLinks' class='thumbPageLinks'>");
	generateThumbPageLinks(category);
    document.write("</div>");
    document.write("<div id='" + category + "CatDesc' class='catDesc'>");
    document.write(CATEGS[category]["description." + language]);
    document.write("</div>");
    document.write("<div id='" + category + "ThumbPages' class='slideshow thumbPages' transition='slide' transitionTime='400' updateAddress='false' transitionSpeed='" + FPS + "' transitionAcceleration='[{acceleration: 0, time:0.1}, {acceleration: 0.3, time:0.6}, {acceleration: -0.5, time:0.3}]'>");
	generateThumbPages(category);                    
    document.write("</div>");
	
	document.write("</div>");
}

function goToImage(category, direction) {
	var imageSlideshow = document.getElementById(category + "Portofolio");
	if (direction == "previous")
		imageSlideshow.previous();
	else
		imageSlideshow.next();
	var onpage = Math.floor(imageSlideshow.getCurrent() / 8);
	var pageSlider = document.getElementById(category + "ThumbPages");
	if (pageSlider.selectedPage != onpage) {
	    selectPage(category, onpage);
	}
}

function generateSlides(category) {
    var imageCount = CATEGS[category]["imageCount"];
	for (var i = 1; i <= imageCount; i++) {
		document.write("<div class='slide'><img src='../img/p/" + category + "/" + category + "_"
				+ (i < 10 ? "0" + i : i) + ".jpg' /></div>");
	}
}

function generateThumbPageLinks(category) {
    var imageCount = CATEGS[category]["imageCount"];
	var pageCount = Math.floor(imageCount / 8) + (imageCount % 8 == 0 ? 0 : 1); 
	for (var i = 1; i <= pageCount; i++) {
		document.write("<a id='" + category + "Page" + (i - 1) + "' href='javascript:selectPage(\"" + category + "\", " + (i - 1) + ");' "
			+ (i == 1 ? "class='selected'" : "") + ">" + i + "</a>");
	}
}

function selectPage(category, index) {
	var linkElem = document.getElementById(category + "Page" + index);
	var pageSlider = document.getElementById(category + "ThumbPages");
	if (pageSlider.selectedPageLinkElem == null) {
		pageSlider.selectedPage = 0;
		pageSlider.selectedPageLinkElem = document.getElementById(category + "Page0");
	}
	pageSlider.selectedPageLinkElem.className = "";
	pageSlider.setCurrent(index);
	linkElem.className = "selected";
	pageSlider.selectedPage = index;
	pageSlider.selectedPageLinkElem = linkElem;
}

function generateThumbPages(category) {
    var imageCount = CATEGS[category]["imageCount"];
	var pageCount = Math.floor(imageCount / 8) + (imageCount % 8 == 0 ? 0 : 1); 
	for (var i = 1; i <= pageCount; i++) {
		document.write("<div class='thumbPage'>");
		for (var j = 1; j <= 8; j++) {
			var index = (i - 1) * 8 + j;
			if (index <= imageCount)
				document.write("<a href='javascript:document.getElementById(\"" + category + "Portofolio\").setCurrent(" + (index - 1) + ");'>"
					+ "<img class='thumb' src='../img/p/" 
					+ category + "/" + category + "_"
					+ (index < 10 ? "0" + index : index) + ".jpg' ></a>");
		}
		document.write("</div>");
	}
}

function init() {
	document.getElementById("loading").style.display = "none";
	document.getElementById("page").style.display = "block";
    centerPage();
    if (document.getElementById("middle0") != null) {
		hideMenu("leftNavTop");

        mw = document.getElementById("middle").offsetWidth;
        mh = document.getElementById("middle").offsetHeight;
		//mw = 800;
		//mh = 400;
        document.getElementById("middle").style.display = "none";
        document.getElementById("middle").style.opacity = "0";
        document.getElementById("middle0").style.display = "block";
        document.getElementById("header").style.marginTop = (mh / 2) + "px";
        document.getElementById("header").style.marginBottom = "65px";
        document.getElementById("footerNav").style.display = "none";
        document.getElementById("footerNav").style.opacity = "0";
        document.getElementById("topLogo").href = "javascript:";
        document.getElementById("topLogo").style.marginRight 
                = ((document.getElementById("header").getWidth() - document.getElementById("topLogo").getWidth()) / 2) + "px";
        document.getElementById("footerCopy").style.marginLeft 
                = ((document.getElementById("footer").getWidth() - document.getElementById("footerCopy").getWidth()) / 2) + "px";				
    } else {
	    sshow = document.getElementById("slideshow");
		if (sshow != null)
		    sshow.start();
	}
    
	var leftNavIds = ["leftNav2", "leftNav2-7", "leftNavMiddle", "leftNavBottom"];
	for (var i = 0; i < leftNavIds.length; i++) {
		if (document.getElementById(leftNavIds[i]) != null && document.getElementById(leftNavIds[i]).className.split(" ").contains("appear")) {
			hideMenu(leftNavIds[i]);
			//if (leftNavIds[i] != "leftNavBottom")
			    getMenuEffect(leftNavIds[i]).start();
		}
	}
	
	if (document.getElementById("categories") != null) {
		selectCategory("house");
	}
	
    window.addEventListener("resize", function() {
	    centerPage();
   }, false);
}

function centerPage() {
    //    document.getElementById("middle").style.height = (window.getHeight() 
    //            - document.getElementById("header").getHeight() 
    //            - document.getElementById("footer").getHeight() - 60) + "px";
	 var x = (window.getHeight() - document.getElementById("page").getHeight() - 30) / 2;
	 if (x < 0) x = 0;
	 document.getElementById("page").style.marginTop = x + "px";
}

function hideMenu(menuId) {
    var isLeftNav = document.getElementById(menuId).className.split(" ").contains("leftNav");
    var w = document.getElementById(menuId).offsetWidth;

    var divs = document.getElementById(menuId).getElementsByTagName("DIV");
    for (var i = 0, n = divs.length; i < n;  i++) {
    	divs[i].initialWidth = divs[i].getWidth();
		divs[i].initialHeight = divs[i].getHeight();
        if (divs[i].className == "separator") {
			divs[i].setWidth(0);
        } else if (divs[i].className == "vseparator") {
            divs[i].setHeight(0);
        } else if (divs[i].className.split(" ").contains("menuItem")) {
			/*var a = divs[i].getElementsByTagName("A")[0];
			if (a != null) {
				divs[i].initialWidth = a.getWidth();
				divs[i].initialHeight = a.getHeight();
			}*/
			if (!isLeftNav)
			    divs[i].style.opacity = 0;
		    else
			    divs[i].setWidth(0);
		}
    }
}

function getMenuEffect(menuId) {
    var isLeftNav = document.getElementById(menuId).className.split(" ").contains("leftNav");
    var divs = document.getElementById(menuId).getElementsByTagName("DIV");
    var separatorsEffects = new Array();
	var menuItemsEffects = new Array();
    var vSeparatorEffect;
    for (var i = 0, n = divs.length; i < n;  i++) {
        if (divs[i].className == "separator") {
            separatorsEffects.push(new PropertyEffect(divs[i], {width: divs[i].initialWidth}, 500, FPS));
        } else if (divs[i].className == "vseparator") {
            vSeparatorEffect = new PropertyEffect(divs[i], {height: divs[i].initialHeight}, 500, FPS); 
        } else if (divs[i].className.split(" ").contains("menuItem")) {
			if (!isLeftNav)
                menuItemsEffects.push(new PropertyEffect(divs[i], {opacity: 1}, 500, FPS));
 			else {
				divs[i].style.marginLeft = (divs[i].initialWidth - 10) + "px";
				divs[i].style.paddingRight = 0;
			    menuItemsEffects.push(new PropertyEffect(divs[i], {width: divs[i].initialWidth, marginLeft: -10}, 500, FPS, [{acceleration: 0.7, time: 0.3}, {acceleration: 2.1, time: 0.2}, {acceleration: -0.7, time: 0.5}]));
			}
		}
    }
    
	if (vSeparatorEffect != null) {
		if (isLeftNav)
            return new SerialEffect(vSeparatorEffect, new ParallelEffect(separatorsEffects, menuItemsEffects));
		else
            return new SerialEffect(vSeparatorEffect, new ParallelEffect(separatorsEffects), new ParallelEffect(menuItemsEffects));
	} else { 
	    return new SerialEffect(new ParallelEffect(separatorsEffects), new ParallelEffect(menuItemsEffects));
	}
}

function enter() {
    var enterFadeOut = new PropertyEffect(document.getElementById("enter"), {opacity: 0}, 500, FPS);
    var motoFadeOut = new PropertyEffect(document.getElementById("moto"), {opacity: 0}, 500, FPS);
    enterFadeOut.addEventListener("effectstop", function() {
            motoFadeOut.start();
        }, false);
    motoFadeOut.addEventListener("effectstop", function() {
            document.getElementById("enter").style.display = "none";
            document.getElementById("moto").style.display = "none";
			document.getElementById("line").style.marginBottom = "65px";
        }, false);
    enterFadeOut.start();

    var lineStretchH = new PropertyEffect(document.getElementById("line"), {width: 1}, 1000, FPS);
    lineStretchH.addEventListener("effectstop", function() {
        document.getElementById("line").style.background = "#534947 url(linev.jpg) no-repeat center center";
        var lineExpandV = new PropertyEffect(document.getElementById("line"), {height: mh, marginBottom: 1}, 1000, FPS);
        var lineExpandH = new PropertyEffect(document.getElementById("line"), {width: mw}, 1000, FPS);
        var headerGoingUp = new PropertyEffect(document.getElementById("header"), {marginTop: 0, marginBottom: 1}, 1000, FPS);
		
        /*
        headerGoingUp.addEventListener("effectstop", function() {
            var headerGoingRight = new PropertyEffect(document.getElementById("topLogo"), {marginRight: 0}, 1000, FPS);
            headerGoingRight.start();
            var footerGoingLeft = new PropertyEffect(document.getElementById("footerCopy"), {marginLeft: 0}, 1000, FPS);
            footerGoingLeft.start();
        }, false);
        */
        lineExpandV.addEventListener("effectstop", function() {
				document.getElementById("line").style.backgroundColor = "#534947";
				lineExpandH.start();
			}, false);
		var x6 = new PropertyEffect(document.getElementById("middle0"), {opacity: 0}, 2000, FPS);
        x6.addEventListener("effectstop", function() {
				document.getElementById("middle0").style.display = "none";
				
				document.getElementById("topLogo").href = "home.html";
				sshow = document.getElementById("slideshow");
				if (sshow != null)
						sshow.start();
			}, false);
        var x7 = new ParallelEffect (
			x6,
            new SerialEffect(
				new PropertyEffect(document.getElementById("middle"), {opacity: 1}, 2000, FPS),
				getMenuEffect("leftNavTop")
				)
			);
		
        lineExpandH.addEventListener("effectstop", function() {
				document.getElementById("middle").style.display = "block";
				document.getElementById("middle0").style.marginTop = (-document.getElementById("middle").offsetHeight) + "px";
				document.getElementById("footerNav").style.display = "block";
				x7.start();
	
				var headerGoingRight = new PropertyEffect(document.getElementById("topLogo"), {marginRight: 0}, 1000, FPS);
				headerGoingRight.start();
				var footerGoingLeft = new PropertyEffect(document.getElementById("footerCopy"), {marginLeft: 1}, 1000, FPS);
				footerGoingLeft.start();
				footerGoingLeft.addEventListener("effectstop", function() {
					var footerNavFadeIn = new PropertyEffect(document.getElementById("footerNav"), {opacity: 1}, 2000, FPS);
					footerNavFadeIn.start();
				}, false);																
				
			}, false);
        
        lineExpandV.start();
        headerGoingUp.start();

    }, false);
    lineStretchH.start();
   
}

/*
window.document.addEventListener("DOMContentLoaded", function(event) {
    init();
}, false);
*/