var languageDB = [];
var contentDB = null; // Loaded from XML
var currentMenuCategory = -1;
var THUMB_HEIGHT = 50;
var currentCategory = -1;
var currentArticleIndex = -1;
var languageCode = "en";
if(typeof chosenLanguage != "undefined"){
	languageCode = chosenLanguage;
}

/**
 * Init Application 
 */
jQuery( function($) {
	
	// $.get("_assets/language.txt",{},initLanguageDB);
		
	$(window).bind('resize', function() {
		scaleBackground();
	});	
	
	$("#bgContainer").animate({opacity: 0}, 10);
	
	$("#bgContainer img").ready( function() {
		scaleBackground();
		$("#bgContainer").animate({opacity: 1}, 1000);
	});
	
	$("#viewerContainer").hide();
	$("#content").hide();
	// Testing:
	// $("#title").html("Test title");
	// $("#description").html("Test description<br/>Test description<br/>Test description<br/>Test description<br/>Test description<br/>Test description<br/>Test description<br/>Test description<br/>Test description<br/>");
	
	$("#introContainer").animate({opacity: 0}, 10);
	$("#introContainer").animate({opacity: 1}, 1000);

//	$(".intro", "#introContainer").click( 
//		function() {
//			$("#introContainer").animate({opacity: 0}, 1000, introComplete); 
//		}
//	);

	$('area').click(function() { 
	    var url = $(this).attr('href'); 

	    // alert("url" + url);
	    if(url == "#lang=it"){
	    	languageCode = "it";
	    	$("#introContainer").animate({opacity: 0}, 1000, introComplete);
	    }

	    if(url == "#lang=en"){
	    	languageCode = "en";
	    	$("#introContainer").animate({opacity: 0}, 1000, introComplete);
	    }

	    if(url == "#lang=de"){
	    	languageCode = "de";
	    	$("#introContainer").animate({opacity: 0}, 1000, introComplete);
	    }
 
	  return false; 
	});	
	
	$("#pageNext").click( 
			function(){
				navigate(1);
			}
		)
	$("#pagePrev").click( 
		function(){
			navigate(-1);
		}
	)
	$("#close").click( 
			function(){
				$("#viewerContainer").hide();
			}
		)
	
	
}); // JQUERY

function hideAll(){
	$("#viewerContainer").hide();
	$("#gallery").hide();
	var imageDiv = $("#image");
	imageDiv.empty();
	$("#description").css({'min-height': 0});
	
}

function replaceWithFlashFonts(){
	
	// return;
		
	// Remove the class sIFR-replaced from these.
	 $("#description").removeClass("sIFR-replaced");
	 $("#title").removeClass("sIFR-replaced");

	// Toimii vaa kerran?
	sIFR.replace(gothamBook, {
	  	selector: '#description',
		wmode: 'transparent',
	  	css: ['.sIFR-root { color: #997950; }'
	  	,'a { text-decoration: none; color: #997950;}'
        ,'a:link { color: #997950; }'
        ,'a:hover { color: #914248; }']
	  	
	});

	sIFR.replace(gothamMedium, {
	  	selector: '#title',
		wmode: 'transparent',
	  	css: '.sIFR-root { background-color: #F9F9F9; color: #997950; }'
	});


}

function scaleBackground(){

	var imgWidth = 1200;
	var imgHeight = 1150;
	var ratio = imgWidth / imgHeight;
	
	var w = $(window).width();
	var h = $(window).height();
	var windowRatio = w/h; 
	if(windowRatio > ratio){
		$("#bgContainer img").width(w);
		$("#bgContainer img").height(w*ratio);
	}else{
		$("#bgContainer img").width(h*ratio);
		$("#bgContainer img").height(h);
	}
	
}

function getLocalization( id ){
	var localization = languageDB[id];
	if(localization == null){
		localization = "localization." + id;
	}
	return localization;
}

/**
 * Called when animating the intro is complete.
 * @return
 */
function introComplete(){
	var currentTime = new Date();
	var timeStamp = currentTime.getTime();
	$.get("_assets/language_" + languageCode + ".txt?"+timeStamp,{},parseLanguage,"html");
}

