// Written by Ontwerp van Honing 2011
// http://www.vanhoning.nl

var WWidth;
var WHeight;

var NewPosW;
var NewPosH;

var EaseTime = "400";
var EaseType = "easeInBack";

var getCurrent;
var FirstImg;
var FirstImgBlock;

var intervalHandle = null;
var rndNumBG;
var NewNr;

var pid;
var cnt;


var fade = 100;
var fadedIn = 400;
var fadedOut = 50;

var ExtraWidth = 0;
var Collums = 6;

var padding = 20;
var padding2x = (padding*2);
var padding3x = (padding*3);
var padding4x = (padding*4);

var NavHeight = 60;
var NavHeightOriginal = 60;
var SubNavHeight = 30;
var ProjectTextWidth = 450;

var menuWidth = 1200; // menu width
var fontSize = 44;
var newFontSize;

var Blauw = '#0CF'; // blauw

var ActiveColor = Blauw;
var HoverColor = Blauw;
var LinkColor = '#000000'; // zwart
var Wit = '#FFFFFF'; // zwart
var DarkGrey = '#666'; // zwart


var ProjectDown = null;
var ProjectUp = null;

var thisImg;
var aktiefImg;
var ImgLength;

var projects = 2; //ID van Projects pagina...
var index = 0; //ID van Home pagina...

var SubNavBackButtText;
var MenuBack=index;



var ThumbSize;
var thumbWidth = 200; // menu width
var fontSizeThumbs = 30;
var percentageThumbs;
var newFontSizeThumbs;


//alert($.browser.name);

//if ($.os.name == "iphone") { window.location = "mobiel"}
//if ($.os.name == "iphone") { $(".vid_container").remove(); }
if ($.browser.name == "safari") { video = "NO" }
if ($.browser.name == "msie") { video = "NO" }
if ($.browser.name == "chrome") { video = "NO" }
if ($.browser.name == "firefox") { video = "NO" };

//var col = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'; 



