var gradientContainer = null;

function setGradientOnRight(){
//	var docWidth=$(document).width();
	var windowWidth = $(window).width();
//	var bodyWidth = $("body").width();
//alert(docWidth + " / " + windowWidth);
	if(jQuery.browser.safari){
		windowWidth -= 15;
	}
	gradientContainer.css({'left':'330px','width':(windowWidth-330)+'px'}).show();
	setGradientHeight();
}

function setGradientOnLeft(){
//	var docWidth=$(document).width();
	gradientContainer.css({'left':'0px','width':'330px'}).show();
	setGradientHeight();
}

function setGradientHeight(){
	/* door een afrondingsfout is soms de gradient in totaal niet hoog genoeg, maak daarom de laatste div hoog genoeg */	
	var totalDivs = $(".gradientcontainer div").length - 1;
	var lastDiv = $(".gradientcontainer div :last");
	var firstDiv = $(".gradientcontainer div :first");
	var divHeight = parseInt( firstDiv.css("height") );
	var docHeight = $(document).height();
	var windowHeight = $(window).height();
	var menuHeight=$(".menucontainer").height();
	if(windowHeight > docHeight){
		docHeight = windowHeight;
	}
	var newHeight = (docHeight - (totalDivs * divHeight));
	lastDiv.css("height", newHeight + "px");
	$(".gradientcontainer .gradient").css("height", docHeight-menuHeight);
	
	/* check if document doesnt grow */
	var newDocHeight = $(document).height();
	if(newDocHeight > docHeight){
		lastDiv.css("height", newHeight - ( newDocHeight - docHeight ) + "px");
	}
}

// The Central Randomizer 1.3 (C) 1997 by Paul Houle (houle@msc.cornell.edu)
// See:  http://www.msc.cornell.edu/~houle/javascript/randomizer.html

//rnd.today=new Date();
//rnd.seed=rnd.today.getTime();
rnd.seed = 1209453264447;

function rnd() {
        rnd.seed = (rnd.seed*9301+49294) % 233280;
        return rnd.seed/(233280.0);
};


/* Copyright (c) 2006 Brandon Aaron (http://brandonaaron.net)
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) 
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 *
 * Color functions from Steve's Cross Browser Gradient Backgrounds v1.0 (steve@slayeroffice.com && http://slayeroffice.com/code/gradient/)
 *
 * $LastChangedDate: 2007-06-26 19:52:18 -0500 (Tue, 26 Jun 2007) $
 * $Rev: 2163 $
 *
 * Version 1.0
 */