function parseLanguage(inputXML, strStatus){

	// alert("Parse Language: " + inputXML);
	
	var lines = inputXML.split(/\n/g);
	// alert("Lines:" + lines.length);
	for( var line in lines){
		var valuePair = lines[line].split("=");
		var index = parseInt( valuePair.shift() );
		var value = valuePair.join("=");
		// alert(lines[line] + ": " + index + " -> " + value);
		languageDB[index] = value;
	}

	var currentTime = new Date();
	var timeStamp = currentTime.getTime();
	$.get("_assets/published_categories_oldstyle.xml?"+timeStamp,{},initDatabase,"xml");
}

/**
 * Init Language Database 
 * @param inputXLM
 * @param strStatus
 * @return
 */
function initLanguageDB(inputXML, strStatus){
	// alert("Init Language")
}

/**
 * Init Database
 * @param inputXLM
 * @param strStatus
 * @return
 */
function initDatabase( inputXML, strStatus ){

	$("#content").show();
	$("#content").animate({opacity: 1}, 1000);
	
	// convert input data to jQuery XML object model
	contentDB = $( inputXML );
	initMenu();
	// alert("Init Database: " + contentDB);
	
	// var baseCategory = contentDB.find("CATEGORIES").attr("");
	// var category = contentDB.find( "CATEGORY[ id = '" + id + "' ]");
	contentDB.find("MODE").each( 
		function(){
			var mode = $(this);
			// alert("mode");
			if(mode.text() == "1"){
				// alert("Found base: " + mode.parent().attr('id') );
				loadCategory( mode.parent().attr('id') );
			}
			
		}
	)
	
	
	
}

/**
 * Init Menu
 * @return
 */
function initMenu(  ){
	
	var items = contentDB.find("CATEGORIES");
	var targetDiv = $("#menu");
	targetDiv.empty();
	
	var menuHTML = $( "<UL class='pageList'></UL>" );
	var menuContent = "";
		
	items.children().each(
			function(inSelectionIndex){
				var item = $(this);
				var title = item.children("NAME").text().toUpperCase();
				title = getLocalization( title );
				var mode = item.children("MODE").text()
				var id = item.attr("id");
				var activeHTML = "";
				if(id == currentMenuCategory){
					// activeHTML = "<div class='active'>&nbsp;*</div>"; // or use float: left;
					activeHTML = "<div class='active'>&nbsp;<img src='images/pallo.gif' width='10' height='9' border='0' /></div>"; // or use float: left;
				}
				// menuContent += mode;
				var menuLinkMode = "";
				var hrefLink = "#";
				if(mode == "1"){
					menuLinkMode = "Normal";
					hrefLink = "javascript:loadCategory("+id+");";
				}else if(mode == "2"){
					menuLinkMode = "Normal";
					hrefLink = "javascript:loadCategory("+id+");";
				}else if(mode == "3"){
					menuLinkMode = "SubArticles";
					hrefLink = "javascript:loadCategory("+id+"); loadSubArticlesInCategory("+id+");";
				}else if(mode == "4"){
					menuLinkMode = "Gallery";
					hrefLink = "javascript:loadGallery("+id+");";
				}else{
					menuLinkMode = "Unknown";
				}
				var menuItemHTML = "<LI id='menuItem" + menuLinkMode +  "-" + id + "' class='clearElement pageItem left'><div class='clickable'><a href='" + hrefLink + "' class='menu'>"+title+"</a></div>"+activeHTML+"</LI>";
				// menuContent += menuItemHTML;
				menuContent += "<a href='" + hrefLink + "' class='menu'>"+title+"</a><br>"; // <br>
			}
	)
	
	menuHTML.html(menuContent);
	// targetDiv.append( menuHTML );
	targetDiv.append( menuContent );
/*	
	$('.clickable', '#menu').click(  function(event) {
		var category_name = jQuery(this).parent().get(0).id;
		var mode = category_name.split("-")[0];
		var category_id   = category_name.split("-")[1];
		// alert(mode);
		if(mode == "menuItemGallery"){
			loadGallery(category_id);
		}else if(mode == "menuItemSubArticles"){
			hideAll();
			loadCategory(category_id);
			loadSubArticlesInCategory(category_id);
		}else{
			loadCategory(category_id);
		}
		return false;
	}); // Stop 'Click' Menu
*/

	// Let's try Bold as well. font-weight:bold;
	sIFR.replace(gothamMedium, {
	  	selector: '#menu',
		wmode: 'transparent',
	  	css: ['.sIFR-root { list-style: none; color: #997950; font-size: 9px; line-height: 1em;}'
	  	,'a { text-decoration: none; color: #997950;}'
        ,'a:link { color: #997950; }'
        ,'a:hover { color: #914248; }']
	});



}


