$.localhost.control.define("FeatureRotator", {

    holdTime: 8000,
    transTime: 1000,
    
    count: 0,
    current: 1,    
    next: 2,
    queue: null,
    
    timer: null,        // scheduled transition (from setTimeout)
    transition: false,  // is transition in progress
    
    init: function(){
        //alert('fr init');
        
        var self = this;
        var $features = this.$();
        
        //
        // Add navigation element.
        //
        $features.append($("<div/>").addClass("nav"));
        
        //
        // Init features.
        //
        $features.find(".feature").each(function(){
            self.count++;
            var $feature = $(this);
            var image = $feature.find("h3").attr("class");
            var imageURL = "/images/banners/" + image + ".jpg";
            $feature.css({
                backgroundImage: "url(" + imageURL + ")"
            });
            
            $feature.addClass("feature-" + self.count);
            
            //
            // Create/add nav link.
            //
            var $link = $("<a/>").attr({
                href: "javascript:void(0)",
                title: self.count
            }).text(self.count).click(function(){
                var $link = $(this);
                var title = $link.attr("title");
                self.gotoFeature(title);
                $link.blur();
            }).appendTo($features.find(".nav"));
        });
        
        //
        // Add additional formatting to nav elements.
        //
        $features.find(".nav a").each(function(){
            var $link = $(this);
            var $bgImage = $("<img/>").attr({
                src: "/App_Master/images/feature-nav-link-bg.png"
            });
            var $fgImage = $("<img/>").attr({
                src: "http://tools.vezea.net/textimage?color=red&backgroundColor=transparent&padding=4&content=" + $link.text()
            });
            var $span = $("<span/>").text($link.text());
            //var $span = $("<span/>").append($fgImage);
            $link.empty().append($bgImage).append($span);
        });
        
        $features.find(".feature:gt(0)").each(function(){
            $(this).hide();
        });
        $features.find(".nav a:eq(0)").addClass("current");
        
        this.scheduleNext();
    },
    
    scheduleNext: function(){
        var self = this;
        this.next = this.current % this.count + 1;
        self.timer = setTimeout(function(){self.transitionNext();}, this.holdTime);
    },
    
    gotoFeature: function(n){
        clearTimeout(this.timer);
        if (this.transition) {
            this.queue = n;
        } else {
            this.next = n;
            this.transitionNext();
        }
    },
    
    transitionNext: function(){
        var self = this;
        //
        // Position next feature right after first and hide.
        //
        this.$().find(".feature-" + this.next).hide().insertAfter(this.$().find(".feature:eq(0)"));
        //
        // Start transition.
        //
        this.transition = true;
        //
        // Modify nav.
        //
        this.$().find(".nav .current").animate({
            width: "20px",
            height: "20px",
            lineHeight: "20px",
            fontSize: "10px",
            marginTop: "3px",
            marginBottom: "3px"
        }, this.transTime/2, function(){
            $(this).removeClass("current");
        });
        this.$().find(".nav a").eq(this.next - 1).animate({
            width: "26px",
            height: "26px",
            lineHeight: "26px",
            fontSize: "12px",
            marginTop: 0,
            marginBottom: 0
        }, this.transTime/2, function(){
            $(this).addClass("current");
        });
        //
        // Fade in feature.
        //
        this.$().find(".feature:eq(1)").fadeIn(this.transTime, function(){
            var $this = self.$();
            //
            self.transition = false;
            //
            // Move previous to end of list.
            //
            $this.find(".feature").eq(0).hide().insertBefore($this.find(".nav"));
            //
            // Flag current nav item.
            //
            $this.find(".nav a").removeClass("current").eq(self.next - 1).addClass("current");
            //
            self.current = self.next;
            //
            if (self.queue) {
                self.next = self.queue;
                self.queue = null;
                self.transitionNext();
            } else {
                self.scheduleNext();    
            }
                    
        });
    }

});