// JavaScript Document

// Fix for IE
if(!Array.indexOf){
	Array.prototype.indexOf = function(obj){
		for(var i=0; i<this.length; i++){
			if(this[i]==obj){
				return i;
			}
		}
		return -1;
	}
}

var active;
var projects = new Array();
var categories = new Array();

$(document).ready(function(){
	// Get categories
	$.getJSON("http://webkeeper.acato.net/getCategoriesJSON.php?format=json&jsoncallback=?",
		function(json){
			$.each(json.channel.categories, function(i,item){
				$.each(item.projects, function(j,item2){
					projects.push(item2);
				});
				categories.push(item);
			});
		 	initCategorieActions();
		 	initMouseOvers();
			if($("#overview")){
				initOverviewActions();
			}
			if($("#detail")){
				initProjectActions();
				initControlActions();
			}
		}
	);
});

function initCategorieActions(){
	$("#categories li a").click(function(){
		var q = $(this).attr('href');
  		q = q.replace(/\?/,'');
      	q = q.replace(/\&/,'');
		categorie_id = Number(q.split('categorie_id=')[1].charAt(0));
		project_id = Number(q.split('project_id=')[1].charAt(0));
		applyFilter(categorie_id, project_id);
		return false;
	});
}

function initOverviewActions(){
	$("#overview .item a").click(function(){
									
		var q = $(this).attr('href');
  		q = q.replace(/\?/,'');
      	q = q.replace(/\&/,'');
		categorie_id = Number(q.split('categorie_id=')[1].charAt(0));
		project_id = Number(q.split('project_id=')[1].charAt(0));
		
		showDetail(categorie_id, project_id);
		return false;
	});
}

function initProjectActions(){
	$("#projects li a").click(function(){
		var q = $(this).attr('href');
  		q = q.replace(/\?/,'');
      	q = q.replace(/\&/,'');
		categorie_id = Number(q.split('categorie_id=')[1].charAt(0));
		project_id = Number(q.split('project_id=')[1].charAt(0));
		
		showDetail(categorie_id, project_id);
		return false;
	});
}

function initControlActions(){
	$("#controls a").click(function(){
		var q = $(this).attr('href');
  		q = q.replace(/\?/,'');
      	q = q.replace(/\&/,'');
		categorie_id = Number(q.split('categorie_id=')[1].charAt(0));
		project_id = Number(q.split('project_id=')[1].charAt(0));
		
		showDetail(categorie_id, project_id);
		return false;
	});
}


function getCategorieTitle(categorie_id){
	var title = "";	
	if(categories.length){
		for(var i = 0; i < categories.length; i++){
			if(categorie_id == Number(categories[i].id)){
				title = categories[i].title;
			}
		}
	}
	return title;
}


function applyFilter(categorie_id, project_id){
	//alert(projects.length);
	// remove all menu items
	$("#projects").html("");
	var template = '<li><a href="{LINK}" title="{TITLE}" class="{CLASS}">{TITLE}</a><div class="thumbnail"><div style="background: url(http://webkeeper.acato.net/images/{IMAGE_1}_x.jpg);"></div></div></li>';
	
	if(projects.length){
		for(var i = 0; i < projects.length; i++){
			if(categorie_id == Number(projects[i].categorie_id)){
				var html = template;
				
				var categorieId = Number(projects[i].categorie_id);
				var index = Number(projects[i].id);
				
				var varClass = "";
				if(project_id == index){
					varClass = "active";
				}
				
				var title = projects[i].title;
				var image1 = projects[i].image_0_id;
				var ahref = "?categorie_id=" + categorieId + "&project_id=" + index;
				
				html = html.replace(/\{TITLE\}/gi, title);
				html = html.replace(/\{CLASS\}/gi, varClass);
				html = html.replace(/\{IMAGE_1\}/gi, image1);
				html = html.replace(/\{LINK\}/gi, ahref);
				
				$("#projects").append(html);
			}
		}
		var title = getCategorieTitle(categorie_id);
		$("#categorieName").html("<h3>" + title + "</h3>");
		
		initMouseOvers();
		initProjectActions();
		startSifr();
	}
}

function showDetail(categorie_id, project_id){
	// remove all menu items
	$("#detail").html("");
	$("#overview").html("");
	var template = '<div id="detail"><h1>{TITLE}</h1><div id="controls">{VORIGE_LINK}{VOLGENDE_LINK}</div><p class="subtitle">{SUBTITLE}</p><div id="hoofdvisual"><a href="http://webkeeper.acato.net/images/{IMAGE_2}_m.jpg" title="afbeelding vergroten" class="thickbox"><img src="http://webkeeper.acato.net/images/{IMAGE_2}_s.jpg" title="{TITLE}" border="0" /></a></div><div class="line"></div><div id="floatingHolder"><div id="floating">{BODY2}<div class="line"></div><a href="http://{URL}" target="_blank" title="{TITLE}" class="go_link">{URL}</a></div></div><div id="body">{BODY}</div><div class="clearer"></div><div id="controls">{VORIGE_LINK}{VOLGENDE_LINK}</div></div>';
	var vorigeTemplate = '<a href="{VORIGE_PROJECT}" title="Vorige project"><img src="../img/previous.gif" alt="Vorige project" border="0" /></a>';
	var volgendeTemplate = '<a href="{VOLGENDE_PROJECT}" title="Volgende project"><img src="../img/next.gif" alt="Volgende project" border="0" /></a>';
	
	if(projects.length){
		for(var i = 0; i < projects.length; i++){
			if(project_id == Number(projects[i].id)){
				var html = template;
				
				var categorieId = projects[i].categorie_id;
				var id = projects[i].id;
				
				var title = projects[i].title;
				var subtitle = projects[i].subtitle;
				var body1 = projects[i].body;
				var body2 = projects[i].righttext;
				var url = projects[i].url;
				var image2 = projects[i].image_0_id;
				var vorige = projects[i].vorige_project;
				var volgende = projects[i].volgende_project;
				
				html = html.replace(/\{TITLE\}/gi, title);
				html = html.replace(/\{SUBTITLE\}/gi, subtitle);
				html = html.replace(/\{BODY\}/gi, body1);
				html = html.replace(/\{BODY2\}/gi, body2);
				html = html.replace(/\{URL\}/gi, url);
				html = html.replace(/\{IMAGE_2\}/gi, image2);
				
				if(vorige == "?categorie_id=0&project_id=0"){
					html = html.replace(/\{VORIGE_LINK\}/gi, "");
				} else {
					html = html.replace(/\{VORIGE_LINK\}/gi, vorigeTemplate);
				}
					
				if(volgende == "?categorie_id=0&project_id=0"){
					html = html.replace(/\{VOLGENDE_LINK\}/gi, "");
				} else {
					html = html.replace(/\{VOLGENDE_LINK\}/gi, volgendeTemplate);
				}
				
				html = html.replace(/\{VORIGE_PROJECT\}/gi, vorige);
				html = html.replace(/\{VOLGENDE_PROJECT\}/gi, volgende);
				
				$("#detail").append(html);
			}
		}
		tb_init('a.thickbox, area.thickbox, input.thickbox');
		applyFilter(categorieId, id);
		initControlActions();
		startSifr();
	}
}

function initMouseOvers(){
	$("#projects li").hover(function(){
		$(".thumbnail", this).show();
		$(".thumbnail", this).animate({
			marginTop: "-75px"
		});
		return false;
	}, function(){
		$(".thumbnail", this).hide();
		$(".thumbnail", this).css("margin-top", "-50px");
	});
}