var showing = false;

function showSearch() {
	var searchPanel = document.getElementById("searchPanel");
	if (!showing) {
		new Effect.Move(searchPanel, { x:640, y:0, mode:'absolute' });
		showing = true;
	} else {
		new Effect.Move(searchPanel, { x:640, y:-190, mode:'absolute' });
		showing = false;
	}

}

function showImage(id, startX, startY, startWidth, startHeight, targetX, targetY) {
	//show image is limited to 1, so that it doesnt flicker on mouseover by capturing more than one event
	
	$(id).setStyle({ left:startX+'px', top:startY+'px', height:startHeight+'px', width:startWidth+'px' });
	
	new Effect.Appear(id, { duration: 0.5, queue: { position: 'end', scope: id, limit:1 } });
	new Effect.Move(id, { x: targetX, y: targetY, mode: 'relative' });
	new Effect.Scale(id, 200);
	
}
function hideImage(id, returnX, returnY, returnWidth, returnHeight) {
	//hide image is limited to 2, so that the hide image can be queued if you move off the map while it is still fading in
	new Effect.Fade(id, { duration: 0.5, from: 1, to: 0, queue: { position: 'end', scope: id, limit:2 }, afterFinish: function() { $(id).setStyle({ width:returnWidth+'px', height:returnHeight+'px', left:returnX+'px', top:returnY+'px' }); }});
	//new Effect.Scale(id, 100);
}
function scaleUp(id) {
	new Effect.Scale(id, 200);
	new Effect.Fade(id, { duration: 1.0, from: 0, to: 1.0});
}
function scaleDown(id, returnX, returnY) {
	$(id).setStyle({ width:returnX+'px', height:returnY+'px' });
}
function test(id, to, width) {
	new Effect.Morph(id, { style: {width:'0px'}, afterFinish: function() { flip(id, to, width)}, duration:0.5, queue: { position: 'end', scope: id, limit:1 }});
}
function flip(id, to, width) {
	element = document.getElementById(id);
	element.src = "images/"+id+"_"+to+".png";
	new Effect.Morph(id, { style: {width:width+'px'}, duration:0.5, queue: { position: 'end', scope: id, limit:2 }});
}