(function($) {

/**
 * Adds a gradient to the background of an element.
 *
 * @example $('div').gradient({ from: '000000', to: 'CCCCCC' });
 *
 * @param Map options Settings/options to configure the gradient.
 * @option String from The hex color code to start the gradient with.
 * 		By default the value is "000000".
 * @option String to The hex color code to end the gradient with.
 * 		By default the value is "FFFFFF".
 * @option String direction This tells the gradient to be horizontal
 *      or vertical. By default the value is "horizontal".
 * @option Number length This is used to constrain the gradient to a
 *      particular width or height (depending on the direction). By default
 *      the length is set to null, which will use the width or height
 *      (depending on the direction) of the element.
 * @option String position This tells the gradient to be positioned
 *      at the top, bottom, left and/or right within the element. The
 *      value is just a string that specifices top or bottom and left or right.
 *      By default the value is 'top left'.
 *
 * @name gradient
 * @type jQuery
 * @cat Plugins/gradient
 * @author Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net)
 */
$.fn.gradient = function(options) {
	options = $.extend({ from: '000000', to: 'ffffff', direction: 'horizontal', position: 'top', length: null }, options || {});
	var createColorPath = function(startColor, endColor, distance) {
		var colorPath = [],
		    colorPercent = 1.0,
			distance = (distance < 100) ? distance : 100;
		do {
			colorPath[colorPath.length] = setColorHue(longHexToDec(startColor), colorPercent, longHexToDec(endColor));	
			colorPercent -= ((100/distance)*0.01);
		} while (colorPercent>0);
		return colorPath;
	},
	setColorHue = function(originColor, opacityPercent, maskRGB) {
		var returnColor = [];
		for (var i=0; i<originColor.length; i++)
			returnColor[i] = Math.round(originColor[i]*opacityPercent) + Math.round(maskRGB[i]*(1.0-opacityPercent));
		return returnColor;
	},
	longHexToDec = function(longHex) {
		return new Array(toDec(longHex.substring(0,2)),toDec(longHex.substring(2,4)),toDec(longHex.substring(4,6)));
	},
	toDec = function(hex) {
		return parseInt(hex,16);
	};
	return this.each(function() {
		var $this = $(this), width = $this.innerWidth(), height = $this.innerHeight(), x = 0, y = 0, w = 1, h = 1, html = [],
		    length = options.length || (options.direction == 'vertical' ? width : height),
		    position = (options.position == 'bottom' ? 'bottom:0;' : 'top:0;') + (options.position == 'right' ? 'right:0;' : 'left:0;'), 
		    colorArray = createColorPath(options.from, options.to, length);
		
		if (options.direction == 'horizontal') {
			h = Math.round(length/colorArray.length) || 1;
			w = width;
		} else {
			w = Math.round(length/colorArray.length) || 1;
			h = height;
		}
		
		html.push('<div class="gradient" style="position: absolute; ' + position + ' width: ' + (options.direction == 'vertical' ? length+"px" : "100%") +'; height: ' + (options.direction == 'vertical' ? "100%" : length+"px") + '; overflow: hidden; z-index: 0; ">');
		for(var i=0; i<colorArray.length; i++) {
			var opac = i * (100/colorArray.length);
			var opacity = 'opacity:' 
	                     + opac/100 + ';' 
	                     + 'filter:alpha(opacity=' + Math.round(opac) + ');'
	                     + '-moz-opacity: ' + (opac/10)/10 + ';';
//			html.push('<div style="position:absolute;z-index:1;top:' + y + 'px;left:' + x + 'px;height:' + (options.direction == 'vertical' ? "100%" : h+"px") + ';width:' + (options.direction == 'vertical' ? w+"px" : "100%") + ';background-color:rgb(' + colorArray[i][0] + ',' + colorArray[i][1] + ',' + colorArray[i][2] + ');"></div>');
			html.push('<div style="border:0;font-size:1px;overflow:hidden;position:absolute;z-index:1;top:' + y + 'px;left:' + x + 'px;height:' + (options.direction == 'vertical' ? "100%" : h+"px") + ';width:' + (options.direction == 'vertical' ? w+"px" : "100%") + ';background-color:#'+options.to+';'+opacity+'">&nbsp;</div>');
			
			options.direction == 'vertical' ? x+=w : y+=h;
			
			if ( y >= height || x >= width) break;
		}
		html.push('</div>');
		
		if ( $this.css('position') == 'static' )
			$this.css('position', 'relative');
		
		$this
			.html('<div style="display:' + $this.css("display") + '; position: relative; z-index: 2;">' + this.innerHTML + '</div>')
			.prepend(html.join(''));
	});
};

})(jQuery);


