/**
 * We use this file only for the desktop version.
 * 
 */

var Page = { 
	addSubPages : function(data, activeNr){
		GrayBlocks.addBlocks();
		Page.removeButtons(function(){
			var cnt = 0;
  			data.find('subPage').each(function(){
				var el = document.createElement('div');
				el = $(el);
				el.addClass('pageElement');
				el.addClass('zoomamble');
				el.attr('nr', $(this).attr('nr'));
				el.html($(this).attr('nr')+'/2000<br />'+$(this).find('name').text());
		 		$('#content').append(el[0]);
	 			el.css('left',parseFloat($(this).attr('x'))*GrayBlocks.BLOCKSIZE)
				el.css('top',parseFloat($(this).attr('y'))*GrayBlocks.BLOCKSIZE)
				
				el.hide();
				if(activeNr == $(this).attr('nr')){
					el.delay(cnt*300).fadeTo(500,0.9);
				}
				else{
					el.delay(cnt*300).fadeTo(500,0.4);
				}
				
				el.click(function(){
					Navigation.navigateToSubPage($(this).attr('nr'));
					var es = $(this)
					es.animate({opacity:1}, 500);
					$('.pageElement').unbind('mouseover');
					$('.pageElement').unbind('mouseout');
					//es.unbind('mouseout');
					Page.fadeOutButtons(es);
		  		});
				el.hover(
					function(){
						el.fadeTo(250,0.9);
					},
					function(){
						el.fadeTo(250,0.4);
					}
				);
	 		cnt++;
			});
		});
	},	
	removeButtons : function(fn){
		var cnt = 0;
		$('#content .pageElement').each(function(){
  			$(this).unbind('click');
  			$(this).unbind('mouseout');
  			$(this).unbind('mouseover');
  			$(this).delay(cnt*100).fadeOut(400,function(){
  				$(this).css('background-image','none')
  				$(this).remove()});
 			cnt++;
		});
		if(fn != undefined)
			setTimeout(fn,cnt*100+300);		
	},
	fadeOutButtons : function(el){
		var cc = 0;
		$('.pageElement').each(function(){
			
			var nr =0;
			if(el != undefined)
			var nr =  el.attr('nr');		
			if($(this).attr('nr') != nr){
				var opacity = 0.2 + Math.random()*0.4
 				$(this).animate({opacity:opacity}, 500);
				cc++;
 				$(this).bind('mouseover',function(){
					$(this).stop(true);
					$(this).animate({opacity:1}, 250);
	  			});
	  			$(this).bind('mouseout', function(){
	  				var opacity = 0.3 + Math.random()*0.5
					$(this).animate({opacity:opacity}, 250);
  				});
			}	
		});
	}
}
var GrayBlocks = {
	MAX_BLOCKS : 10,
	MIN_BLOCKS : 2,
	BLOCKSIZE : 82,
	colors : ['#1e1b1c', '#1c1d21', '#262932', '#242022'],
	addBlocks : function(){
		GrayBlocks.removeBlocks();
		var nr = Math.floor(GrayBlocks.MIN_BLOCKS + Math.random() * (GrayBlocks.MAX_BLOCKS-GrayBlocks.MIN_BLOCKS));
		for(var i=0; i<=nr;i++){
			var el = GrayBlocks.getBlock();
			var pos = GrayBlocks.getEmptyPosition();
			el.hide();
			el.delay(i*300).fadeIn(500)
			el.css('left', pos.x*GrayBlocks.BLOCKSIZE);
			el.css('top', pos.y*GrayBlocks.BLOCKSIZE);
 			$('#content').append(el);
 			
		}
		var el = GrayBlocks.getBlock();
		el.css('opacity', 0.9);
		el.hide();
		el.css('left', 1*GrayBlocks.BLOCKSIZE);
		el.css('top', 2*GrayBlocks.BLOCKSIZE);
 		el.delay(i*300).fadeIn(500)
 		$('#content').append(el);
			
 		$('.grayBlock').click(function(){
	  		Navigation.navigateToHome();
  		});
	},
	getBlock:function(){
		var el = document.createElement('div');
		el = $(el);
		el.addClass('grayBlock');
		el.css('background-color', GrayBlocks.colors[Math.floor(Math.random()* GrayBlocks.colors.length)]);
		el.css('opacity', 0.1+Math.random()* 0.5);
		return el;
	},
	removeBlocks : function(){
		var cnt = 0;
		$('#content .grayBlock').each(function(){
			
			$(this).delay(cnt*100).fadeOut(300, function(){
				$(this).remove();
			});
			cnt++;
		});
 		for(var i=0; i<GrayBlocks.takenPositions.length;i++ ){
			GrayBlocks.positions.push(GrayBlocks.takenPositions[i]);
		}
		GrayBlocks.takenPositions = [];
 	},
	getEmptyPosition : function(){
		var index = Math.floor(GrayBlocks.positions.length * Math.random());
 		var pos = GrayBlocks.positions.splice(index, 1)
		GrayBlocks.takenPositions.push(pos[0]);
 		return pos[0];
	},
	setPositionTaken:function(){},
	takenPositions : [],
	positions : [{x:0,y:0},
				 {x:1,y:0},
				 {x:2,y:0},
				 {x:3,y:0},
				 {x:4,y:0},
				 {x:5,y:0},
				 {x:6,y:0},
				 {x:7,y:0},
				 {x:8,y:0},
				 {x:0,y:1},
				 {x:1,y:1},
 				 {x:0,y:3},
				 {x:1,y:3},
				 {x:0,y:5},
				 {x:1,y:5},
				 {x:2,y:5},
				 {x:3,y:5},
				 {x:4,y:5},
				 {x:5,y:5},
				 {x:6,y:5},
				 {x:7,y:5},
				 {x:9,y:0},
				 {x:9,y:1},
				 {x:9,y:2},
				 {x:9,y:3}
				 
				 ]
};