//var $box = $('.box');

$(document).ready(function() { // ready
	//$('.box').hide();
});

$(window).load(function() { // ready
	
	//alert('Width: ' + $(window).width());
	
	var $box = $('.box');
	//var $preloader = $('#preloader_outer');
	
	//$preloader.css('display', 'block');
	//$box.hide();
	
	if(!FlashDetect.installed){
		
		var $container = $('#container');
		
		$container.css('min-width', 0);
		$container.css('min-height', 0);
		$container.css('position', 'relative');
	}
	
	setContent($box);
	
	//$preloader.hide();
	//$box.show();
	
	/* TODO: MOBILE ("orientationchange") - waiting for jquery mobile 1.0 stable release
	$(window).bind("orientationchange", function (event) {
		setContent();
	});
	*/
	
	}).resize(function() {
		
		setContent($('.box'));
});

$(window).load(function() {
	
	$('body').css('background-color', '#ededed');
});


function debug() {
	$("#info").html(
			"Width: " + $(window).width() + "px<br>" + "Height: "
					+ $(window).height() + "px");

	// $("#resize_window").click(function(){
	// window.resizeTo(switchSize, 800);
	// window.moveTo(0,0); // (screen.width / 2)-420 , (screen.height / 2)-400
	// window.focus();
	// });
}

function resizeImages($box) {

	var width = boxLayout.COLWIDTH - 2 * boxLayout.COLMARGIN;

	if ($(window).width() <= getSwitchSize()) {
		width = $box.width() - 2 * boxLayout.COLMARGIN;
	}

	$(".content_wrap").children("img").resizeImage(width);
	//$(".box a").children("img").resizeImage(width);
}

var myFluidGrid = {
		
	COLNUMBERMIN : boxLayout.COLNUMBERMIN, // Minimum column number.
	COLNUMBERMAX : boxLayout.COLNUMBERMAX,
	COLMARGIN : boxLayout.COLMARGIN, // Margin (in pixel) between
	COLWIDTH : boxLayout.COLWIDTH, // Fixed width of all columns.
	COLCENTERED: boxLayout.COLCENTERED,
	doLayout : function($box) {
		var self = this;
		var pointer = 0;
		var arr = [];
		var maxCols = parseInt($('body').innerWidth()
				/ (this.COLWIDTH + this.COLMARGIN));
		var columns = Math.max(this.COLNUMBERMIN,
				maxCols < this.COLNUMBERMAX ? maxCols : this.COLNUMBERMAX);

		$box.css('position', 'absolute').css('width', this.COLWIDTH + 'px');
		
		$box.each(function() {
			
			var tempLeft = (pointer * (self.COLWIDTH + self.COLMARGIN));
			
			if(self.COLCENTERED) {
				tempLeft += parseInt(($('body').innerWidth() / 2) - (((columns - 1) * self.COLMARGIN) + (columns * self.COLWIDTH)) / 2) - self.COLMARGIN;
			}
			
			$(this).css('left', tempLeft + 'px');

			var tempTop = 0;
			if (arr[pointer]) {
				tempTop = arr[pointer];
			}
			$(this).css('top', tempTop + 'px');

			arr[pointer] = tempTop + $(this).outerHeight() + self.COLMARGIN;
			pointer++;
			if (pointer === columns) {
				pointer = 0;
			}
		});
	}
};

function getSwitchSize() {
	return (2* boxLayout.COLWIDTH + 2 * boxLayout.COLMARGIN - 1); //(boxLayout.COLWIDTH + 2 * boxLayout.COLMARGIN);
}

function setContent($box) {

	//debug();

	if ($(window).width() <= getSwitchSize()) {
		
		myFluidGrid.COLWIDTH = $(window).width() - 2 * boxLayout.COLMARGIN;
		
		$box.css('width', myFluidGrid.COLWIDTH + 'px');
		$box.css('margin-left', boxLayout.COLMARGIN + 'px');
		$box.css('margin-right', boxLayout.COLMARGIN + 'px');
		$box.css('position', 'relative');
		$box.css('float', 'right');
		$box.css('top', '');
		$box.css('left', '');
		
		resizeImages($box);
		
	} else {
		
		myFluidGrid.COLWIDTH = boxLayout.COLWIDTH;
		resizeImages($box);
		myFluidGrid.doLayout($box);
		
	}
	
	
}

(function($) {

	/**
	 * resizes an image to newWidth while keeping the aspect ratio
	 * 
	 * @param int
	 *            newWidth
	 */
	$.fn.resizeImage = function(newWidth) {

		var $img = $(this);

		var ratio = parseFloat($img.attr('width'))
				/ parseFloat($img.attr('height'));

		$img.width(newWidth);
		$img.height(Math.ceil(newWidth / ratio));

		return $img;
	};

})(jQuery);