var Menu = function(el) { this.init(el); }

Menu.prototype = {
    pad: 10,

    /* Init menu. el is the ul element */
    init: function(el) {
        var self = this;
        self.$ul = $ul = $(el);
        if( $ul.length < 1 ) return;        
        
        $('ul', $ul).each( function(){ 
            var $p = $(this).parent();
            var color = color_format( $('> a >img', $p[0] )[0].style.color  || overcolor ).replace('#','');
            var w = $(this).width();
            $(this).css({
                "background": "url('/img/colorimage.php?color="+color+"&alpha=50')",
                "width" : ($.browser.msie)? (w+(self.pad*2))+'px' : 'auto'
            });
            var linkcolor = colorSaturation(color, 0.9);
            $('li img', this).css('color', '#'+linkcolor);
        }).show(0).corner({tl:{radius:0}, tr:{radius:10}}).hide(0);


        //Events
        $('> li', $ul).hover(
            function(){
                self.open(this);
            },
            function(){
                if( $('ul', this).length == 0 ) {
                    $(this).css({'background':'transparent'}).each(function(){$('> div', this).remove() });
                }
            }
        );
        $("ul", $ul).hover(
            function(){},
            function(){ self.close(this) }
        );

        $("ul a").click( function() {
            self.close();
        });
    },

    open: function(el) {
        var self = this;
        var $m = $(el);
        self.close();
        
        // Show menu tab highlight
        if( $('ul',$m).length > 0 ){
            radius = 0; 
            height = 30;
        } else {
            radius = 10;
            height = 0
        }
        var img = $('> a > img', $m)[0];
        var color = color_format( img.style.color  || overcolor ).replace('#','');
        var w = img.width;
        $m.css({
            'background' : "url('/img/colorimage.php?color="+color+"&alpha=50')",
            'width' : ($.browser.msie)? ((self.pad*2) + w)+'px': 'auto'
            }).corner({bl:{radius:radius}, br:{radius:radius}}).css({'height' : (height)? height+'px' : ''});

        // Show popup menu
        $("ul", $m).show();
        $('img', $m).iepngfix();

    },
    
    close: function(){
        var self = this;
        $ul = self.$ul;
        $('ul:visible', $ul).hide().parent().
            css({'background':'transparent'}).
            each(function(){ $('> div', this).remove() });
    }
};

function colorSaturation(color, amount)
{
    if( amount < 0 ) amount = 0;
    if( amount >= 1) amount = 0.999;
    color = color.replace(/^#/,'');
    var rgb = [
        parseInt(color.substring(0,2), 16)/255,
        parseInt(color.substring(2,4), 16)/255, 
        parseInt(color.substring(4,6), 16)/255
    ];

    var hsl = rgb2hsl(rgb);
    hsl[2] = amount;
    rgb = hsl2rgb(hsl);
    var ret = rgb2html(parseInt(rgb[0]*255),parseInt(rgb[1]*255), parseInt(rgb[2]*255));
    return ret;
}

function rgb2hsl(rgb) 
{
var min, max, delta, h, s, l;
    var r = rgb[0], g = rgb[1], b = rgb[2];
    min = Math.min(r, Math.min(g, b));
    max = Math.max(r, Math.max(g, b));
    delta = max - min;
    l = (min + max) / 2;
    s = 0;
    if (l > 0 && l < 1) {
      s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l));
    }
    h = 0;
    if (delta > 0) {
      if (max == r && max != g) h += (g - b) / delta;
      if (max == g && max != b) h += (2 + (b - r) / delta);
      if (max == b && max != r) h += (4 + (r - g) / delta);
      h /= 6;
    }
    return [h, s, l];
}

function hsl2rgb(hsl)
{
    var m1, m2, r, g, b;
    var h = hsl[0], s = hsl[1], l = hsl[2];
    m2 = (l <= 0.5) ? l * (s + 1) : l + s - l*s;
    m1 = l * 2 - m2;
    return [hue2rgb(m1, m2, h+0.33333),
        hue2rgb(m1, m2, h),
        hue2rgb(m1, m2, h-0.33333)]
}

function hue2rgb(m1,m2,h)
{
    h = (h < 0) ? h + 1 : ((h > 1) ? h - 1 : h);
    if (h * 6 < 1) return m1 + (m2 - m1) * h * 6;
    if (h * 2 < 1) return m2;
    if (h * 3 < 2) return m1 + (m2 - m1) * (0.66666 - h) * 6;
    return m1;
}

$(document).ready( function() {
    var menu = new Menu( $('#menu') );
    var pagemenu = new Menu( $('#page-menu') );
});