var gpfree;

function otw(el, s, e, d, t){

	if(!t) t = 0;
	if(!el) return;
	var val;
	if(t < d){
		if($(el).tout){
			clearTimeout($(el).tout);
		}

		$(el).tout = setTimeout("otw(\'" + el + "\'," + s + "," + e + "," + d + "," + (t + 1) + ")", 10);
		val = (e * Math.sin(t/d * (Math.PI/2)) + s);
	} else {
		val = s + e;
	}
	$(el).setStyle({opacity:val});

}

function mwr(e){
	var a = Event.findElement(e, "area");
	var i = parseInt(a.id.substring(1));
	//if(i > 7) i = i + 1;
	var eid = "lp" + i;
	btw(eid, 0, 10, 10);
	mcolor(eid);


}

function mwr1(e){


	$("indexcolors").hide();

	var a = Event.findElement(e, "area");
	var i = parseInt(a.id.substring(1));
	//if(i > 7) i = i + 1;
	var eid = "lp" + i;
	btw(eid, 10, -10, 10);

}

function mcolor(id){

	var r = {2:1, 3:2}
	var c = {3:-1, 4:-1}
	var h = {3:2};


	i = parseInt(id.substring(2));
	$('igpfree').update(gpfree[i]);
	if(i > 7) i = i - 1;


	var row = (Math.floor((i - 1) / 4));
	var col = i - row * 4 - 1;

	var x = 197 * col;
	var y = 178 * row;

	if(c[col+1]) x+=c[col+1];
	if(r[row+1]) y+=r[row+1];

	$("colorpic").style.left = -x + "px";
	$("colorpic").style.top = -y + "px";

	var hh = 178;
	if(h[row+1]) hh += h[row+1];

	$("indexcolors").style.height = hh + "px";
	$("indexcolors").style.left = 18 + x + "px"
	$("indexcolors").style.top = 18 + y + "px";

	//$("indexcolors").setStyle({opacity:0});
	$("indexcolors").show();
	//otw("indexcolors",0,1,10);
}