var featureList = {
    
    vars : {
        content_out_state : 1,
        start_closed : false
    },
    
    init : function(){
        $("#feature_list_close").click(function(){
            featureList.vars.content_out_state = 0;
            featureList.animateContentOut();
        });
        
        if(this.vars.start_closed)
        {
            this.vars.content_out_state = 0;
            $("#feature_list").css({ "width" : 120, "display" : "block" });
            $("#content_out").css("opacity", 0);
            
        }
        
        $("#tabs a").click(function(){
            
            var outputClass = null;
            
            switch(this.id)
            {
                case "tab1":
                    outputClass = "bkg_violet";
                    break;
                
                case "tab2":
                    outputClass = "bkg_purple";
                    break;
                
                case "tab3":
                    outputClass = "bkg_grey";
                    break;
            }
            
            $("#output").removeClass("bkg_violet");
            $("#output").removeClass("bkg_purple");
            $("#output").removeClass("bkg_grey");
            
            $("#output").addClass(outputClass);
            
            featureList.vars.content_out_state = 1;
            featureList.animatefeatureList();
        });
        
    },
    
    animateContentOut : function(){
        
        var opacity = (this.vars.content_out_state == 0)? 0 : 1;
        $("#content_out").animate({
            "opacity" : opacity
        },{
            "easing" : "swing",
            "duration" : 1000,
            "complete" : function(){
                var opacity = parseInt($(this).css("opacity"));
                if(opacity == 0)
                {
                    featureList.vars.content_out_state = 0;
                    featureList.animatefeatureList();
                }
                else
                {
                    //featureList.vars.content_out_state = 1;
                }
                
            }
        });
        
    },
    
    animatefeatureList : function()
    {
        var width = (featureList.vars.content_out_state == 0)? 120 : 348;
        
        $("#feature_list").animate({
            "width" : width
        }, {
            "easing" : "swing",
            "duration" : 1000,
            "complete" : function(){
                if(featureList.vars.content_out_state == 1)
                {
                    featureList.animateContentOut();
                }
            }
        });
    }
    
}

$(document).ready(function(){
    
    if(document.getElementById("feature_list"))
    {
        featureList.init();
    }
    
});