var languageDB = [];
var contentDB = null; // Loaded from XML
var currentMenuCategory = -1;
var CATEGORIES_PER_PAGE = 7;
var currentPageIndex = 0;
var THUMB_HEIGHT = 80;
var THUMB_MARGIN = 5;
var currentMode = "";
var MODE_ARTICLE = "mode_article";
var MODE_NONE = "mode_none";
var lastCategoryId = -1;
var lastArticleId = -1;

/**
 * Init Application 
 */
jQuery( function($) {
	
	// $.get("_assets/language.txt",{},initLanguageDB);
	var currentTime = new Date();
	var timeStamp = currentTime.getTime();
	
	$.get("_assets/published_categories_oldstyle_embed_text.xml?"+timeStamp,{},initDatabase,"xml");	
	
	
}); // JQUERY


/**
 * 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 ){
	// convert input data to jQuery XML object model
	contentDB = $( inputXML );
	initMenu();
	// alert("Init Database: " + contentDB);
}

/**
 * 
 * @return
 */
function hideAll(){
	$("#tipu").hide();
	$("#thumbsContainer").hide();
	$("#simpleContainer").hide();
	$("#viewerContainer").hide();
	// $("#pageInfo").empty();
	$("#pageInfo").hide();
	$("#articleInfo").hide();
	currentMode = MODE_NONE;
}


/**
 * 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();
				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 = "";
				if(mode == "1"){
					menuLinkMode = "Thumbs";
				}else if(mode == "2"){
					menuLinkMode = "Simple";
				}
				var menuItemHTML = "<LI id='menuItem" + menuLinkMode +  "-" + id + "' class='clearElement pageItem left'><div class='clickable'><a href='#' class='menu'>"+title+"</a></div>"+activeHTML+"</LI>";
				menuContent += menuItemHTML;
				
			}
	)
	
	menuHTML.html(menuContent);
	targetDiv.append( menuHTML );
	
	$('.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 == "menuItemSimple"){
			// Show SimpleContainer. (contains image, and description stuff...)
			// alert("Load bio/contact/etc.");
			loadSimpleCategory(category_id);
		}else{
			loadThumbsInCategory(category_id);
		}
	}); // Stop 'Click' Menu
	
}


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

/**
 * Load the thumbnails a selected category from the Menu.
 * @param id
 * @return
 */
