$(document).ready(function(){

	// set lightboxed items
	$('a[rel=lightbox]').lightBox();
	

	// init bgs
	if(pageType=='home'){
		if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod') {
			initBgJs();
		} else {
			initBgFlash();
		}
	}

	
	/**
	* navigation
	*/
	$('.navSection').mouseenter(function()
	{
		
		// hide corner
		if($(this).hasClass('subNav')){
			$("#navContainer").addClass('active');
		}
		
		// hide all itemContainers
		$(".navItems").hide();

		// get this navItemContainer
		var navItemContainer = $('#'+$(this).attr('rel'));
		
		// get the navitems in this container
		var navItems = navItemContainer.find('.navItem');
		
		// hide all the navitmes in the container
		navItems.css({opacity: 0.0});
		
		// show this itemsContainer
		navItemContainer.show();
		
		// fade the nav items in one by one
		var itemCounter = 0;
		var intervalId = setInterval(function(){
			if(itemCounter>=navItems.length){
				var _intervalId = intervalId
				clearInterval(_intervalId);
			} else {
				$(navItems[itemCounter]).animate({opacity: 1.0},{
					'duration':100
				});
			}
			itemCounter++;
		},100);
		
		
		// get x of the corresponding item
		var x = $(this).position().left;
		navItems.find(".navItemTitle").css({'padding-left':x});
	});
	
	
	
	/**
	* mouse leaves navcontainer
	*/
	$('#navContainer').mouseleave(function()
	{
		$("#navContainer").removeClass('active');
		// hide items
		$(".navItems").hide();
	});
	
	
	
	/**
	* get twitter
	*/
	var url = wwwRoot+'twitter';
	$.ajax({
		url:url,
		type:'GET',
		dataType:'html',
		context:this,
		error:function(arg1,arg2,exception)
		{
			//console.log(exception);
		},
		success:function(html)
		{
			$('#twitter').append(html);
		}
	});
	
	
	
	
	/**
	*text shadow
	*/
	$(".shadow").textShadow({
		x:-1, 
		y:-2, 
		radius:5,
		color:"#666666"
	});
	
	
	
	/**
	* youtube popups
	*/
	$('.ytLink').bind('click',{},function()
	{
		// set player url on popup
		$("#playerPopup").data('hash', $(this).attr('id'));
		// open popup
		$("#playerPopup").dialog("open");
		return false;
	});
	
	
	
	// append popup html to body
	$( "body" ).append('<div id="playerPopup" style="display:none;"><a href="#" id="playerPopupClose"><span style="display:none;">X</span></a></div>');
	
	
	
	// config
	$("#playerPopup").dialog({
		autoOpen: false,
		modal: true,
		closeText:'',
		show: 'fade',
		hide: 'fade',
		width: 685,
		height: 500
	});
	
	//  close on button
	$("#playerPopupClose").live("click", function() {
		$("#playerSwf" ).remove();
		$("#playerContainer" ).remove();
		$("#playerPopup").dialog("close");
	});
	
	// close on overlay
	$(".ui-widget-overlay").live("click", function() {
		$("#playerSwf" ).remove();
		$("#playerContainer" ).remove();
		$("#playerPopup").dialog("close");
	});
	
	// dialog opened-> place yt player
	$( "#playerPopup" ).bind( "dialogopen", function(event, ui) {
	
		var hash = $( "#playerPopup" ).data('hash');
		var youtubeEmbed = '<div id="playerContainer"><iframe id="playerSwf" width="632" height="357" src="http://www.youtube.com/embed/'+hash+'" frameborder="0" allowfullscreen></iframe></div>';
		$( "#playerPopup" ).append(youtubeEmbed);
	});
});




function initBgFlash()
{

	var bgs = $("#bgs").text();

	// APPEND DIV TO CONTAINER
	$( "#backgroundImg" ).append('<div id="swfContainer"></div>');
	
	// PLACE FLASH PLAYER IN DIV
	var source = wwwRoot+"swf/bg.swf";
	var container = "swfContainer";
	var width = "100%";
	var height = "100%";
	var flashVersion = "9";
	var altSWF = null;
	var vars = {
		bgs : bgs
	}
	var params = {
		allowFullScreen:"true",
		wmode:"transparent"
	}
	var attribs = {
		id: "bgSwf"
	};
	swfobject.embedSWF(source, container, width, height, flashVersion,altSWF,vars,params,attribs);
}



/**
* start running through images on ipad
*/
function initBgJs()
{
	var bgs = $("#bgs").text().split(',');
	var current = 0;
	setInterval( function(){
		// remove old bg img
		$('#bgImgOld').remove();
		
		// set current to old
		$('#bgImgCurrent').attr('id','bgImgOld');
		
		// load new
		var img = '<img id="bgImgCurrent" src="'+bgs[current]+'" />';
		$("#backgroundImg").append(img);
		
		// make it fit
		resizeBg();
		
		// to next
		current++;
		if(current >= bgs.length){
			current = 0;
		}
	}, 3000 );
	
	// set handler on window resize
	$(window).resize(function() {
		resizeBg();
	});
	
	//resize once
	$(window).resize();
}




/**
* resize the background
*/
function resizeBg() 
{
	//script voor de fullscreen achtergrond, in samenwerking met css
	var $window = $(window);
	var $bg = $("#backgroundImg img");
	var aspectRatio = $bg.width() / $bg.height();
	
	// set bg to width or height depending on window AR and image AR
	if ( ($window.width() / $window.height()) < aspectRatio ) {
       $bg.removeClass('bgwidth')
       $bg.addClass('bgheight');
       $bg.css({'left':0});
       $bg.css({'top':0});
    } else {
        $bg.removeClass('bgheight')
        $bg.addClass('bgwidth');
        $bg.css({'left':0});
        $bg.css({'top':-1*($bg.height() - $window.height())/2});
	}
}