$(document).ready(function(){
    BindShowContent('text_categories','layer_categories');    
    BindShowContent('text_brand','layer_brand');
});

function BindShowContent(objIn,objMainContent){
    var timer ;
    var show_status = false;
    
    var objbutton = $('#'+objIn);
    var objContent = $('#'+objMainContent);
   
    var contentWidth = objContent.css('width');
    var contentHeight = objContent.height();
    var contentLeft = objContent.css('left');
    if(contentLeft == '0px' || contentLeft == 'auto'){
        contentLeft = '-'+(parseInt(contentWidth)-parseInt(objbutton.width()))/2 + 'px';
    };
    objContent.css('left','0px');
    objContent.css('width','0px');
    objContent.css('height','0px');
    objbutton.click(function(){
        if(!show_status){
            showcontent(objMainContent,contentWidth,contentHeight,contentLeft);
        };
    });
    
    objbutton.mouseover(function(){
        if(timer){
            window.clearTimeout(timer);
        }
    }).mouseout(function(){
        timer = window.setTimeout('hidecontent("' + objMainContent + '")','800');
    });
    
    objContent.mouseover(function(){
        window.clearTimeout(timer);
    }).mouseout(function(){
        timer = window.setTimeout('hidecontent("' + objMainContent + '")','800');
    });
}

function hidecontent(objMainContent){
    $('#'+objMainContent).animate({
        width:"0px",
        height:"0px",
        left:"0px"
    },
    500,
    function(){
        $(this).hide();
        show_status = false;
    });
}

function showcontent(objMainContent,contentwidth,contentheight,contentleft){
    var obj = $('#'+objMainContent);
    $('#'+objMainContent).animate({
       width:contentwidth,
       height:contentheight,
       left:contentleft
    },
    500,
    function(){
        show_status = true;
        var test = 0;
    });
//    alert(contentleft);
}