/* 
 * To work it need jquery cycle plugin and jquery libs.
 *
 * Change baner into baner with cycle images with elegant transition - changing
 * images with a smoothly transparent transition.
 */

function BanerCycle(baner,buttons){
    var _baner = baner;
    var _buttons = buttons;
    var _this = this;
    var _buttons_cycle = undefined;
    var _baner_cycle = undefined;

    this.hover_color_on = "#000000";
    this.hover_color_off = "#FFFFFF";
    this.hover_text_color_on ="#FFFFFF";
    this.hover_text_color_off = "#343434";//$(_buttons).children().css("color");
    this.transition_time = 700;
    this.rotate_speed = 3000;            

    this.stopCycle = function(){        
        clearInterval(_buttons_cycle);
        $(_baner).cycle("stop");
    }

    this.startCycle = function(){        
        cycleInit();
        clearButtons();
        cycleButtonsInit();
    }

    this.init = function(){
        hoverInit();
        this.startCycle();
    }

    //private methods ----------------------------------------------------------
    
    function cycleInit(){
        $(_baner).cycle({fx: 'fade',speed: _this.transition_time, delay: 0, timeout: _this.rotate_speed});        
    }

    function hoverInit(){        
        $(_buttons).hover(
            function(){                
                var button = $(this);                   
                _this.stopCycle();
                clearButtons();
                clearInterval(_baner_cycle);
                turnOnButton($(this));

                //baner transition animation
                $(_baner).children("img").stop();
                $(_baner).children("img").each(function(){
                    //turn on the image
                    if($(this).attr("src").search(button.attr("baner"))>-1){
                        $(this).css("display","block").animate({opacity: 1.0},_this.transition_time);                        
                    }
                    //turn off the image
                    else if($(this).is(":visible")){
                        var transition_time = _this.transition_time-(_this.transition_time*0.5);
                        $(this).animate({opacity:0.0},transition_time,function(){$(this).css("display","none")});
                    }                    
                });
            },
            function(){                
                _baner_cycle = setTimeout(_this.startCycle,200);
            }
        );
    }

    function clearButtons(){
        $(_buttons).stop(true,true);
        $(_buttons).attr("turnOn","false");
        $(_buttons).css("backgroundColor", _this.hover_color_off);
        $(_buttons).css("color", _this.hover_text_color_off);
    }

    function turnOnButton(button){        
        $(button).stop(true,true).animate({backgroundColor: _this.hover_color_on},_this.transition_time,function(){$(this).css("backgroundColor",_this.hover_color_on)});
        $(button).css("color",_this.hover_text_color_on);
        $(button).attr("turnOn","true");
    }

    function turnOffButton(button){
        $(button).stop(true,true).animate({backgroundColor: _this.hover_color_off},_this.transition_time,function(){$(this).css("backgroundColor",_this.hover_color_off)});
        $(button).css("color", _this.hover_text_color_off);
        $(button).attr("turnOn","false");
    }

    function cycleButtonsInit(){        
        _buttons_cycle = setInterval(function(){            
            var color_next = false;
            var date = new Date();
            $(_buttons).stop(true,true);
            $(_buttons).each(function(){
                //turn on the button and break
                 if($(this).attr("turnOn") != "true" && color_next == true){
                     turnOnButton($(this));
                     return false;
                 }
                 //turn off the button and allow to turn on the next button
                 if($(this).attr("turnOn") == "true"){
                     turnOffButton($(this));
                     color_next = true;
                 }                 
            });            
            //if none of buttons has been switched on.
            if(color_next == false){
                turnOnButton($(_buttons).first());                
            }            
        },_this.rotate_speed);
    }
}