$(function(){

	var menuHeight=$(".menucontainer").height();
	var pageContainer = $('.pagecontainer');
	var docHeight = $(document).height()+20;

	/* BROWSER VERSIE MELDING */
	if( (parseFloat(jQuery.browser.version) < 5.5 && jQuery.browser.msie) || (parseFloat(jQuery.browser.version) < 3 && jQuery.browser.safari) ){
		alert('De site wordt niet goed weergegeven in deze browser. Gebruik bij voorkeur de nieuwste versie van Firefox, Internet Explorer of Safari.');
	}

	/* eerste afbreken */
	if( $(".do_clear_first").length > 0 ){
		$( $(".do_clear_first").find("li").get(1) ).css("clear","both");
	}

	/* opacity thumbnails */
	$(".opacless").css("opacity",0.40);

	/* kader geven aan witte blokjes */
	$(".blokje").each(function(){
		var bgcolor = $(this).css("background-color");
		if(bgcolor && (bgcolor.toUpperCase() == "FFFFFF" || bgcolor.toUpperCase() == "#FFFFFF" || bgcolor.toUpperCase() == "FFF" || bgcolor.toUpperCase() == "#FFF" || bgcolor == "rgb(255, 255, 255)") ){
			$(this).css({"border":"1px solid #CCC", "padding":"8px 9px 0px 0px"});
		}
	});

	/* SILVER TEXT IN INPUT FIELDS */
	$(".achternaam input").each(function(){
		if( $(this).val() == "" ){
			$(this).val("achternaam").css("color", "silver").focus(function(){
				if($(this).val() == "achternaam"){
					$(this).css("color", "black").val("");
				}
			});
		}
	});
	$(".meisjesnaam input").each(function(){
		if( $(this).val() == "" ){
			$(this).val("meisjesnaam").css("color", "silver").focus(function(){
				if($(this).val() == "meisjesnaam"){
					$(this).css("color", "black").val("");
				}
			});
		}
	});
	$(".tussenvoegsels input").each(function(){
		if( $(this).val() == "" ){
			$(this).val("tssnvgsl").css("color", "silver").focus(function(){
				if($(this).val() == "tssnvgsl"){
					$(this).css("color", "black").val("");
				}
			});
		}
	});
	
	
	var txt = 'Beschrijf zo specifiek mogelijk een bepaalde gebeurtenis of gewoonte. Dit kan ook iets heel alledaags zijn. Begin bijvoorbeeld met het omschrijven van de plek van de gebeurtenis. Of het moment (de momenten) waarop het zich afspeelde. Maak uw herinnering zo kleurrijk en begrijpelijk mogelijk.';
	$(".verhaal textarea").each(function(){
		if( $(this).val() == "" ){
			$(this).val(txt).css("color", "silver").focus(function(){
				if($(this).val() == txt){
					$(this).css("color", "black").val("");
				}
			});
		}
	});
	
	$("form").submit(function(){
		$("input, textarea").each(function(){
			if( $(this).val() == "tssnvgsl" || $(this).val() == "achternaam" || $(this).val() == "meisjesnaam" || $(this).val() == txt){
				$(this).val("");
			}
		});
		return true;
	});

	/* waarshuwing bij klikken op wijzigen knop in herinnering formulier */
	/*$("#wa_form_herinnering_formulier").find("input[@value='wijzigen']").click(function(){
		return confirm('Let op: delen van uw herinnering verdwijnen tijdelijk uit beeld! Zij worden vanzelf weer zichtbaar als u door de stappen klikt om uw wijziging op te slaan.');
	});*/

	/* FRONTPAGE */
	if(typeof herinneringen == "object"){
		/* set seed */
		rnd.seed += herinneringen.length * 2;
		
		var persoonHolder = $('<div class="persoonHolder"></div>').css({'z-index':1500,position:'absolute',width:'450px','background-color':'white','padding':'5px'}).insertAfter( pageContainer );
		persoonHolder.hide();
		var elm = null;
	
		var lineNr = 0;
		var lineHeight = 17;
		var lineWidth = lineSpaceRight = $('.pagebodycontainer').width();
		var lineSpaceLeft = 0;
		var lineTotalTop = menuHeight + lineHeight;
		var lineHeightGrowth = Math.round(400 / herinneringen.length);
		if(lineHeightGrowth < 2){
			lineHeightGrowth = 2;
		}
		
		var maxLRMargin = lineHeightGrowth * 12;
			
		$(herinneringen).each(function(){
			var herinnering = this;
			var firstItem = (elm == null);
			
			elm = herinnering.elm = $('<a href="#">'+herinnering.naam+' »</a>').css({'position':'absolute','z-index':1400}).click(function(){
			
				gradientContainer.empty();
				gradientContainer.gradient({ to: herinnering.kleur }).show();
				setGradientHeight();
				
				if(herinnering.kleur == "FFFFFF"){
					persoonHolder.css("border", "1px solid #ccc");
				} else {
					persoonHolder.css("border", "none");
				}
				
				var refObj = this;
				
				persoonHolder.empty().load(siteroot+'herinnering/'+herinnering.id+'/html', function(){
					persoonHolder.css({"left":"-800px","width":"800px"}).show();
					var width = persoonHolder.find(".title").width();
					persoonHolder.hide();
					
					offset = $(refObj).offset();
					width += 30; //voor het kruisje
					if(width < 450){
						width = 450;
					}
					height = 117;
	
					if(width + offset.left > lineWidth){
						offset.left = lineWidth - width;
					}
					if(height + offset.top > docHeight){
						offset.top = (offset.top - height) + 19; //19 voor line-height, laat vlak net boven-over tekst verschijnen
					}
					
					persoonHolder.css({'top':(offset.top-1)+"px", 'left':(offset.left-1)+"px", 'width':width+"px"});
					
					$('<div class="textright"></div>').append( $('<a href="#" class="kruisje">X</a>').css({"position":"absolute","top":"5px","right":"5px"}).click(function(){
						gradientContainer.hide();
						persoonHolder.hide();
						return false;
					}) ).appendTo(persoonHolder);
					persoonHolder.fadeIn();
				});
				return false;
			}).appendTo( $('.pagebodycontainer') );
			
			if(firstItem){
				elm.css({"font-size":"16pt"});
			}
			
			elmWidth = elm.width();
			if(elmWidth > lineSpaceRight){
				lineTotalTop += lineHeight;
				lineNr++;
				lineHeight += lineHeightGrowth;
				lineSpaceLeft = 0;
				lineSpaceRight = lineWidth;
			}
			
			maxTopMargin = lineHeight-elm.height();
			
			topPos = (Math.floor(rnd() * maxTopMargin ));
			leftPos = Math.floor(rnd() * maxLRMargin );
			if(leftPos + elmWidth > lineSpaceRight){
				leftPos = lineSpaceRight - elmWidth;
			}
			
			elm.css({'left':(lineSpaceLeft+leftPos)+"px",'top':(lineTotalTop+topPos)+"px", 'white-space':'nowrap'});
			
			lineSpaceRight -= (leftPos + elmWidth);
			lineSpaceLeft = lineWidth - lineSpaceRight;

			/*setTimeout(function(){
				herinnering.elm.fadeIn("fast");
			},(lineTotalTop*(30/(lineNr+1)))+500);*/
	
		})
	}

	/* GRADIENT */
	if(typeof kleur == "undefined"){
		kleur = kleuren[ Math.floor(Math.random() * kleuren.length) ];
	}

	gradientContainer = $('<div class="gradientcontainer"></div>').css({'z-index':1000,'height':( docHeight - menuHeight ) + "px", 'width':'100%', position:'absolute', top:menuHeight+"px", left:0}).insertAfter( pageContainer );
	gradientContainer.gradient({ to: kleur });
	gradientContainer.hide();

	var leftcol = $('.pagecontainer .leftcolumn').css('z-index',500);
	var leftcolWidth = leftcol.width()+15;
	var leftcolOffset = leftcol.offset();
	
	if(!nogradient){
		if(!setmouseover){
			if(gradientonright){
				setGradientOnRight();
				$(window).resize(setGradientOnRight);
			} else {
				setGradientOnLeft();
				$(window).resize(setGradientOnLeft);
			}
		} else {
			if(gradientonright){
				setGradientOnRight();
			} else {
				setGradientOnLeft();
			}
			$(document).mousemove(function(e){
				if( (e.pageX > leftcolOffset.left && e.pageX < leftcolWidth+leftcolOffset.left) ){
					setGradientOnRight();
				}
				else{
					setGradientOnLeft();
				}
			});
		}
		
		$("img").each(function(){
			$(this).load(function(){
				setGradientHeight();
			});
		});
	} else {
		$(window).resize(setGradientHeight);
	}
	
	
	/* OVERLAYERS */
	var overlayers = $(".showoverlay");
	if(overlayers.length > 0){
		
		var overlayContainer = $('<div class="overlaycontainer"></div>').css({'z-index':2000,'height':docHeight + "px", 'width':'100%', position:'absolute', top:0, left:0, opacity:0.65, 'background-color':'#999999'}).insertAfter( pageContainer );
		overlayContainer.hide();
	
		var infoHolder = $('<div class="infoHolder"></div>').css({'z-index':2500,position:'absolute','top':"90px", 'left':"200px",width:'600px','padding':'0px 14px 14px 14px','background-color':'white'}).insertAfter( pageContainer );
		infoHolder.hide();
	
		overlayers.click(function(){
			overlayContainer.show();
			infoHolder.empty().load($(this).attr("href"), function(){
				$('<div class="textright"></div>').append( $('<input type="button" value="Sluiten" class="wa_submit">').click(function(){
					overlayContainer.hide();
					infoHolder.hide();
					return false;
				}) ).appendTo(infoHolder);
				infoHolder.fadeIn();
			});
			return false;
		});
	}
});