//comment part
//MARGINDISTANCE + can be replaced to make left margin of tiles (replace all function)
//Column min value down there V is minimum colums that come next to each other
//column margin = margin between tiles



//end comment part


jQuery.noConflict();
var grid$ = jQuery;



var COLUMN_MIN = 3;		//--STILL HAVE TO FIND OUT--
var COLUMN_WIDTH = 178; //WIDTH / HEIGHT OF A TILE
var COLUMN_MARGIN = 3;    //MARGIN BETWEEN TILES
var MARGINDISTANCE = 52; //MARGIN FROM THE LEFT SIDE TO THE TILES
var THE_DISTANCE_TO_RIGHT = 10; // THE MINIMUM DISTANCE TO THE RIGHT BEFORE TILES REACT
var REACT_FROM_PIXELS_OVER_TILE = 1; //HOW MANY PIXELS MAY A TILE COME OVER THE_DISTANCE_TO_RIGHT


var _offset_x=_offset_y=0;
var timer;

grid$.grid = {
	init: function() {
		for (module in grid$.grid) {
			if (grid$.grid[module].init)
				grid$.grid[module].init();
		}
	}
};

var cookie="";
grid$(document).ready(grid$.grid.init);

grid$.grid.window = {
	init: function() {
		grid$(window)
			.bind('resize', this.resize)
			.each(this.preload);
	},


	preload: function() {
		grid$('#container').css({'visibility':'visible'});
		
		//_offset_y = grid$('#grid').offset().top;
		//_offset_x = grid$('#grid').offset().left;
		
		setTimeout(function()
		{
			grid$('#container').animate({'opacity':1},1000,'easeOutCubic');
			adjust(false);
			
		}, 100);
	},
	resize: function() {
	clearTimeout(timer);
	timer = setTimeout(function() {adjust(true);}, 500);
	}
};

