var backColor = new Array();

/*backColor[0] = '#fffe82'; //geel
backColor[1] = '#970064'; //roze
backColor[2] = '#00b1cb'; //blauw
backColor[3] = '#00cd8c'; //groen
backColor[4] = '#ffffff'; //wit
*/

backColor[0] = '#fffe82'; //geel
backColor[1] = '#00c4b4'; //groenblauw
backColor[2] = '#ff8888'; //rood(ish)
backColor[3] = '#93ffe2'; //groenig
backColor[4] = '#93b9ff'; //blauw


$(document).ready(function() {

	var randomnumber=Math.floor((Math.random()*500)/100)
	document.bgColor = backColor[randomnumber];

});

$(function() {
    $('.loesItem').mouseenter(function() {
        var currentImg = $("img",this).attr('src');
        $("img",this).attr('src', $("img",this).attr('hover'));
        $("img",this).attr('hover', currentImg);
    }).mouseleave(function(){
        var currentImg = $("img",this).attr('src');
        $("img",this).attr('src', $("img",this).attr('hover'));
        $("img",this).attr('hover', currentImg);
    });
    
    
    $('#loesSlides').cycle({fx:'scrollHorz',speed:300,prev:'#loesLeft',next:'#loesRight',height:400,timeout: 0,pause: 1,before:onBefore,after:onAfter});
    
    function onAfter(curr,next,opts) {
		$('#loesCounterCurrent').html(opts.currSlide + 1);
		$('#loesCounterTotal').html(opts.slideCount);
		$('#loesImageTitle').html("<h2>" + this.alt + "</h2>");
	}
			
	function onBefore(curr,next,opts) {
		$('#loesSlides').animate({height: next.height},500);
	}
   
    
    $('.loesItem').draggable();
    $('.loesItem').draggable("option", "stack", ".loesItem");
    $('.loesItem').draggable("option", "containment", "#loesCanvas");
    
    
    $('.loesItem').each(function(){
		$(this).css({ 
				'top':randomXToY(0,375),
	 			'left': randomXToY(0,($(window).width() - $(this).width()))
		});
	});
 
	// in case it's useful, my random function is just:
 
	function randomXToY(minVal,maxVal,floatVal){
  		var randVal = minVal+(Math.random()*(maxVal-minVal));
  		return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal);
	}
    
});