//	Ease of DOM Manipulation.
var $ = function(id){
	switch(typeof(id)){
		case 'string':
			return document.getElementById(id);
		default:
			return null;
	}
}

//	Collection of util classes.
var Util = function(){
	//	Generates and returns a random number lesser than the specified limit.
	this.rand = function(limit){
		return Math.floor(Math.random() * limit);
	}
}

//	Behavior of page.
var Page = function(){
	//	Grid representation in the page.
	this.grid = [
					['1_1', '1_2'],
					['2_1', '2_2'],
					['3_1', '3_2']
				];
	
	//	Utility constants.
	this.PLACEHOLDER_PREFIX = 'ph_';
	this.CLIP_NUMBER__PREFIX = 'clip_';
	this.GRID_NUMBER__PREFIX = 'grid_';
	this.GRID_COUNT = 3;
	this.GRID_ITERATE_TIMEOUT = 6000;
	this.FLIP_TIMEOUT = 50;

	//	Randomizes the grid and flips every element.
	this.randomizeGrid = function(){
		var size = this.grid.length * this.grid[0].length;
		for(var i=0; i<size; i++){
			var from = {
				x : util.rand(3),
				y : util.rand(2)
			}
			var to = {
				x : util.rand(3),
				y : util.rand(2)
			}
			var temp = this.grid[to.x][to.y];
			this.grid[to.x][to.y] = this.grid[from.x][from.y];
			this.grid[from.x][from.y] = temp;
		}
		this.flip(0, 0);
		setTimeout('page.randomizeGrid();', this.GRID_ITERATE_TIMEOUT);
	}

	//	Flips the element in the specific index with reference to the present state of the grid.
	this.flip = function(i, j){
		//	Flip the element.
		var index = this.grid[i][j].split('_');
		var id = this.PLACEHOLDER_PREFIX + (index[0]*1) + '_' + (index[1]*1);
		var className = this.CLIP_NUMBER__PREFIX + (i+1) + '_' + (j+1);
		this.switchClassNames($(id), className);	//	Switch clip no.
		//	Increment.
		if(++j == this.grid[0].length){
			++i;
			j = 0;
		}
		//	Flip next element if within grid limit.
		if(i < this.grid.length){
			setTimeout('page.flip(' + i + ', ' + j + ');', this.FLIP_TIMEOUT);
		}
	}

	//	Switches the class names in the given element to the given classname.
	//	When the condition matches, the class is replaced, else added to the end.
	this.switchClassNames = function(element, className){
		if(null != element){
			var classNames = element.className;
			classes = classNames.split(' ');
			//	Loop infinitely over class array. If class already 
			//	exists, replace and break iteration.
			//	Else exception will occur. Then, add to end of array.
			var i = 0;
			try{
				while(true){
					if(classes[i].indexOf(this.CLIP_NUMBER__PREFIX) >= 0){
						classes[i] = className;
						break;
					}else if(classes[i].indexOf(this.GRID_NUMBER__PREFIX) >= 0){
						//	Iterate through grids.
						var gridNo = classes[i].split('_')[1] * 1;
						gridNo = (gridNo % this.GRID_COUNT) + 1;
						classes[i] = this.GRID_NUMBER__PREFIX + gridNo;
					}
					++i;
				}
			}catch(e){
				classes[i] = className;
			}
			//	Serialize the class names and set it.
			classNames = '';
			for(var i=0; i<classes.length; i++){
				classNames += classes[i] + ' ';
			}
			element.className = classNames;
		}
	}
}

var Loader = function(){
	this.LOAD_INTERVAL = 3000;
	
	this.loadInBg = function(){
		/*var loader = $('loader');
		var interval = this.LOAD_INTERVAL;
		for(var i=2; i<=page.GRID_COUNT; i++){
			setTimeout('loader.loadGridClass(' + i + ')', interval);
			interval += this.LOAD_INTERVAL;
		}*/
		$('loader1').className = 'hide ' + page.GRID_NUMBER__PREFIX + '2';
		$('loader2').className = 'hide ' + page.GRID_NUMBER__PREFIX + '3';
	}
	
	/*this.loadGridClass = function(gridNo){
		$('loader').className = 'hide ' + page.GRID_NUMBER__PREFIX + gridNo;
	}*/
}

//	Instantiations.
var util = new Util();
var page = new Page();
var loader = new Loader();

//	Page load trigger.
var startup = function(){
	loader.loadInBg();
	setTimeout('page.randomizeGrid();', page.GRID_ITERATE_TIMEOUT);
}