function loadThumbsInCategory( id, 	pageIndex ){
	
	// Set defaults:
	pageIndex = (pageIndex==null) ? 0 : pageIndex; 
	
	// init:
	currentMenuCategory = id;
	initMenu();
	hideAll();
	$("#thumbsContainer").show();
	
	
	var category = contentDB.find( "CATEGORY[ id = '" + id + "' ]");
	// alert("Load category: " + [id, category.children().length] );
	// alert( category.children("NAME").text() );
	
	var targetDiv = $("#thumbsContainer");
	targetDiv.empty();
	
	currentPageIndex = pageIndex;
	var counter = 0;
	var startIndex = pageIndex * CATEGORIES_PER_PAGE;
	var stopIndex = startIndex + CATEGORIES_PER_PAGE;
	
	
	// Show thumbs:
	category.children().each(
		function(inSelectionIndex){
			var child = $( this );
			
			if(child[0].nodeName == "CATEGORY"){

				if(counter >= startIndex && counter < stopIndex){
					var currentWidth = 0;
					var cutDone = false;
					// alert(currentWidth);
					var categoryId = child.attr("id");
					var articles = child.children("ARTICLES");
					var nextDiv = $( "<div id='subNext'><a href='#' class='subNext'><img src='images/next.gif' width='40' height='80' border='0' /></a></div>" );
					// <div id='subPrev'></div>
					var prevDiv = $( "<a href='#' class='subPrev'><img src='images/previous.gif' width='40' height='80' border='0' /></a>" );
					var thumbs = $( "<div id='thumbsSub'></div>" );
					var thumbsHTML = "";
					// targetDiv.append( articles.children().length + "<br/>" );
					articles.children().each(
						function(childSelectionIndex){
							var article = $(this);
							var asset = article.children("ASSET");
							var width = parseInt(asset.attr("width"));
							var height = parseInt(asset.attr("height"));
							var ratio = width/height;
							var thumbWidth = THUMB_HEIGHT * ratio;
							currentWidth += thumbWidth + THUMB_MARGIN;
							// alert("(w,h): " + [width, height, thumbWidth, currentWidth]);
							
							var assetName = asset.text();
							var articleId    = article.attr("id");
							// targetDiv.append( asset + "<br/>" );
							var thumb = "<a class='image' href='javascript:loadArticle(" + categoryId + "," + articleId + ");'><img class='thumb' src='_assets/images/th_"+ assetName +"' border='0' /></a>";
							thumbsHTML += thumb;
							// targetDiv.append(thumb);
						}
					)
					thumbs.html(thumbsHTML);
					if(currentWidth > 580){
						thumbs.append(nextDiv);
						thumbs.append(prevDiv);
					}
					// Divide between children..
					targetDiv.append(thumbs);
					// targetDiv.append("<hr/>");
					
					// alert("CurrentWidth: " + currentWidth);

					
				}

				// Add to category counter!!
				counter++; 

				
				
			}
			
		}
	)  // </show thumbs>
	
	
	
	
	// make sure we always get enough pages:
	var pages = Math.ceil(counter/CATEGORIES_PER_PAGE);
	// alert("Pages: " + [counter, CATEGORIES_PER_PAGE, counter/CATEGORIES_PER_PAGE, pages]);
	var pageCounter = 0;
	if(pages > 0){
		$("#pageInfo").show();
		var pageInfo = "Page ";
		var active = "";
		while(pageCounter < pages){
			if(pageCounter == currentPageIndex){
				active = "outside";
			}else{
				active = "";
			}
			pageInfo += "<a class='"+active+"'href='javascript:loadThumbsInCategory("+currentMenuCategory + "," + pageCounter +");' >" + (pageCounter+1) + "</a>&nbsp;";
			pageCounter++;
		}
		$("#pageInfo").html("<br/>" + pageInfo);
	}
	// $("#pageInfo").append("<a href='javascript:loadThumbsInCategory("+currentMenuCategory+");' >Back to thumbnails</a>");
	
	$(".subNext").click( 
		function(){
			var thumbsHolder = $(this).parent().parent();
			// alert("next: " + thumbsHolder.width() );
			thumbsHolder.width(580);
			$(this).parent().hide();
		}
	);

	$(".subPrev").click( 
		function(){
			var thumbsHolder = $(this).parent();
			// alert("prev: " + thumbsHolder.width() );
			thumbsHolder.width(6000);
			thumbsHolder.children("#subNext").show();
		}
	);
	
}

function showThumbs(){
	hideAll();
	$("#thumbsContainer").show();
	$("#pageInfo").show(); // This is unfortunately empty now...
}

/**
 * Load a specific article, 
 * @param categoryId
 * @param articleId
 * @return
 */
