$(function(){
	init(); // init when page loads
});

var init = function()
{
	drawBlocks();
	window.onresize = handleWindowResize;
}

var arrSampleLinks = new Array( 
{ 'title':'poker [flash]','link':'samples/poker.html', 'params':'height=400,width=550' }, 
{'title':'Caledonia Night Sky Co. [site]','link':'http://caledonianightsky.com', 'params':'' }, 
{'title':'JAG Interiors [site]','link':'http://jaginteriors.net', 'params':'' }, 
{'title':'A Little Bit of This [site]','link':'http://abitofthis.com', 'params':'' }, 
{'title':'angles [flash]','link':'samples/angles.html', 'params':'height=755,width=771' }, 
{'title':'billiards [flash]','link':'samples/billiards.html', 'params':'height=400,width=640' },
{'title':'shapes [flash]','link':'samples/shape3D.html', 'params':'height=600,width=771' } 
);
var arrBlocks = new Array();
var drawBlocks = function()
{
	arrSampleLinks.sort( randOrd );
	$( '#ui' ).empty();
	var numTotal = arrSampleLinks.length;
	var numUIWidth = $( '#ui' ).width();
	var htmlUIBlock;
	var strBlockID;
	var numX;
	var numY;
	var numWidth = numUIWidth / numTotal;
	$( '#ui' ).css( 'height', numWidth+'px' );
	for( var i=0; i<numTotal; i++ )
	{
		strBlockID = 'block' + i;
		numX = numWidth * i;
		numY = 0;
		htmlUIBlock = '<div class=uiBlock id=' + strBlockID + ' title="' + arrSampleLinks[ i ].title + '" onclick=handleUIBlockClick("' + i + '") onmouseover=handleUIBlockMouseOver("' + i + '") onmouseout=handleUIBlockMouseOut("' + i + '") ></div>';
		$( '#ui' ).append( htmlUIBlock );
		$( '#'+strBlockID ).css( 'width', numWidth + 'px' );
		$( '#'+strBlockID ).css( 'height', numWidth + 'px' );
		$( '#'+strBlockID ).css( 'top', numY + 'px' );
		$( '#'+strBlockID ).css( 'left', numX + 'px' );
		$( '#'+strBlockID ).css( 'background-color', colorBase );	
	}
}

var handleWindowResize = function()
{
	drawBlocks();
}
	
var colorBase = '#ffffff';
var handleUIBlockClick = function( index )
{
	var link = arrSampleLinks[ index ].link;
	var params = arrSampleLinks[ index ].params;
	
	if( params != '' )
	{
		launchPopup( link, params );
	}
	else
	{
		launchNewWin( link );
	}
}
var handleUIBlockMouseOver = function( index )
{
	var elem = '#block' + index;
	tracer( arrSampleLinks[ index ].title );
	$(elem).stop( true, true ); // stop animation, if necessary
	$(elem).css( 'background-color', randomColor() );
}
var handleUIBlockMouseOut = function( index )
{
	var elem = '#block' + index;
	tracer( '' );
	//$(elem).css( 'background-color', colorBase );
	$(elem).animate( { backgroundColor: colorBase }, 'slow' );
}

var popUpWin;
var launchPopup = function( url, params ) 
{
	if( popUpWin )
	{
		popUpWin.close();
	}
	var paramsStatic = params + ',toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,copyhistory=no,left=0, top=0,screenX=0,screenY=0';
	popUpWin = window.open( url, 'popUpWin', paramsStatic );
}
var newWin;
var launchNewWin = function( url ) 
{
	newWin = window.open( url, 'newWin' );
}

var randOrd = function()
{
	var num = 7; // this num should be the length of the array
	return Math.round( Math.random() ) - ( num*0.1 );
}

var randomColor = function()
{
	var intToHex = function(n)
	{
		n = n.toString(16);
		// eg: #0099ff. without this check, it would output #099ff
		if( n.length < 2)
			n = "0"+n;
		return n;
	}
	// random values between 0 and 255, these are the 3 colour values
 	var r = Math.floor(Math.random()*256);
 	var g = Math.floor(Math.random()*256);
 	var b = Math.floor(Math.random()*256);
	
	return '#'+intToHex(r)+intToHex(g)+intToHex(b);
}

var tracer = function( str )
{
	$('#tracer').html( str );
}