/*
jQuery.imageMenu
Basé sur phatfusion image Menu. pour mootools (http://www.phatfusion.net/imagemenu/index.htm);
*/

function imageMenu()
{
    var self = this;
    
    this.build = function(selectMenu,selectElem,extendWidth,selectAppearOnHover)
    {
        self.menu = $(selectMenu)
        self.elems = $(selectElem,$(selectMenu));
        self.selectAppearOnHover = selectAppearOnHover;
        self.menuWidth = self.menu.width();
        self.extendWidth = extendWidth;
        self.elems.hover(self.rollHover,self.rollOut);
        
        $(self.selectAppearOnHover,self.elems).animate({'opacity':0},'fast');

        self.menu.css('position','relative');
        self.menu.append('<div style="position:absolute;height:'+$(selectMenu).height()+'px;width:'+($(selectMenu).width()*2)+'px;clip: rect(0px '+$(selectMenu).width()+'px '+$(selectMenu).height()+'px 0px);" class="imageMenuContainer"></div>');
        self.elems.appendTo($('.imageMenuContainer',self.menu));
        
        self.elems.eq(self.elems.length-1).width(self.menuWidth);
        self.elems = self.elems.slice(0,self.elems.length-1)
    }
    
    this.rollHover = function()
    {
        var menuWidth = self.menuWidth;
        var singleWidth = Math.floor(menuWidth/(self.elems.length+1));

        var outWidth = Math.floor((menuWidth-(singleWidth+self.extendWidth))/(self.elems.length));
        var hoverWidth = menuWidth - outWidth * (self.elems.length);
        //console.debug(outWidth+' '+hoverWidth)
        $(this).removeClass('out');

        $(self.selectAppearOnHover,self.elems).stop();
        $(self.selectAppearOnHover,self.elems).animate({'opacity':0},'fast');

        $(self.selectAppearOnHover,this).stop();
        $(self.selectAppearOnHover,this).animate({'opacity':1},'fast');

        self.elems.stop();
        $(self.elems).animate({'width':outWidth},'fast');
        $(this).stop();
        $(this).animate({'width':hoverWidth},'fast');
    }
    
    this.rollOut = function()
    {
        var menuWidth = self.menu.width();
        var singleWidth = Math.floor(menuWidth/(self.elems.length+1));
        
        $(this).addClass('out');

        $(self.selectAppearOnHover,this).stop();
        $(self.selectAppearOnHover,this).animate({'opacity':0},'fast');
        
        self.elems.stop();
        self.elems.animate({'width':singleWidth},'fast');
    }
}