var lastStatic = null;

function static_dropdown(id){
	// The mouseout timeout
	var slideTimeout = null;

	// Our slide animation
	var slide = new Fx.Slide($(id + '-main').setStyle('display', 'block'), {
		duration: 1000,
		transition: Fx.Transitions.Pow.easeOut,
		link: 'cancel'
	}).hide();

	// Set up the wrapper to how we want
	$(id + '-main').getParent().setStyles({
		position: 'absolute',
		zIndex: 2
	});

	// When a link it mouseovered
	$(id).addEvent('mouseover', function(){
		// Get the position of the link
		var pos = this.getCoordinates();

		// Position it
		$(this.id + '-main').getParent().setStyle('top', pos.top + pos.height + 'px').setStyle('left', pos.left + 'px');

		// Sliiiiiide it in
		slide.slideIn('vertical');

		if ($(this.id + '-static') && lastStatic != this.id + '-static'){
			//if (lastStatic){
			//	$(lastStatic).setStyle('display', 'none');
			//}

			$(this.id + '-static').animEff = new Fx.Tween($(this.id + '-static').setStyles({
				display: 'block',
				opacity: 0
			}), {
				property: 'opacity',
				duration: 1000
			});

			$(this.id + '-static').animEff.start(0, 1);

			if ($('dd-left-static')){
				if ($('dd-left-static').animEff){
				//	$('dd-left-static').animEff.cancel();
				}

				//$('dd-left-static').setStyle('display', 'none');
			}
			else if ($('dd-right-static')){
				if ($('dd-right-static').animEff){
					$('dd-right-static').animEff.cancel();
				}

				$('dd-right-static').setStyle('display', 'none');
			}

			lastStatic = this.id + '-static';
		}

		// Keep it coloured
		this.addClass('hover');
	}.bind($(id)));

	// When the menu is mouseovered
	$(id + '-main').addEvent('mouseover', function(){
		// Stop the hiding effect
		clearTimeout(slideTimeout);
	});

	$(id).addEvent('mouseover', function(){
		// Stop the hiding effect
		clearTimeout(slideTimeout);
	});

	// Hide it when we're done
	var hideDone = function(){
		$(id).removeClass('hover');
		slide.slideOut('vertical');

		if ($(id + '-static') && $(id + '-static').animEff){
			$(id + '-static').animEff.cancel();
		}

		if ($(id + '-static')){
			$(id + '-static').setStyle('display', 'none');
		}

		if (lastStatic == id + '-static'){

			if ($('dd-left-static')){
				$('dd-left-static').animEff = new Fx.Tween($('dd-left-static').setStyles({
					opacity: 0,
					display: 'block'
				}), {
					property: 'opacity',
					duration: 1000
				});

				$('dd-left-static').animEff.start(0,1);
			}
			else if ($('dd-right-static')){
				$('dd-right-static').animEff = new Fx.Tween($('dd-right-static').setStyles({
					opacity: 0,
					display: 'block'
				}), {
					property: 'opacity',
					duration: 1000
				});

				$('dd-right-static').animEff.start(0,1);
			}

			lastStatic = null;
		}


	};

	// Hide on mouseout
	$(id).addEvent('mouseout', function(){ slideTimeout = setTimeout(hideDone, 50); });
	$(id).addEvent('click', function(event){ event.stop(); });
	$(id + '-main').addEvent('mouseout', function(){ slideTimeout = setTimeout(hideDone, 50); });
}

function static_dropup(id){
	// The mouseout timeout
	var slideTimeout = null;

	// Set up the wrapper to how we want
	$(id + '-main').setStyles({
		position: 'absolute',
		zIndex: 2
	});

	// When a link it mouseovered
	$(id).addEvent('mouseover', function(){

		// Stop the hiding effect
		clearTimeout(slideTimeout);

		// Get the position of the link
		var pos = this.getPosition();
		var menu = $(this.id + '-main').getSize();

		// Position it
		$(this.id + '-main').setStyle('top', pos.y - menu.y + 'px').setStyle('left', pos.x + 'px');

		if ($(this.id + '-main').getStyle('opacity') != 1 || $(this.id + '-main').getStyle('visibility') != 'visible'){
			$(this.id + '-main').setStyles({
				visibility: 'visible',
				opacity: 0
			}).fade('in');
		}

		// Keep it coloured
		this.addClass('hover');
	}.bind($(id)));

	// When the menu is mouseovered
	$(id + '-main').addEvent('mouseover', function(){
		// Stop the hiding effect
		clearTimeout(slideTimeout);
	});

	$(id).addEvent('mouseover', function(){
		// Stop the hiding effect
		clearTimeout(slideTimeout);
	});

	// Hide it when we're done
	var hideDone = function(){
		$(id).removeClass('hover');
		$(id + '-main').fade('out');
	};

	// Hide on mouseout
	$(id).addEvent('mouseout', function(){ slideTimeout = setTimeout(hideDone, 50); });
	$(id + '-main').addEvent('mouseout', function(){ slideTimeout = setTimeout(hideDone, 50); });
}

function static_slide(id, show){

	var slide = new Fx.Slide($('static_menu_' + id).setStyle('display', 'block'), {
		duration: 1000,
		transition: Fx.Transitions.Pow.easeOut,
		link: 'cancel'
	});

	if (!show){
		slide.hide();
	}

	$('static_menu_top_' + id).addEvent('click', function(event){
		slide.toggle();
		event.stop();
	}.bindWithEvent());
}