// ******************************************************************************************
// ** Reproducing imageMenu / kwicks for prototype+moo.fx.                                 **
// ** A bit of inspiration from kwicks for jquery.                                         **
// ** Most useful resources:                                                               **
// **   http://director-online.com/buildArticle.php?id=1036                                **
// **   http://dev.rubyonrails.org/attachment/ticket/8354/event_mouseenter_106rc1.patch    **
// **   http://devkick.com/components/jquery/kwicks-jquery/                                **
// **                                                                                      **
// ** Natalia@woodstock - 27/Jun/2008                                                      **
// ******************************************************************************************


// ** Start a global variable to avoid hysteresis
var k_timeout = 0;


var imageMenu = {


    // *******************************************************************
    // ** Start function: call parseKwicks if inside right menu         **
    // *******************************************************************
    start: function(){
		if ($('imageMenu')) imageMenu.parseKwicks();
    },



    // *******************************************************************
    // ** Apply changes in size                                         **
    // *******************************************************************
    applyKwicks: function(elements, height_old, height_new, top_old, top_new){
	elements.each(function(element, i){
		var fx1 = new Fx.Styles(element, {duration: 400, transition: Fx.Transitions.quadInOut});
		fx1.custom({
			'top':    [top_old[i],    top_new[i]],
			'height': [height_old[i], height_new[i]]
		});
	    }.bind(this));
    },


    // *******************************************************************
    // ** Capture mouse enter/leave and define changes in size          **
    // *******************************************************************

    parseKwicks: function(){

	var height_open_selected = '160';
	var height_open_others   =  '34';
	var height_closed        =  '55';
	var spacing              =   '4';

	var kwicks = $$('#imageMenu li');

	kwicks.each(function(kwick, i){
		kwick.observe('mouseenter', function(e){

			if (k_timeout <= 0) {

			    clearTimeout(this.timeout);

			    var h_new = {};
			    var h_old = {};
			    var t_old = {};
			    var t_new = {};
			    var top = 0;
			
			    kwicks.each(function(other, j){

				    h_old[j] = parseInt(other.getStyle('height'));
				    if (other != kwick){
					h_new[j] = height_open_others;
				    } else {
					h_new[j] = height_open_selected;
				    }

				    t_old[j] = parseInt(other.getStyle('top'));
				    t_new[j] = top;
				    top = parseInt(top) + parseInt(h_new[j]) + parseInt(spacing);

				});

			    imageMenu.applyKwicks(kwicks, h_old, h_new, t_old, t_new);

			    k_timeout = 1;
			    this.timeout = setTimeout("k_timeout = 0;", 400);
			}

		    });
	    });
	
	
	$('imageMenu').observe('mouseleave', function(e){

		var h_new = {};
		var h_old = {};
		var t_old = {};
		var t_new = {};
		var top = 0;

		kwicks.each(function(other, j){

			h_old[j] = parseInt(other.getStyle('height'));
			h_new[j] = height_closed;

			t_old[j] = parseInt(other.getStyle('top'));
			t_new[j] = top;
			top = parseInt(top) + parseInt(h_new[j]) + parseInt(spacing);

		    });

		    imageMenu.applyKwicks(kwicks, h_old, h_new, t_old, t_new);

		    k_timeout = 1;
		    this.timeout = setTimeout("k_timeout = 0;", 200);
	    });

    }
};
 
document.observe("dom:loaded", function() {
	imageMenu.start();
    });
////////////////////////////////////////////////////////////////