function loadArticle( 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 targetDiv = $("#viewerContainer"); 
	targetDiv.show();
	
	var imageDiv = $("#viewerContainer").children("#image");
	// alert(imageDiv.id);
	imageDiv.empty();
	var asset = article.children("ASSET").clone().text();
	imageDiv.html( "<img src='_assets/images/"+ asset +"' height='430' id='articleImage' border='0' />" );
	$("#articleImage").animate({opacity: 0}, 1); // 1000
	$("#articleImage").animate({opacity: 1}, 'slow'); // 1000
	// alert($("#articleImage").attr("src"));

	var articleMode = article.children("MODE").clone().text();
	var articleTitle = article.children("NAME").clone().text();
	
	
	$("#articleInfo").show();
	var categoryTitle = category.children("NAME").clone().text();
	var title = article.children("NAME").clone().text();
	var articleInfo = "";
	if(articleMode == "2"){
		articleInfo += articleTitle + "<br/>";
	}else{
		articleInfo += categoryTitle + "<br/>";
	}
	// pageInfo += title;
	$("#articleInfo").html("<br/>" + articleInfo);
	
	var thumb = $("#thumb_" + categoryId + "_" + articleId);
	if(thumb != null){
		if(thumb.children().length > 0){
			var thumbImage = $(thumb.children()[0]);
			thumbImage.removeClass("unselectedThumb");
		}
	}

	var thumb = $("#thumb_" + categoryId + "_" + articleId);
	if(thumb != null){
		if(thumb.children().length > 0){
			var thumbImage = $(thumb.children()[0]);
			thumbImage.removeClass("unselectedThumb");
		}
	}
	
	var lastThumb = $("#thumb_" + lastCategoryId + "_" + lastArticleId);
	if(lastThumb != null){
		if(lastThumb.children().length > 0){
			var thumbImage = $(lastThumb.children()[0]);
			thumbImage.addClass("unselectedThumb");
		}
	}

	
	lastCategoryId = categoryId;
	lastArticleId = articleId;
	
	// alert("Current Mode: " + currentMode + " mode: " + mode)
	
	// This allows us to only set image, and the thumbs will remain positioned...
	if(mode == MODE_ARTICLE){
		currentMode = MODE_ARTICLE;
		return;
	}
	currentMode = MODE_ARTICLE;
	
	var scrollToWidth = 0;
	
	var currentWidth = 0;
	// Category Thumbs:
	var thumbs = $( "<div id='thumbsSub'></div>" );
	var thumbsHTML = "";
	// targetDiv.append( articles.children().length + "<br/>" );
	articles.children().each(
		function(childSelectionIndex){
			var article = $(this);
			var asset = article.children("ASSET");
			var assetName = asset.text();
			var thumbId    = article.attr("id");
			
			var width = parseInt(asset.attr("width"));
			var height = parseInt(asset.attr("height"));
			var ratio = width/height;
			var thumbWidth = THUMB_HEIGHT * ratio;
			currentWidth += thumbWidth + THUMB_MARGIN;
			
			
			var css = "thumb unselectedThumb";
			var mouseOvers = "";
			if(thumbId == articleId){
				scrollToWidth = 580 - Math.floor(currentWidth) - 60;
				css = "thumb";
			}else{
				// mouseOvers = 'onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" ';
				// mouseOvers += 'onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50"';
			}
			
			var thumb = "<a id='thumb_" + categoryId + "_" + thumbId + "' class='image' href='javascript:loadArticle(" + categoryId + "," + thumbId + ");'><img class='"+css+"' src='_assets/images/th_"+ assetName +"' "+mouseOvers+" height='80' border='0' /></a>";
			thumbsHTML += thumb;
		}
	)
	thumbs.html(thumbsHTML);
	 $("#viewerThumbs").html(thumbs);
	
	// <description>
	// SEEE ABOVE!!! Used for article name already!!!
	// var descriptionDiv = $("#viewerContainer #description");
	// descriptionDiv.empty();
	// var description = "";
	// description += article.children("DESC").clone().text();
	// descriptionDiv.html( description.clone().text() ); // duplicate!! 

	// descriptionDiv.html("Category: " + categoryId + " has " + articles.children().length + " articles! " + article.children("ASSET").text() );
	
	
	var thumbsDiv = $("#viewerThumbs").children("#thumbsSub");

	
	if(currentWidth < 580){
		$("#viewerNext").hide();
		$("#viewerPrev").hide();
		return;
	}else{
		$("#viewerNext").show();
		$("#viewerPrev").show();
	}
	
	// alert( scrollToWidth );
	var scrollTarget = scrollToWidth + "px";
	if(scrollToWidth < 0){
		thumbsDiv.animate({left: scrollTarget}, {queue:false,duration:1000});
	}
	
	$(".viewerNext").hover( 
		function(){
			var rightTarget = (580 - Math.floor(currentWidth) - 60) + "px";
			thumbsDiv.animate({left: rightTarget}, {queue:false,duration:1000});
		}, function(){
			// var left = Math.floor( thumbsDiv.position().left ) + "px"; 
			thumbsDiv.stop();
		}
	);

	$(".viewerPrev").hover( 
		function(){
			thumbsDiv.animate({left: '0px'}, {queue:false,duration:1000});
		}, function(){
			thumbsDiv.stop();
		}
	);

}