var bytesLoaded = 0;
	var documentLoaded = 0;
	
	$("#loadingBG").fadeIn(1);
	$("#loadingProgress").fadeIn(1);
	
	function loaded(bytes) {
		
		bytesLoaded += bytes;
		var pc = (bytesLoaded / totalSize) * 100;
		
		$("#loadingProgress").stop().animate({"width": pc + "%"}, 500, false, function() {
			
			if (pc >= 99) hideLoader();
			
		});
		
	}
	
	function hideLoader() {
		
		if (!documentLoaded) {
			
			clearTimeout(loaderTimeout);
			$("#loadingBG").fadeOut(500);
			$("#loadingProgress").fadeOut(500);
			
			documentLoaded = true;
			
		}
		
	}
	
	var loaderTimeout = setTimeout(function() {
		
		$("#loadingProgress").css({"visibility": "visible"});
		$("#loadingBG").css({"visibility": "visible"});
		
	}, 500);
	
	// -- INIT ------------------------------------------------------------------------------------------------------------------------------------------------------//
	
	var cells = [
		[new Object()],
		[new Object()],
		[new Object()],
		[new Object()],
		[new Object()]
	];
	
	var cellWidths = [
		[9],
		[9],
		[64],
		[9],
		[9]
	];
	var cellWidthsDesired = [
		[9],
		[9],
		[64],
		[9],
		[9]
	];
	var cellWidthsIterator = [
		[0],
		[0],
		[0],
		[0],
		[0]
	];
	
	var cellHeights = [
		[100],
		[100],
		[100],
		[100],
		[100]
	];
	var cellHeightsDesired = [
		[100],
		[100],
		[100],
		[100],
		[100]
	];
	var cellHeightsIterator	= [
		[0],
		[0],
		[0],
		[0],
		[0]
	];
	
	var cellDesiredW = 64;
	var cellDesiredH = 100;
	var cellNormalW = 9;
	var cellNormalH = 100;
	
	var xcells = 5;
	var ycells = 1;
	
	var currentCell = new Array();
	var cellTexts = new Array();
	
	var timeout = new Array();
	
	var iterator = null;
	
	var iteratorFrq			= 10; // polling frequency (orig: 1)
	var iteratorFrames	= 10; // frames per motion (orig: 17)
	
	
	// -- INIT ------------------------------------------------------------------------------------------------------------------------------------------------------//
	
	$(document).ready(function() {
		
		$("body").ready(function() {
			
			for (var i = 0; i <= xcells-1; i++) {
				for (var j = 0; j <= ycells-1; j++) {
					
					cells[i][j] = $("#cell_" + i + "_" + j);
					
				}
			}
			
			$(".cell div").hide();
			
			$(".cell").bind("mouseover", function() { cmsAcc_over(this); return true; });
			$(".cell").bind("mouseout", function() { clearTimeout(timeout); return true; });
			iterator = setInterval(cmsAcc_iterator, iteratorFrq);
			cmsAcc_iterator();
			
			cmsAcc_over($("#cell_2_0").get(0));
			
		});
		
	});
	
	
	// -- ITERATOR --------------------------------------------------------------------------------------------------------------------------------------------------//
	
	
	function cmsAcc_iterator() {
		
		for (var i = 0; i <= xcells-1; i++) {
			for (var j = 0; j <= ycells-1; j++) {
				
				if (Math.abs(cellWidths[i][j] - cellWidthsDesired[i][j]) > Math.abs(cellWidthsIterator[i][j])) {
					
					cellWidths[i][j] += cellWidthsIterator[i][j];
					finishX = false;
					
				} else {
					
					cellWidths[i][j] = cellWidthsDesired[i][j];
					cellWidthsIterator[i][j] = 0;
					finishX = true;
					
				}
				
				if (Math.abs(cellHeights[i][j] - cellHeightsDesired[i][j]) > Math.abs(cellHeightsIterator[i][j])) {
					
					cellHeights[i][j] += cellHeightsIterator[i][j];
					
				} else {
					
					cellHeights[i][j] = cellHeightsDesired[i][j];
					cellHeightsIterator[i][j] = 0;
					
					if (finishX && currentCell.x == i && currentCell.y == j) {
						
						$("#cell_" + i + "_" + j + "_div").show();
						$("#cell_" + i + "_" + j + "_div_2").show();
						
					}
					
				}
				
			}
		}
		
		for (var i = 0; i <= xcells-1; i++) {
			for (var j = 0; j <= ycells-1; j++) {
				
				cells[i][j].css({"width" : cellWidths[i][j] + "%", "height": cellHeights[i][j] + "%"});
				
			}
		}
		
	}
	
	
	// -- ON MOUSE OVER ---------------------------------------------------------------------------------------------------------------------------------------------//
	
	
	function cmsAcc_over(obj) {
		
		//var n = obj.id.replace(/[^\d]/ig, "");
		
		var reg = /cell_(\d)_(\d)/i;
		var match = reg.exec(obj.id);
		var x = match[1];
		var y = match[2];
		
		clearTimeout(timeout);
		timeout = setTimeout("cmsAcc_change(" + x + ", " + y + ")", 50);
		
	}
	
	
	// -- CHANGE DESIRED --------------------------------------------------------------------------------------------------------------------------------------------//
	
	
	function cmsAcc_change(x, y) {
		
		currentCell = {'x' : x, 'y' : y};
		
		clearInterval(iterator);
		
		for (var i = 0; i <= xcells - 1; i++) {
			for (var j = 0; j <= ycells - 1; j++) {
				
				cellWidthsDesired[i][j]		= (i == x) ? cellDesiredW : cellNormalW;
				cellHeightsDesired[i][j]	= (j == y) ? cellDesiredH : cellNormalH;
				
				//cellWidthsIterator[i][j]	= Math.round((cellWidthsDesired[i][j]	- cellWidths[i][j])		/ iteratorFrames);
				//cellHeightsIterator[i][j]	= Math.round((cellHeightsDesired[i][j]	- cellHeights[i][j])	/ iteratorFrames);
				cellWidthsIterator[i][j]	= (cellWidthsDesired[i][j]	- cellWidths[i][j])		/ iteratorFrames;
				cellHeightsIterator[i][j]	= (cellHeightsDesired[i][j]	- cellHeights[i][j])	/ iteratorFrames;
				
				if (i != x || j != y) {
					
					$("#cell_" + i + "_" + j + "_div").hide();
					$("#cell_" + i + "_" + j + "_div_2").hide();
					
				}
				
			}
		}
		
		iterator = setInterval(cmsAcc_iterator, iteratorFrq);
		
	}