var increase=new Array();
var decrease=new Array();

function enlarge(id) {
	var arr=id.split("&&");
	var index=arr[0];
	if(decrease[index] !=null) {
		clearTimeout(decrease[index]);
		decrease[index]=null;
	}
	var img;
	var maxwidth=150;//arr[1];
	var maxheight=150;//arr[2];

	img=document.getElementById(id);
	//store original top and left values in rel attribute if there is nothing currently in there
	if ((img.rel == "" || img.rel == undefined)) {
		// Grab values from css stylesheet and put them inline so they can be accessed on a per picture basis
		// *NOTE* stylesheet must be 3rd in the document as specified below, otherwise specify the number below
		var strCSS = 'cssRules';  
		if(document.all) {  
		 	strCSS = 'rules';  
		}
		img.style.top = document.styleSheets[2][strCSS][0].style['top'];
		img.style.width = document.styleSheets[2][strCSS][0].style['width'];
		img.style.height = document.styleSheets[2][strCSS][0].style['height'];
		img.rel = parseInt(img.style.left) + '&&' + parseInt(img.style.top);
	}

	//Bring to the front
	img.style.zIndex=2;

	//Change border color
	img.style.border = "solid 2px #CC0000";

	//store original width and height
	//img.rel = parseInt(img.style.width) + '&&' + parseInt(img.style.height);

	var iniwidth=parseInt(img.style.width);
	var iniheight=parseInt(img.style.height);

	//Initiall set width and height to initial values
	var width = iniwidth;
	var height = iniheight;

	if((height<maxheight) || (width<maxwidth)) {
		height*=1.1;
		width*=1.1;
		img.style.height = height + 'px';
		img.style.width = width + 'px';
		increase[index]=setTimeout( function() {
			enlarge(id)
		}, 5);
	}
	if(height>maxheight) {
		height = maxheight;
		img.style.height = height + 'px';
	}
	if(width>maxwidth) {
		width = maxwidth;
		img.style.width = width + 'px';
	}

	var widthdiff=(width-iniwidth)/2;
	img.style.left = (img.offsetLeft-widthdiff) + 'px';
	var heightdiff=(height-iniheight)/2;
	img.style.top = (img.offsetTop-heightdiff) + 'px';
}

function reduce(id) {
	var arr=id.split("&&");
	var index=arr[0];
	var orgPos,left,top;
	if(increase[index] !=null) {
		clearTimeout(increase[index]);
		increase[index]=null;
	}
	var img;
	var arr=id.split("&&");
	var minwidth=100;
	var minheight=100;

	img=document.getElementById(id);
	img.style.border = "solid 2px #000088";

	var iniwidth=parseInt(img.style.width);
	var iniheight=parseInt(img.style.height);

	var width = iniwidth;
	var height = iniheight;

	if((height>minheight) || (width>minwidth)) {
		height = Math.floor(height*0.9);
		width = Math.floor(width*0.9);
		img.style.height = height + 'px';
		img.style.width = width + 'px';
		decrease[index]=setTimeout( function() {
			reduce(id)
		}, 5);
	}
	if(height<minheight) {
		height = minheight;
		img.style.height = height + 'px';
	}
	if(width<minwidth) {
		width = minwidth;
		img.style.width = width + 'px';
	}

	var widthdiff= Math.floor((width-iniwidth)/2);
	img.style.left = (img.offsetLeft-widthdiff) + 'px';
	var heightdiff= Math.floor((height-iniheight)/2);
	img.style.top = (img.offsetTop-heightdiff) + 'px';

	if((width==minwidth) && (height==minheight)) {
		img.style.zIndex=1;
		if(img.rel != "" && img.rel != undefined) {
			orgPos = img.rel.split("&&");
			left = orgPos[0];
			top = orgPos[1];
			//alert(left + ' ' + top)
			img.style.left = left + 'px';
			img.style.top = top + 'px';
			img.rel = "";
		}
	}
}