$(document).ready(function(){
	
//jQuery.fn.center = function () {
//	
//	var MH = (MHeight);
//	var MW = (MWidth);
//	var MW2 = (MW * 3);
//	
//	NewPosH = (WHeight - MH ) / 2 + "px";
//	NewPosW = (WWidth - MW2 ) / 2 + "px";
//	
//    this.css("position","absolute");
//    this.css("top", NewPosH);
//    this.css("left", NewPosW);
//	
//    return this;
//}

jQuery.fn.hasScrollBar = function() {
        return this.get(0).scrollHeight > this.height();
}

$(window).resize(function() { 
	ResizeBG();
	CheckWidth();
	Resize();
	
//	var doit;
//	clearTimeout(doit);
//	doit = setTimeout(function(){Resize();}, 1000);
	 
});


/////////// ONLOAD EVENTS ////////////////



$(".thumb").hover(function() {  
             		$(this).children(".thumb_holder").fadeTo(fade, 0.0); // transparantie thumbs  
					},function() {  
             		$(this).children(".thumb_holder").fadeTo(fade*2, 1.0); 
});

$(".thumb").click(function(event) {
					event.preventDefault();
});
$(".thumb").bind("click",OpenProjectFromThumbs);




$('#output').hide();

//$(".Content_container").css("background-color", Blauw);

ResizeBG();
SwitchBG();
CheckWidth();
Resize();
SetDimensions();
Output();

//$(".content:first").fadeTo(fade,1.0);

/////////// FUNCTIONS MENU //////////////////////////////////////////////////////////


function SetHover() {

$(".menu").hover(function() {  
             		AnTo_HoverColor($(this));  
					},function() {  
					AnTo_LinkColor($(this));  
});
}
SetHover();

$(".content:first").fadeTo(fade,1.0);

function AnTo_HoverColor(obj) { obj.stop().animate({ color: HoverColor}, fade); }
function AnTo_LinkColor(obj) { obj.stop().animate({ color: LinkColor}, fade); }
function AnTo_ActiveColor(obj) { obj.stop().animate({ color: ActiveColor}, fade); }

function AnTo_Color(obj, col) { obj.stop().animate({ color: col}, fade); }

$(".link").each( function(){var url = $(this).attr("url"); $(this).wrap("<a href=http://"+url+" target=_blank class=lnk></a>").text(url); });

$(".mail").each( function(){var url = $(this).attr("url"); $(this).wrap("<a href=mailto:"+url+" class=lnk></a>").text(url); });


$(".menu_div").bind("click",ClickMenu);

$(".menu_div").click(function(event) {
					event.preventDefault();
});

function ClickMenu(event) {
					event.preventDefault();
					//alert("!");
					
					r = $(this).children().attr("href");
					
					//ToggleBGColor($(".Content_container"),Blauw); 
					
					if ( r!=projects ) { ResetNormals(); MenuBack=index; } else { MenuBack=projects; ClickBack(); }
										
					SetHover();
					
					$(".nav_sub").fadeTo(fade,0.0).hide().removeClass("visible");
					SetHeights(); // Bereking Heights navigatie
					Resize();
					LoadContent(r);
					
					NavSortOut($(this));
					
					//r = $(this).children().attr("href");
					
				
};

function ClickBack() {
					
					//ToggleBGColor($(".Content_container"),Blauw); 
					
					SetHover();
					ResetNormals();
					
					$(".nav_sub").fadeTo(fade,0.0).hide().removeClass("visible");
					SetHeights(); // Bereking Heights navigatie
					Resize();
					
					if ( MenuBack==projects) {
					NavSortOut($(".menu_off"));
					LoadContent(MenuBack);
					}
					else if (MenuBack==index) { 
					
					NavSortOut($(".menu_div:first"));
					//r = $(this).children().attr("href");
					LoadContent(MenuBack);
					}
				
}; 
/////////// FUNCTIONS PROJECT LINKS //////////////////////////////////////////////////////////

SetProjectLinks();

function OpenProjectFromNav(event) {
					event.preventDefault();
					r = $(this).attr("pid"); //// hier gaat het nog niet goed...........
					
					ToggleBGColor($(".Content_container"),"#333")
					$(".Project_container").children().empty();

					
					$(".nav_sub").fadeTo(fade,1.0).addClass("visible");
					
					SetHeights(); // Bereking Heights navigatie
					Resize(); // Reset Height content

					SetSubNav(parseInt(r));
	

					$.getJSON('php/getinfo.php', {'id' : r}, parseInfo);
					//$(".Project_container").children().empty().load("php/content2011.php?id=" + r);
					//alert("Je weettogg" + r);
}; 

function OpenProjectFromThumbs(event) {
					event.preventDefault();
					r = $(this).attr("pid");
					
					ToggleBGColor($(".Content_container"),"#333")
					$(".Project_container").children().empty();
					
					
					$(".nav_sub").fadeTo(fade,1.0).addClass("visible");
					
					SetHeights(); // Bereking Heights navigatie
					Resize();
					
//					NavSortOut($(".menu"+projects)); // Set Nav to 'WERK'
					
					$("#c"+projects).children().empty();
					LoadContent(projects); // Set Nav to 'WERK'
					
					SetSubNav(parseInt(r));
					$.getJSON('php/getinfo.php', {'id' : r}, parseInfo);
					//$(".Project_container").children().empty().load("php/content2011.php?id=" + r);
					//alert("Je weettogg" + r);
}; 

function OpenProjectFromSubNav(r, dir) {
					if (dir=="up") { r=r+1; }
					else if (dir=="down") { r=r-1; }
					SetSubNav(parseInt(r));
					$.getJSON('php/getinfo.php', {'id' : r}, parseInfo);
					 

};
function parseInfo(data) { 
					
					pid = data.pid;
					cnt = data.cnt;
					
					//alert(data.cnt +', '+ data.pid);
					$(".Project_container").children().load("php/content2011.php?id=" + pid, function () { SetPrevNextImgButs(); $(".img").hide().load(function () { OnLoadContent($(this)); GalleryScroll(); Resize(); GalleryImgSet(); });   });
function OnLoadContent(obj) {
					//obj.fadeIn(600);
						$(".PrevNext").width(WWidth).css("bottom", (NavHeight+15) + "px");

					var FirstImg = $(".img:first");
					ImgScale(FirstImg);
					FirstImg.addClass("imgOn").fadeIn(600);
					//ToggleBGColor($(".Content_container"),"#333")
}
function SetPrevNextImgButs(){
					SetHoversPrevNextImgLink('on');
					SetHoversPrevNextImgLink('off',$(".prevImg"));					
					//$(".img").css("cursor","pointer").click(function(event){event.preventDefault(); GalleryScroll("next")});
					
//					$(".PrevNextLink").click(function(event){event.preventDefault()});
					$(".prevImg").click(function(event){event.preventDefault(); CheckImgAmount("prev"); GalleryScroll("prev")});
					$(".nextImg").click(function(event){event.preventDefault(); CheckImgAmount("next"); GalleryScroll("next")});
	}					
}


/////////// FUNCTIONS //////////////////////////////////////////////////////////
function CheckImgAmount(dir){
	
					var AI; 
					
					switch(dir) {
						case "next":
							AI = $(".IMaktief").next().attr("rel");
							if( AI==ImgLength ){ SetHoversPrevNextImgLink('off', $(".nextImg")); }
							else if (AI<ImgLength) { SetHoversPrevNextImgLink('on', $(".prevImg")); SetHoversPrevNextImgLink('on', $(".nextImg")); }
						break;
						
						case "prev":
							AI = $(".IMaktief").prev().attr("rel");
							if( AI==1 ){ SetHoversPrevNextImgLink('off', $(".prevImg")); }
							else if ( AI>1){ SetHoversPrevNextImgLink('on', $(".nextImg")); SetHoversPrevNextImgLink('on', $(".prevImg")); }
						break;
						
						case "check":
							AI = $(".IMaktief").attr("rel");
							if( AI==1 ){ SetHoversPrevNextImgLink('off', $(".prevImg")); SetHoversPrevNextImgLink('on', $(".nextImg")); }
							else if( AI==ImgLength ){ SetHoversPrevNextImgLink('off', $(".nextImg")); SetHoversPrevNextImgLink('on', $(".prevImg")); }
							else if ( AI>1){ SetHoversPrevNextImgLink('on', $(".nextImg")); SetHoversPrevNextImgLink('on', $(".prevImg")); }
							else if (AI<ImgLength) { SetHoversPrevNextImgLink('on', $(".prevImg")); SetHoversPrevNextImgLink('on', $(".nextImg")); }
							
						break;
						
			
					}
					//alert("Img nummer:" + AI + " van de " + ImgLength);
}

function SetHoversPrevNextImgLink(s, d){
					
					if (!d) { d = $(".PrevNextLink"); }

					if ( s=='on') {
						d.css("cursor","pointer");
						d.fadeTo(0,1.0);
						
//					
					//AnTo_Color(d, Wit);
					
					d.hover(
							function() {  
             				AnTo_Color($(this), Wit); },
							function() {  
							AnTo_Color($(this), Blauw);  }
							).css("cursor","pointer");
					}
					if ( s=='off') {
						d.css("cursor","default");
						d.fadeTo(0,0.0).hide();
					AnTo_Color(d, Blauw);
					d.unbind('mouseenter mouseleave').css("cursor","default");
					}
					

}
function GalleryImgSet() { 

	
	
	ImgLength = $(".img").size();
	var ImgC=1;
	
	$(".PNImgs").text("");
	
	
	while (ImgC < (ImgLength)) {
	
	$(".PNImgs").append( "<span class='PrevNextLink IMRS IMnr"+ImgC+"' rel='"+ImgC+"'>"+ImgC+"</span> - ");
	ImgC++
	
	}
	
	$(".PNImgs").append("<span class='PrevNextLink IMRS IMnr"+ImgLength+"'  rel='"+ImgLength+"'>"+ImgLength+"</span>");
	//alert(ImgLength);
	$(".IMnr1").addClass("IMaktief");
	$(".IMRS").css("cursor","pointer").bind('click',function(){var r = $(this).attr("rel"); GallerySelect(r); });

	
	//$(".IMRS").click(function(event){event.preventDefault(); var rel = $(this).attr("rel"); GalleryScroll(rel)});
	
	
	
}

function GallerySelect(Img) {
	
	var IMG = $(".img"+Img);
	var IMnr = $(".IMnr"+Img);
	thisImg = $(".imgOn");
	aktiefImg =  $(".IMaktief");
	
		if(thisImg.hasClass(".vimeo")){$(".vimeo").show();} else { $(".vimeo").hide(); }

	
	ImgScale(IMG);
	aktiefImg.removeClass("IMaktief"); IMnr.addClass("IMaktief");
	thisImg.hide().removeClass("imgOn"); IMG.addClass("imgOn").fadeIn(600);
	
	CheckImgAmount("check");
}

function GalleryScroll(direction) {
	
	thisImg = $(".imgOn");
	aktiefImg =  $(".IMaktief");
	
	if(thisImg.hasClass(".vimeo")){$(".vimeo").show();} else { $(".vimeo").hide(); }
	
	//GalleryImgSet();
	
	
	if (direction == 'next') {
		
		ImgScale(thisImg.next('.img'));
		aktiefImg.removeClass("IMaktief").next().addClass("IMaktief");
		thisImg.hide().removeClass("imgOn").next().addClass("imgOn").fadeIn(600);
		 
	}
	else if (direction == 'prev') {
		
		ImgScale(thisImg.prev('.img'));
		
		aktiefImg.removeClass("IMaktief").prev().addClass("IMaktief");
		thisImg.hide().removeClass("imgOn").prev().addClass("imgOn").fadeIn(600);
			
	}
}

function ImgScale(Img) {
	
	var ImgHeight = Img.height();
	var ImgWidth = Img.width();
	
	//alert(ImgHeight);
	//	alert(ImgWidth);
	
	var yScale = (ImgHeight / ((WHeight-60)-NavHeight));
	var xScale = (ImgWidth / ((WWidth-60)-ProjectTextWidth));
	
	
	if ( yScale > xScale) {
	//	alert ('y > x');
	var NewWidth = Math.round(ImgWidth * (1/yScale));
    var NewHeight = Math.round(ImgHeight * (1/yScale));
	}
	else {
	//alert ('x > y else');
	var NewWidth = Math.round(ImgWidth * (1/xScale));
    var NewHeight = Math.round(ImgHeight * (1/xScale));
	}
	
	Img.height(NewHeight).width(NewWidth);
	
};
function ImgSet() {
	
	$(".img").each( function(){ $(this).load( ImgScale($(this))) } );
	
	};

function NavSortOut(obj) {
	
					$(".menu_off").removeClass("menu_off").bind("click",ClickMenu); 
					obj.addClass("menu_off");
					
					AnTo_LinkColor($(".menu").css("cursor","pointer"));
					AnTo_ActiveColor(obj.children().not(".nav_slash"));
					
//					obj.unbind("click",ClickMenu).children().unbind('mouseenter mouseleave').css("cursor","default");
					obj.children().unbind('mouseenter mouseleave');
					
					$(".Home_container").remove();
					

}

//$('#mylist a').click(function ()
//    {
//        var id = $(this).attr('rel');
//			$.getJSON('php/getinfo.php', {'id' : id}, parseInfo);
//
//    });
//	
//function parseInfo(data)
//{
//    $('#info').html(data.pid +', '+ data.cnt +', '+ data +'<br>' );
//}

function SetSubNav(r){
	
$(".nav_sub_div").empty().load("php/subnav.php?id=" + r, function(){ 
	//ProjectCnt = $(".ProjectID").attr("cnt"); 
	//ProjectID = $(".ProjectID").attr("pid"); 
	
	ProjectDown = (r - 1);
	ProjectUp = (r + 1);
	
	var PC = $(".project_count").attr("rel");
	
	if (MenuBack==index) { SubNavBackButtText = "TERUG NAAR HET OVERZICHT" } else if (MenuBack==projects) { SubNavBackButtText = "TERUG NAAR HET ARCHIEF";}
	//alert(ProjectDown+" - "+ProjectCnt+" - "+ProjectUp);
	
	$(".back").text(SubNavBackButtText).attr("href", "").click(function(event){ event.preventDefault(); ClickBack(); });
	
	if (ProjectDown<1) { $(".prev").fadeTo(0,0.0); } 
	else { 
		$(".prev").show();
		$(".prev").attr("href", (ProjectDown)).click(function(event){ event.preventDefault(); OpenProjectFromSubNav(r,"down"); });
	}
	if ((ProjectUp-1) == PC) {$(".next").fadeTo(0,0.0);}
	else { 
		$(".next").show();
		$(".next").attr("href", (ProjectUp)).click(function(event){ event.preventDefault(); OpenProjectFromSubNav(r, "up"); });
	}
	} );
}


function ResetNormals() {
$(".Project_container").children().empty().load("php/projects.php", function(){ SetProjectLinks(); });
ToggleBGColor($(".Content_container"),Blauw);
}

function SetProjectLinks(){
$(".project_link").click(function(event) { event.preventDefault(); });
$(".project_link").bind("click",OpenProjectFromNav);
};

function ToggleBGColor(obj, c) {
	//obj.stop().animate({ backgroundColor: c}, 0);
	//obj.css("background-image", "url(imgs/black_grundge_bg_blauw.jpg)");  
}

function LoadContent(r) {
$(".on").removeClass("on").hide();
$("#c"+r).addClass("on").fadeTo(fade*3,1.0);
}

function SetDimensions() {
$(".nav_container").height(NavHeight);
$(".nav_sub").height(SubNavHeight);
}


function CheckWidth() {
if ( $(".Content_container").hasScrollBar() ) { 
ExtraWidth = 0;
//alert('Scrollbar Width: ' + scrollbarWidth());
	}
else { ExtraWidth = 1;}
}

function SetHeights() {
	if ($(".nav_sub").hasClass("visible")) { 
		NavHeight = NavHeight+SubNavHeight;
	} else { NavHeight = NavHeightOriginal; }; 
}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

function Resize() {
	
	WWidth = $(window).width();
	WHeight = $(window).height();
	
	
	//alert(boxWidth+" / "+WWidth);
	
	$(".Content_container").width(WWidth).height(WHeight-NavHeight);
	$(".nav_container").width(WWidth).css("bottom",0);
	$(".nav_sub").width(WWidth).css("bottom",NavHeight-SubNavHeight);
	$(".nav_sub_div").width(WWidth);
	
	$(".ProjectText_div").height(WHeight-NavHeight-60);
	$(".ProjectImgs").width(WWidth-500);
	
	$(".PrevNext").width(WWidth-padding2x).css("bottom", (NavHeight+5) + "px");
	$(".content_txt").width(WWidth/2);
	$(".PNImgs").width(WWidth);
	
	ThumbSize = (Math.round(WWidth/Collums)+ExtraWidth);
	
	$(".Thumbs_container").width(ThumbSize*Collums);
	$(".thumb").width(ThumbSize).height(ThumbSize);
	$(".thumb_img").width(ThumbSize).height(ThumbSize);
	
	Output();
	
	ImgSet();
	
	
	if ( WWidth < menuWidth ) {
	newFontSize = 30;
	Collums = 5;
	$(".menu_div").css("font-size", newFontSize);
	}
	else if ( WWidth > menuWidth ) { $(".menu_div").css("font-size", fontSize); Collums = 6; }
	
	if ( ThumbSize < thumbWidth ) {
	
	newFontSizeThumbs = 16;
	$(".thumb_title").children("h1").css("font-size", newFontSizeThumbs);
	}
	else if ( ThumbSize > thumbWidth ) { $(".thumb_title").children("h1").css("font-size", fontSizeThumbs); }
}	
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	



/////////// FUNCTIONS RANDOM BG //////////////////////////////////////////////////////////


function pad(number, length) {
	var str = '' + number;
    while (str.length < length) {
        str = '0' + str;
    }
    return str;
}

function SwitchBG(){
	
	
setInterval(function()
	{
	rndNumBG = (Math.floor(Math.random() * 132 ) + 1);
	NewNr = pad(rndNumBG, 3);
	//alert (NewNr); 
	//$("body").css("background-image","url(video/test/HL_"+NewNr+".jpg)");
	imgSrc = ("../imgs/home/HL_"+NewNr+".jpg");
	
	$(".BGIMG").attr("src", imgSrc ).load();
	//$(".BGIMGContainer").empty().append("<img class='BGIMG' src='../video/test/HL_"+NewNr+".jpg'>");
	ResizeBG();
	
	//alert(WWidth);
	//$(".BGIMG").width(WWidth);
	//$(".container").append("test");
	}, 1000);
}

function ResizeBG(){

WWidth = $(window).width();
WHeight = $(window).height();

$(".Home_container").width(WWidth).height(WHeight-NavHeight);


if ( WWidth > WHeight ) {
var TH = $(".BGIMG").height();
$(".BGIMG").width(WWidth);

$(".BGIMG").parent().css("top", (WHeight-TH)/2)

//$("#message2").width(WWidth-200);
 }
else if ( WWidth < WHeight ) { 
$(".BGIMG").height(WHeight);
//$("#message2").height(WHeigth-200);
}



}


/////////// FUNCTION RANDOM BG //////////////////////////////////////////////////////////

function Output() {
	
		var WH = $(window).height();
		var WW = $(window).width();
		
		var NCW = $(".nav_container").width();
		var NCH = $(".nav_container").height();
		
		var CW = $(".Content_container").width();
		var CH = $(".Content_container").height();
		
		var NCL = $(".nav_container").position().left;
		var NCT = $(".nav_container").position().top;
		
		var TS = $(".thumb").width();
		
		$('#output').text('Output:')
		.append('<br /><br />' + 'Window Height = ' + WH + '<br />'  + 'Window Width = ' + WW + '<br />')
		.append('<br />' + 'NAV_C Height = ' + NCH + '<br />'  + 'NAV_C Width = ' + NCW + '<br />')
		.append('<br />' + 'NAV_C Left = ' + NCL + '<br />'  + 'NAV_C Top = ' + NCT + '<br />')
		.append('<br />' + 'Content Height = ' + CH + '<br />'  + 'Content Width = ' + CW + '<br />')
		.append('<br />' + 'Thumb size = ' + TS + '<br />');		
};

/////////// FUNCTION //////////////////////////////////////////////////////////

//function scrollbarWidth() {
//    var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>');
//    // Append our div, do our calculation and then remove it
//    $('body').append(div);
//    var w1 = $('div', div).innerWidth();
//    div.css('overflow-y', 'scroll');
//    var w2 = $('div', div).innerWidth();
//    $(div).remove();
//    return (w1 - w2);
//}

/////////// FUNCTION //////////////////////////////////////////////////////////


});