function adjust(mode){
	var _max_y = new Array();
	var _max_h = 0;
	var _max_col = 0;
	
	var _window_h = grid$(window).height();
	var _window_w = grid$(window).width() - (MARGINDISTANCE * 2);
	var _target_w = _window_w-THE_DISTANCE_TO_RIGHT;
	var grid_width = 0;
	
	
	grid$('#pagebody').width(_target_w-REACT_FROM_PIXELS_OVER_TILE);

	var _footer_y=0;
	var columns = Math.max(COLUMN_MIN, parseInt(_target_w / (COLUMN_WIDTH+COLUMN_MARGIN)));
	
	
	////////////////////////////////////////////////////////////////////////////////////
	//							   	  MATEN DEFINITIE								  //
	////////////////////////////////////////////////////////////////////////////////////
	
	//BREEDTE VAN DE GEDEFINEERDE TEGELS
	grid$('#grid .item').css('width',COLUMN_WIDTH+'px');
	grid$('#grid .item_double').css('width',(COLUMN_WIDTH*2+COLUMN_MARGIN));
	grid$('#grid .item_double_double').css('width',(COLUMN_WIDTH*2+COLUMN_MARGIN));
	grid$('#grid .item_triple').css('width',(COLUMN_WIDTH*3+COLUMN_MARGIN*2));
	grid$('#grid .item_tripletodouble').css('width',(COLUMN_WIDTH*3+COLUMN_MARGIN*2));
	grid$('#grid .item_single_to_double').css('width',(COLUMN_WIDTH));
	
	//HOOGTE VAN DE GEDEFINEERDE TEGELS
	grid$('#grid .item').css('height',COLUMN_WIDTH+'px');
	grid$('#grid .item_double').css('height',(COLUMN_WIDTH));
	grid$('#grid .item_double_double').css('height',(COLUMN_WIDTH*2));
	grid$('#grid .item_triple').css('height',(COLUMN_WIDTH*3+COLUMN_MARGIN*2));
	grid$('#grid .item_tripletodouble').css('height',(COLUMN_WIDTH*2+COLUMN_MARGIN));
	grid$('#grid .item_single_to_double').css('height',(COLUMN_WIDTH*2+COLUMN_MARGIN));
	
	//WEET NIET WAT DEZE MOETEN MAAR HET ZAL WEL GOED ZITTEN
	grid$('#grid .item2').css('width',COLUMN_WIDTH+'px');
	grid$('#grid .item2').css('height',COLUMN_WIDTH+'px');
	
	////////////////////////////////////////////////////////////////////////////////////
	//						     	EINDE MATEN DEFINITIE							  //
	////////////////////////////////////////////////////////////////////////////////////	
	
	
	
	
	for (x=0;x<columns;x++) _max_y[x] = 0;
	
	grid$('#grid > .item').each(function(i) {
		var pos, cursor, width, height= 0;
		var target_x=target_y=0;
		var outerWidth = grid$(this).outerWidth();
		width=(Math.floor(outerWidth/COLUMN_WIDTH));
		cursor=0;
		if (width>1) {
			for (x=0;x<columns-(width-1);x++) cursor=(_max_y[x]<_max_y[cursor])?x:cursor;
			pos=cursor;
			for(var x=0; x<width; x++) height = Math.max(height, _max_y[pos+x]);
			for(var x=0; x<width; x++) _max_y[pos+x] = parseInt(grid$(this).outerHeight())+COLUMN_MARGIN+height;
			
			target_x=pos*(COLUMN_WIDTH+COLUMN_MARGIN)+_offset_x;
			target_y=height+_offset_y;
			
			_max_h=(height > _max_h)?_max_y[pos+width-1]:_max_h;
		}else{
			for (x=0;x<columns;x++) cursor=(_max_y[x]<_max_y[cursor])?x:cursor;
			target_x=cursor*(COLUMN_WIDTH+COLUMN_MARGIN)+_offset_x;
			target_y=_max_y[cursor]+_offset_y;
			_max_y[cursor] += grid$(this).outerHeight()+COLUMN_MARGIN;
			_max_h=(_max_y[cursor]>_max_h)?_max_y[cursor]:_max_h;
		}
		
		outerWidth += target_x;
		if(outerWidth > grid_width)grid_width = outerWidth;
		
		if(!mode){
			grid$(this).stop();
			grid$(this).css({left:-outerWidth, opacity:0, top:target_y+COLUMN_MARGIN});
			grid$(this).animate({left: target_x + MARGINDISTANCE +'px', opacity: 1},1000,'easeInOutBack');
		}else{
			grid$(this).stop();
			grid$(this).animate({left: target_x + MARGINDISTANCE + 'px',top: target_y+COLUMN_MARGIN + 'px',borderWidth: "10px"},500,'easeInOutCubic');
		}
		_max_col=(_max_col<cursor)?cursor:_max_col;
	});
	
	
	
	
	
	if (!mode)
	{
		grid$('#grid > .item2').stop().css('top',COLUMN_MARGIN).animate({left: grid_width + MARGINDISTANCE + COLUMN_MARGIN + 'px'}, 1000, 'easeInOutBack');
	}
	else
		grid$('#grid > .item2').stop().animate({left: (grid_width + MARGINDISTANCE + (COLUMN_MARGIN)) + 'px'},500,'easeInOutCubic');
	{
	}

	/*grid$('#grid > .item2').each(function(i) {
		var pos, cursor, width, height= 0;
		var target_x=target_y=0;
		var outerWidth = grid$(this).outerWidth();
		width=(Math.floor(outerWidth/COLUMN_WIDTH));
		cursor=0;
		if (width>1) {
			for (x=0;x<columns-(width-1);x++) cursor=(_max_y[x]<_max_y[cursor])?x:cursor;
			pos=cursor;
			for(var x=0; x<width; x++) height = Math.max(height, _max_y[pos+x]);
			for(var x=0; x<width; x++) _max_y[pos+x] = parseInt(grid$(this).outerHeight())+COLUMN_MARGIN+height;
			
			target_x=pos*(COLUMN_WIDTH+COLUMN_MARGIN)+_offset_x;
			target_y=height+_offset_y;
			
			_max_h=(height > _max_h)?_max_y[pos+width-1]:_max_h;
		}else{
			for (x=0;x<columns;x++) cursor=(_max_y[x]<_max_y[cursor])?x:cursor;
			target_x=cursor*(COLUMN_WIDTH+COLUMN_MARGIN)+_offset_x;
			target_y=_max_y[cursor]+_offset_y;
			_max_y[cursor] += grid$(this).outerHeight()+COLUMN_MARGIN;
			_max_h=(_max_y[cursor]>_max_h)?_max_y[cursor]:_max_h;
		}
		
		outerWidth += target_x;
		if(outerWidth > grid_width)grid_width = outerWidth;
		
		if(!mode){
			grid$(this).stop();
			grid$(this).css({left:-outerWidth, opacity:0});
			grid$(this).animate({left: (grid_width + MARGINDISTANCE + (COLUMN_MARGIN)) + 'px', opacity: 1},1000,'easeInOutBack');
		}else{
			grid$(this).stop();
			grid$(this).animate({left: (grid_width + MARGINDISTANCE + (COLUMN_MARGIN)) + 'px',borderWidth: "10px"},500,'easeInOutCubic');
			//alert(_max_col);
			//alert(target_x);
		}
		_max_col=(_max_col<cursor)?cursor:_max_col;
	});*/
	
};