//         onRelease: onMenuClickFlash
function onMenuClickFlash( arg ){
	// alert("Menu from flash: " + arg.getFlashElement().id );
	return false;
}


/**
 * Load a simple descriptions (image, description) from a selected category from the Menu.
 * @param id
 * @return
 */
function loadCategory( id ){
	
	hideAll();
	
	$("#categoryImage").animate({opacity: 0}, 10);
	
	currentMenuCategory = id;
	// initMenu();
	
	// hideAll();
	$("#simpleContainer").show();
	var category = contentDB.find( "CATEGORY[ id = '" + id + "' ]");
	// <image>
	var imageDiv = $("#categoryImage");
	imageDiv.empty();
	var asset = category.children("ASSET").clone().text();
	// alert(asset.text());
	imageDiv.html("<img src='_assets/images/"+ asset +"' width='598' height='496' />" );
	
	// <description>
	var descriptionDiv = $("#description");
	descriptionDiv.empty();
	var description = category.children("DESC").clone().text();
	description = getLocalization( description );
	descriptionDiv.html( description ); // duplicate!! 

	// <title>
	var titleDiv = $("#title");
	titleDiv.empty();
	var title = category.children("NAME").clone().text();
	title = getLocalization( title ); 
	titleDiv.html( title ); // duplicate!! 

	// alert(title);
	replaceWithFlashFonts();

	// wait?
	$("#categoryImage").animate({opacity: 1}, 1000);
	
}


function loadSubArticlesInCategory( id, articleIndex ){
	
	articleIndex = (articleIndex==null) ? 0 : articleIndex; 

	var category = contentDB.find( "CATEGORY[ id = '" + id + "' ]");

	var titleDiv = $("#title");
	var descriptionDiv = $("#description");
	titleDiv.empty();
	descriptionDiv.empty();
	var imageDiv = $("#image");
	imageDiv.empty();

	
	var articleLinks = "";
	
	// Now get articles:
	var articles = category.children("ARTICLES");
	var counter = 0;
	articles.children().each(
			function(inSelectionIndex){
				var article = $(this);
				
				var title = article.children("NAME").clone().text();
				title = getLocalization( title );
				var description = article.children("DESC").clone().text();
				description = getLocalization( description );
				articleLinks += "<a href='javascript:loadSubArticlesInCategory(" + id + "," + counter + ");' >" + title + "</a> | ";

				if(counter == articleIndex){

					var xtra = article.children("XTRA").clone().text();
					xtra = getLocalization( xtra );
					// contains images?
					if(xtra.indexOf(".") > -1){
						imageDiv.append( "<img src='images/" + xtra + "' style='float: right;'/>" ); // duplicate!!
					}

					descriptionDiv.append( title + "<br/><br/>" ); // duplicate!!
					descriptionDiv.append( description ); // duplicate!!
					
				}
				counter++;
			}
	);
	
	descriptionDiv.append( "<br/><br/>" + articleLinks ); // duplicate!!
	if(descriptionDiv.height() < 160){
		descriptionDiv.append( "<br/><br/><br/>" );	
	}
	// descriptionDiv.css({'min-height': 170});
	replaceWithFlashFonts();	
}


