$(document).ready(function(){
	if($('#viewport').length!=0)
		createSixView();
});

function createSixView(viewdim){
	var viewportdim = 500;
	$('#viewport').css({
		'height':viewportdim+'px',
		'overflow':'hidden',
		'width':viewportdim+'px'
	});

	$('#viewport img').css({
		'width':(viewportdim*2)+'px'
	});

	if(viewdim==null)
	 	viewdim = 150;
	var siximg = Array();
	var mainimg_src = $('#viewport img').attr('src');
	var ul = $('<ul style="width: '+(2*viewdim)+'px;float: left;"></ul>');
	$('#viewport').before(ul);

	for(var i=0; i<6; i++){
		var vpheight = viewdim;
		var li = $('<li style="float: left; overflow: hidden; width: '+viewdim+'px;"></li>');
		siximg[i] = $('<img />').attr('src',mainimg_src);
		li.append(siximg[i]);
		ul.append(li);

		var row = Math.floor(i/2);
		var mtop =  row * (0 - viewdim);
		var mleft = i%2 * (0 - viewdim);
		var sw =  viewdim*2;

		switch(row){
			case 0://row 1
				var percent_reduce = .3;//percentage
				var height_reduction = percent_reduce * vpheight * -1;//pixels
				vpheight += height_reduction;
				mtop += height_reduction/2;
			break;
			case 1://row 2
				var percent_reduce = .4;//percentage
				var height_reduction = percent_reduce * vpheight * -1;//pixels
				vpheight += height_reduction;
				mtop += height_reduction/2;
			break;
		}

		li.css({'height':vpheight+'px'});
		li.mouseover(function(){
			var viewdim = viewportdim;
			var sw = 2*viewdim;
			var i = $(this).prevAll('li').length;
			var row = Math.floor(i/2);
			var mtop =  row * (0 - viewdim);
			var mleft = i%2 * (0 - viewdim);
			$('#viewport img').css({
				'margin': mtop + 'px 0 0 ' + mleft + 'px',
				'width': sw + 'px'
			});
		});

		siximg[i].css({
			'margin': mtop + 'px 0 0 ' + mleft + 'px',
			'width': sw + 'px'
		});
	}
}