var site;

$(document).ready(function() {
	//make menu draggable
	$( "#menu" ).css('cursor', 'move').draggable({ containment: "window" });
	
	//get window-size
	var h = $(window).height();
	var w = $(window).width();

	//Prep for Klets!11-APP
	// ###########################
	//Load the flash!
	var params = {
		menu: "false",
		quality: "high",
		scale: "exactfit",
		wmode: "transparent",
		allowscriptaccess: "always",
		bgcolor: "#ffffff",
		allowFullScreen: "true"
	};
	
	var flashvars = {
		language: "nl"
	};
	if (swfobject.getQueryParamValue("klets")) {
		flashvars.klets = swfobject.getQueryParamValue("klets");
	};
	
	var attributes = {
		id: "flashcontent",
		name: "flashcontent"
	};
	
	swfobject.embedSWF("loader.swf", "flashcontent", "100%", "100%", "10.0.0", "expressInstall.swf", flashvars, params, attributes);
	
	site = {
		ajax_reload: function(){
			$('#page-app #bg ul').fadeOut('fast', function(){
				$('#page-app #bg ul').load("/app/ #bg ul li", function(){
					$('#page-app #bg ul').fadeIn('fast');
				});
			});
		}
	};
	
	$('#page-app #bg img').jail({
	event : "load",
	effect:"fadeIn",
	speed : 175,
	offset:175,
	timeout: 2500
	}); 

	//- set scrollpane
	var obj = $('.scrollwrapper').height((parseInt($(window).height())-20)+'px').jScrollPane();
	var api = obj.data('jsp');
	
	//jQuery('.scrollwrapper .jspPane').width(jQuery('.scrollwrapper .jspPane').width()+5);
	$('.scrollwrapper .jspDrag').prepend('<div class="jspDragBg"></div>');
	$('.scrollwrapper .jspDragBg').height($('.scrollwrapper .jspDrag').height()-12);
	
	//fix the flash app size
	var ratio = 1045/650;
	var f_ratio = 1045/166;
	var fl_ratio = 520/650;
	
	//$('#page-app').height(h+"px");
	$('#page-app #flash-container').height((h/ratio)+'px').width(((h/ratio)*fl_ratio)+'px').css('margin-left', '-'+($('#page-app #flash-container').outerWidth()/2)+'px');
	$('#page-app #app-text img').attr('height', (h/f_ratio));
	
	//##################################


	if($.browser.webkit || $.browser.msie)
	{
		$('html').addClass('webkit');
	}
	
	/*
	 * rendered useless
	 */
	/* 
	//get window-size
	var h = $(window).height();
	var w = $(window).width();
	
	//resize pages width to fit all pages	
	$('#pages').width((w*$('#pages .page').size()));
	
	//resize all pages
	$('.page').width(w).height(h);
	
	//activate slider
	//resize slider to 100% - widht of handle
	$('#slider').width((w-98));
	*/
	
//	if($.browser.msie)
//	{
//		  document.createElement('header');
//		  document.createElement('nav');
//		  document.createElement('section');
//		  document.createElement('article');
//		  document.createElement('aside');
//		  document.createElement('footer');
//	}

	
	//set basics for use of phpthumb
	var base_url = "http://klets.be/";
	//var base_url = "http://localhost:8888/";
	var phpt = base_url+"assets/libs/phpthumb/phpThumb.php?src=../../images/";//mask-1.jpg&h=100
	
	var start_pos = 23;
	
	//prep vars
	var src_raw = null;
	var src_ar = null;
	var src = null;
	
	var cur_w = null;
	var cur_h = null;
	
	//images orig size
	var img_orig_w = 958;
	var img_orig_h = 1200;
	
	//resize images
	$('.page img.mask').each(function(){
		//force html to resize already
		$(this).attr('height',h);
	
		//get source
		src_raw = $(this).attr('src');
		src_ar = src_raw.split('/');
		src = src_ar[(src_ar.length-1)];//got final source
	
		//now resize
		$(this).attr('src',phpt+src+"&h="+h+"&q=100");
		
		$(this).attr('height',h);
		$(this).attr('width',Math.round(img_orig_w*(h/img_orig_h)));
	});
	
	$('.iframe iframe').each(function(){
		$(this).height(h-20);
	});
	
	//resize conten page
	$('#content').width($('.page img.mask').width());
	$('#content').height($('.page img.mask').height());
	
	//resize conten 
	$('#content .logo').attr('width',Math.round(172*(h/img_orig_h)));
	//$('#content .sponsoren .aeyc').attr('width',Math.round(65*(h/img_orig_h)));
	//$('#content .sponsoren .vlo').attr('width',Math.round(141*(h/img_orig_h)));
	$('#content .content').width($('#content').width()-50);
	
	//show the images
	$('.page img.mask').show();
	
	var pages_width = 0;
	
	$('#pages>div').each(function(){
		pages_width += $(this).width();
	});
	
	$('#pages').width(pages_width);
	
	//console.log('Pages width on start: '+pages_width+'px');
	
	function resize_images()
	{
		h = $(window).height();
		w = $(window).width();
		
		$('.page img.mask').each(function(){
			//get current w&h
			cur_w = $(this).width();
			cur_h = $(this).height();
			
			//force html to resize already
			$(this).attr('height',h);
			$(this).attr('width',Math.round(cur_w*(h/cur_h)));
		});
		
		$('.iframe iframe').each(function(){
			$(this).height(h-20);
		});

		$('#content').width($('.page img.mask').width());
		$('#content').height($('.page img.mask').height());
		
		$('#content .logo').attr('width',Math.round(172*(h/img_orig_h)));
		//$('#content .sponsoren .aeyc').attr('width',Math.round(65*(h/img_orig_h)));
		//$('#content .sponsoren .vlo').attr('width',Math.round(141*(h/img_orig_h)));
		$('#content .content').width($('#content').width()-50); 
		
		pages_width = 0;
		
		//give width to pages container
		$('#pages>div').each(function(){		
			pages_width += $(this).width();
		});
		
		$('#pages').width(pages_width);
		
		//console.log('Pages width: '+pages_width+'px');
	
		
		//fix the flash app size
		var ratio = 1045/650;
		var f_ratio = 1045/166;
		var fl_ratio = 520/650;
		
		$('#page-app').height(h+"px");
		$('#page-app #flash-container').height((h/ratio)+'px').width(((h/ratio)*fl_ratio)+'px').css('margin-left', '-'+($('#page-app #flash-container').outerWidth()/2)+'px');
		$('#page-app #app-text img').attr('height', (h/f_ratio));
		
		
		//fix scrollbar(s)
		$('.scrollwrapper').height((parseInt($(window).height())-20)+'px');
		api.reinitialise();
		
		$('.scrollwrapper .jspDrag').prepend('<div class="jspDragBg"></div>');
		$('.scrollwrapper .jspDragBg').height($('.scrollwrapper .jspDrag').height()-12);
	}
	
	//resize_images();
	
	var scrollPane = $('body');
	var scrollContent = $('#pages');
	
	var scrollbar = $("#slider").slider({
		value: start_pos,
		slide:function(e, ui){
			if( scrollContent.width() > scrollPane.width() )
			{ 
				scrollContent.css('margin-left', Math.round( ui.value / 100 * ( scrollPane.width() - scrollContent.width() )) + 'px'); 
			}
			else { 
				scrollContent.css('margin-left', 0); 
			}
			
		}	
	});
	
	if($.browser.safari)
	{
		$('.ui-slider-handle',scrollbar).removeAttr('href');
	}
	
	//start pos of pages
	scrollContent.css('margin-left', Math.round( start_pos / 100 * ( scrollPane.width() - scrollContent.width() )) + 'px'); 
	
	var handleHelper = scrollbar.find('.ui-slider-handle')
		.wrap('<div class="ui-handle-helper-parent"></div>').parent();
	
	var slider_value_set = false;
	
	$('#menu ul li a').click(function(e){
		e.preventDefault();
		
		slider_value_set = false;
		
		if($(this).attr('href') == '#page-contact')
		{
			page_displacement = parseInt(scrollContent.css('margin-left'))*-1;
			perc = $("#slider").slider('option','value')*(-1);
		}
		else if($(this).attr('href') == '#page-partners')
		{
			page_displacement = (($('#pages').width()-w)+parseInt( scrollContent.css('margin-left') ))*(-1);
			perc = 100-$("#slider").slider('option','value');
		}
		else
		{		
			var p = $($(this).attr('href')).position();
			
			var page_displacement = ( parseInt(p.left)+parseInt( scrollContent.css('margin-left') ) );
			page_displacement = (page_displacement*(-1))+100;
			
			var perc = (page_displacement/( scrollPane.width() - scrollContent.width() ) ) * 100;
		}
		
		scrollContent.stop().animate({'margin-left':  '+='+page_displacement+'px'}, 1000);
		
		$("#slider .ui-slider-handle").stop().animate({left: '+='+perc+'%'}, 1000, function(){
			if(slider_value_set == false)
			{
				slider_value_set = true;
				$("#slider").slider('option','value', ($("#slider").slider('option','value')+perc));
				return;
			}
		}); 
		
		//change menu active
		$('#menu .active').removeClass('active');
		$(this).addClass('active');
	});
	
	$(window).resize(function(){
			resetValue();
			sizeScrollbar();
			resize_images();
			//reflowContent();
	});
	
	function resetValue(){
		var remainder = scrollPane.width() - scrollContent.width();
		var leftVal = scrollContent.css('margin-left') == 'auto' ? 0 : parseInt(scrollContent.css('margin-left'));
		var percentage = Math.round(leftVal / remainder * 100);
		scrollbar.slider("value", percentage);
	}
	
	function sizeScrollbar(){
		scrollbar.width(scrollPane.width());
		
		var handleSize = scrollbar.find('.ui-slider-handle').width();
		handleHelper.width('').width( scrollbar.width() - handleSize);
	}
	
	sizeScrollbar();
});


function ajax_reload()
{
	site.ajax_reload();
}