var pos_x;
var pos_y;
var enabled = $('flash');
var delay = 0.05;
var delay_roll = 0.5;
var can_slide_out = true;
var slide_out  = [[-7,-7],[-7-30, -7],[-7, -7-32],[-7-30, -7-32]];
var slide_over = [[-7,-7],[7, -7]    ,[-7, 7]    ,[7, 7]];
var links			 = ['/materialy.html','/doplnky.html','/realizace.html','/sluzby.html'];

document.observe("dom:loaded", function () {
	if ($('fl-1') == null) return;

	$('fl-1').observe("click", roll);
	$('fl-2').observe("click", roll);
	$('fl-3').observe("click", roll);
	$('fl-4').observe("click", roll);

	$('fl-1').observe("mouseover", fl_mouseover);
	$('fl-2').observe("mouseover", fl_mouseover);
	$('fl-3').observe("mouseover", fl_mouseover);
	$('fl-4').observe("mouseover", fl_mouseover);

	$('fl-1').observe("mouseout", fl_mouseout);
	$('fl-2').observe("mouseout", fl_mouseout);
	$('fl-3').observe("mouseout", fl_mouseout);
	$('fl-4').observe("mouseout", fl_mouseout);
});

function getXY(e) {
  x = (window.Event) ? e.pageX : event.clientX;
  y = (window.Event) ? e.pageY : event.clientY;

  pos_x = x;
	pos_y =	y;
}


function fl_mouseover(ev)
{
	if (can_slide_out)
	{
		enabled = this;
		var id = parseInt(this.id.substr(3, 1));
		new Effect.Move(enabled.down(), { x: slide_over[id-1][0], y: slide_over[id-1][1], mode: 'absolute',duration: delay,queue: { position: 'end', scope: enabled.id } });
		new Effect.Opacity($("fl-"+id+"-imgc"), { from: 0, to: 0.7, duration: delay,queue: { position: 'end', scope: "c"+enabled.id } });
		new Effect.Opacity($("fl-"+id+"-img"), { from: 0.7, to: 0, duration: delay,queue: { position: 'end', scope: "bw"+enabled.id } });
	}
	can_slide_out = false;
}

function fl_mouseout(ev)
{
	getXY(ev);
	if (document.elementFromPoint(pos_x, pos_y) != null)
	{
		var id = document.elementFromPoint(pos_x, pos_y).id;
		if (id.indexOf(enabled.id)==0) return;
	}
	
	id = parseInt(this.id.substr(3, 1));
	new Effect.Move($(enabled.id).down(), { x: 0, y: 0, mode: 'absolute',duration: delay,queue: { position: 'end', scope: enabled.id } });
	new Effect.Opacity($("fl-"+id+"-img"), { from: 0, to: 0.7, duration: delay,queue: { position: 'end', scope: "bw"+enabled.id } });
	new Effect.Opacity($("fl-"+id+"-imgc"), { from: 0.7, to: 0, duration: delay,queue: { position: 'end', scope: "c"+enabled.id } });
	can_slide_out = true;
}

function roll(ev)
{
	$$('*').each(function(el){
		el.stopObserving();
	});
	
	id = parseInt(this.id.substr(3, 1));
	//alert(this.down().id);
	var div_array = ["fl-1","fl-2","fl-3","fl-4"];

	for (i = 0; i < 4; i++)
	{
		if ($(div_array[i]).id.substr(3, 1) != id) Effect.Fade(div_array[i], { duration: delay_roll });
		//if ($(div_array[i]).id.substr(3, 1) != id) Effect.Morph(div_array[i], { style: 'width: 0xp;', duration: delay_roll });
	}

	new Effect.Move($('submenu'), { x: -250 , mode: 'relative',duration: delay_roll});
	new Effect.Move($('logo'), { x: -100 , mode: 'relative',duration: delay_roll});
	new Effect.Move(this.down(), { x: slide_out[id-1][0] , y: slide_out[id-1][1], mode: 'absolute',duration: delay_roll});
	new Effect.Move($("fl-"+id+"-span"), { x: 10 , y: 8, mode: 'absolute',duration: delay_roll});
	new Effect.Morph(this, {
		style: 'background-color: #990000; top: 0px; left: 1px; height: 450px;', // CSS Properties
		duration: delay_roll, afterFinish: redirect // Core Effect properties
	});

	//alert('boo');

	//alert(id);
}

function redirect(ev)
{
	var id = parseInt(enabled.id.substr(3, 1));
	window.location = links[id-1];
	
}