var SlidingPanes = {
 initialize : function(buttons, panes, container, frame, paneClass){
     var self = {
         buttons: buttons,
         panes: panes,
         frame: frame,
         container: container,
         paneClass: paneClass,
                     
         animate : function(el){
             self.activeExists()
             
             var id = "#"+el.attr("id")+self.panes
             var pane = $(id)
             
             if(!(pane.attr("id") == self.active.attr("id"))){
                 self.cancel()
                 self.active = pane
                 $(self.container).animate({marginLeft: self.getOffset()+"px"})
             }               
         },
         
         cancel : function(){
             $(self.container).stop()
         },
         
         activeExists : function(){
             if(typeof(self.active) == "undefined"){
                 self.active = $(self.container+" "+self.paneClass)[0]
                 self.active = $(self.active)
             }
         },
         
         getOffset : function(){
             tmp = parseInt($(self.container).css("margin-left").replace(/px/, ""))
             /* total offset of element-left offset of container-left margin of container */
             return -self.active.offset().left+$(self.frame).offset().left+tmp
         }
         
     }
     
     
     $(self.buttons+" li").click(
         function(){
             self.animate($(this))
             return false;
         })
 }
 
}

var Buttons = {
 initialize : function(id){
     var self = {
         id: id,
         buttons: $(id+" a"),
         deactivateButtons : function(){
             $(id+" li").each(function(){
                 $(this).removeClass("active")
             })
         },
         slideOff: function(){
             self.buttons.each(function(){
                 if(!$(this).parent("li").hasClass("active")){
                     $(this).stop()
                     $(this).animate({backgroundPosition: "0px 0px", paddingRight: "0"}, 250)
                     $(this).css({color: "#ffffff"})
                 }
             })
         }
     }
     self.buttons.click(function(){
         self.deactivateButtons()
         $(this).parent("li").addClass("active")
         self.slideOff()
     })
 }
}


var Sliders = {
 initialize : function(id){
     var self = {
         id: id,
         hovers: $(id+' li a'),
         
         slideTo: function(){
             if(!$(this).parent("li").hasClass("active")){
                 $(this).stop()
                 $(this).animate({backgroundPosition: "130px 0px", paddingRight: "10px"}, 250)
                 $(this).css({color: "#000000"})
             }
         },
         
         slideOff: function(){
             if(!$(this).parent("li").hasClass("active")){
                 $(this).stop()
                 $(this).animate({backgroundPosition: "0px 0px", paddingRight: "0"}, 250)
                 $(this).css({color: "#ffffff"})
             }
         }
     }
     self.hovers.each(function(){
         if(!$(this).parent("li").hasClass("active")){
             $(this).css({backgroundPosition: "0 0", paddingRight: "0"})
         }
     })
     self.hovers.mouseover(self.slideTo)
     self.hovers.mouseout(self.slideOff)
     //self.hovers.hover(self.slideTo, self.slideOff)
     
 }
}

var Factory = {
 
 initialize : function(){

     
     if($("#slider-controls").length > 0){
         SlidingPanes.initialize("#slider-controls", "_panel", "#sliders-clip", "#sliders-content", ".panel")
         Buttons.initialize("#slider-controls")
         Sliders.initialize("#slider-controls")
     }
     
 }
}

$(document).ready(function(){
 Factory.initialize()
})