function loadGallery( id ){

	$("#categoryImage").animate({opacity: 0}, 1000);
	var category = contentDB.find( "CATEGORY[ id = '" + id + "' ]");


	var xtraID = category.children("XTRA").clone().text();
	var xtra = getLocalization( xtraID );
	// alert(xtra + " " + $("#close").html() );
	$("#close").html(xtra);
	
	
	var titleDiv = $("#title");
	var descriptionDiv = $("#description");
	titleDiv.empty();
	descriptionDiv.empty();
	$("#image").empty();

	var targetDiv = $("#gallery");
	targetDiv.empty();
	targetDiv.show();

	// Show thumbs:
	category.children().each(
		function(inSelectionIndex){
			var child = $( this );
			if(child[0].nodeName == "CATEGORY"){
				var galleryName = child.children("NAME").clone().text();
				galleryName = getLocalization( galleryName );
				var categoryId = child.attr("id");
				var articles = child.children("ARTICLES");
				var thumbs = $( "<div id='thumbsSub'></div>" );
				var thumbsHTML = "<div class='galleryName'>" + galleryName + "</div><br/>";
				articles.children().each(
					function(childSelectionIndex){
						var article = $(this);
						var asset = article.children("ASSET");
						var assetName = asset.text();
						var articleId = article.attr("id");
						// targetDiv.append( asset + "<br/>" );
						var thumb = "<a class='image' href='javascript:showGalleryImage(" + categoryId + "," + articleId + ");'><img class='thumb' src='_assets/images/th_"+ assetName +"' border='0'/></a>";
						thumbsHTML += thumb;
						// targetDiv.append(thumb);
					}
				)
				thumbs.html(thumbsHTML);
				targetDiv.append(thumbs);
				
			}
		});	


	 $(".galleryName").removeClass("sIFR-replaced");

	// Toimii vaa kerran?
	sIFR.replace(gothamMedium, {
	  	selector: '.galleryName',
	  	wmode: 'transparent',
	  	css: ['.sIFR-root { color: #997950; font-size: 9px; line-height: 10px;}'
	  	,'a { text-decoration: none; color: #997950;}'
        ,'a:link { color: #997950; }'
        ,'a:hover { color: #914248; }']
	});


	replaceWithFlashFonts();	
}


function navigate( direction ){

	var category = contentDB.find( "CATEGORY[ id = '" + currentCategory + "' ]");
	var articles = category.children("ARTICLES"); 
	var newIndex = currentArticleIndex + direction;
	if(newIndex < 0) newIndex = articles.children().length - 1;
	if(newIndex > articles.children().length -1) newIndex = 0;
	
	// alert([currentCategory, currentArticleIndex, newIndex, articles.children().length]);

	var currentArticle = $(articles.children()[newIndex]);
	var currentArticleId = currentArticle.attr("id");
	
	showGalleryImage(currentCategory, currentArticleId);
}

function showGalleryImage(categoryId, articleId ){
	// var mode = currentMode;
	// hideAll();
	var category = contentDB.find( "CATEGORY[ id = '" + categoryId + "' ]");
	var articles = category.children("ARTICLES"); 
	var article = articles.find( "ARTICLE[ id = '" + articleId + "' ]");
	
	var articleIndex = -1;
	var counter = 0;
	articles.children().each(
		function(childSelectionIndex){
			var currentArticle = $(this);
			var currentArticleId = currentArticle.attr("id");
			if(currentArticleId == articleId){
				articleIndex = counter;  
			}
			counter++;
		}
	);
	// alert(articleIndex);
	currentCategory = categoryId;
	currentArticleIndex = articleIndex;
	
	var targetDiv = $("#viewerContainer"); 
	targetDiv.show();
	targetDiv.css("visibility", "visible");
	
	$("#viewerContainer").find("#background").click( 
		function(){
			$("#viewerContainer").hide();
			// hideAll();
			// $("#viewerContainer").animate()....
		}
	)
	
	var imageDiv = $("#viewerContainer").find("#image");
	// alert(imageDiv.id);
	imageDiv.empty();
	var asset = article.children("ASSET").clone().text();
	imageDiv.html( "<img src='_assets/images/"+ asset +"' height='496' id='articleImage' />" );
	$("#articleImage").animate({opacity: 0}, 1); // 1000
	$("#articleImage").animate({opacity: 1}, 'slow'); // 1000
	
}