window.addEvent('domready',function(){
    new hOokHeader();
});

var hOokHeader = new Class({
    fx:{},
    options: {
        controlsDiv: 'controls',
        panelStyle:{'top':'0px','position':'relative'},
        'login-panel':{
            open:'login_header_open.png',
            close:'login_header.png'
        },
        'search-panel':{
            open:'search_header_open.png',
            close:'search_header.png'
        }
    },
    initialize: function(){
        if ($(this.options.controlsDiv)){
            var imgs = [];
            $(this.options.controlsDiv).setStyle('top','32px');
            $each($(this.options.controlsDiv).getChildren(),function(panel){
                var header = panel.getFirst();
                var div = panel.getLast();
                panel.setStyles(this.options.panelStyle);
                header.addEvent('click',this.toglePanel.pass([panel,header],this));
                var img = this.options[panel.id];
                var url = header.getStyle('background-image');
                url = url.replace(img.close,img.open).match(/\((.*)\)/i);
                if (url[1]) imgs.push(url[1]);
            },this);
            new Asset.images(imgs);
        }
    },

    toglePanel:function(panel,header){
        if (!this.fx[panel.id]){
            this.fx[panel.id] = new Fx.Styles(panel,{wait:true,duration:500,transition: Fx.Transitions.Expo.easeOut});
        }
        var fx = this.fx[panel.id];
        var img = this.options[panel.id];
        if (panel.getStyle('top').toInt()==0){
            var url = header.getStyle('background-image');
            url = url.replace(img.close,img.open);
            header.setStyle('background-image',url);
            fx.start({'top':-60});
        }else{
            var url = header.getStyle('background-image');
            url = url.replace(img.open,img.close);
            header.setStyle('background-image',url);
            fx.start({'top':0});
        }



    }
});