if (!everylittlebit) var everylittlebit = {};

everylittlebit.Page = {

    featureCount: 0,
    featurePause: 6,    // seconds
    currentTimeout: null,
    
    featureClip: false,
    featureDims: null,
    
    featureHeight: null,
    featureSpan: null,
    
    featureHideOpacity: 0,
    featureFadeOpacity: 0.4,
    featureHoverOpacity: 0.6,
    
    featureScrollDuration: 1000,
    featureTransitionTime: 1000,
    
    
    featureData: null,
    
    handleReady : function() {
    
        //this.featureData = $("#FeatureList .Data").get(0).firstChild.textContent;
        var dataComment = $("#FeatureList .Data").get(0);
        if ($.browser.msie) { // && parseInt($.browser.version) < 7) {
            this.featureData = dataComment.innerHTML.replace(/(?:\<\!--|--\>)/g, "");
        } else {
            this.featureData = dataComment.firstChild.textContent;
        }
        this.featureData = $.evalJSON(this.featureData);
        this.featureData = this.featureData.Features.Feature;

        //
        // Preload Images
        //
        for (var i = 0; i < this.featureData.length; i++) {
            var item = this.featureData[i];
            item.imageObj = new Image();
            item.imageObj.src = item.Image;
        }
        
        /*
        $("#FeatureList .Feature").append('<div class="Shimmer"/>').hover(function(){
            $(this).find(".Shimmer").show();
        },function(){
            $(this).find(".Shimmer").hide();
        });
        */
        
        this.featureCount = $("#FeatureList .Feature").length;
        
//        this.featureIndex = this.featureCount > 5 ? 2 : Math.floor((this.featureCount - 1) / 2);
        this.featureIndex = 1;
        this.initFeatures();
        this.loadFeature(this.featureIndex);
    },
    
   initFeatures: function() {
   
        var $features = $("#FeatureList .Feature");
        
        var Page = this;
        
        //
        // Get feature measurements.
        //
        this.featureHeight = $features.eq(0).height();
        this.featureSpan = $features.get(1).offsetTop - $features.get(0).offsetTop;
        
        var fade = this.featureFadeOpacity;
        
        $features.find("strong").each(function(i){
            var $this = $(this);
            var title = $this.attr("title");
            $this.attr("title", $this.text());
            $this.text(title);
            $this.click(function(){
                Page.queueLoadFeature(i);
            });
        });
        
        $features.find("img").each(function(){
            var $this = $(this);
            var uri = $this.attr("src");
            var div = $("<span/>").addClass("image");//.css({backgroundImage:"url("+uri+")"});
            $this.wrap(div);
            //$this.text($this.attr("title"));  // This was causing an error in IE. What was this code for?
        });
        
        $features.each(function(i){
            var $this = $(this);
            $this.click(function(){
                var $this = $(this);
                var i = $this.prevAll(".Feature").length;
                
                Page.queueLoadFeature(i);
            });
            $this.css({
                opacity: fade
            });
        });       
        
        var upButton = $("<img/>").attr("src", "Images/FeatureUp.png").addClass("Button");
        var downButton = $("<img/>").attr("src", "Images/FeatureDown.png").addClass("Button");
        
        upButton.click(function(){
            Page.gotoPrevFeature();
        });

        downButton.click(function(){
            Page.gotoNextFeature();
        });
        
        var $panel = $("#FeaturePanel");
        
        $panel.prepend($("<div/>").addClass("Up Control").append(upButton));
        $panel.append($("<div/>").addClass("Down Control").append(downButton));
        
        return;
        
        
        
        // center list
        this.featureDims = {
//            width: $features.get(0).offsetWidth,
            height: $features.get(0).offsetHeight
        };
        var clipperWidth = this.featureDims.width * Math.min(5, this.featureCount);
        var panelWidth = $("#FeaturePanel").eq(0).width();
        var canvasWidth = this.featureDims.width * 7;
        
        canvasWidth = clipperWidth;
           
        $("#FeatureList").width(canvasWidth);
        $("#FeatureClipper").width(clipperWidth).css({
            position: "relative",
            marginLeft: Math.floor((panelWidth - clipperWidth) / 2)
        });
    },

    queueLoadFeature: function(i) {        
        var self = this;
        
        if (this.currentTimeout) clearTimeout(this.currentTimeout);
        
        $("#FeatureList").queue(function(){
            //alert('Load '+i);
            self.loadFeature(i);
            $(this).dequeue();
        });
    },
    
    loadFeature : function(i) {
        var Page = this;

        if (this.currentTimeout) clearTimeout(this.currentTimeout);

        //
        // Get list, feature, and detail.
        // 
        var $list = $("#FeatureList");
        switch (typeof i) {
            case "number" : $feature = $list.find(".Feature").eq(i); break;
            case "object" : $feature = i; break;
            default: $feature = null;
        }
        var $detail = $("<div/>").addClass("Feature").html($feature.html());
        
        /*
        // Debugging
        var i = 0;
        $list.find(".Feature").css("border", "0px").each(function(){
            $(this).find("strong").text(i++);
        });
        $feature.css("border", "2px solid red");
        //$feature.find("strong").text(i);
        */
        
        //
        // Manipulate detail.
        //
        $detail.find("img").each(function(){
            $(this).attr("src", $(this).attr("longdesc"));
        });
        $detail.find("img, .Text").click(function(){
            window.location = $(this).parents(".Feature").find("a").attr("href");
        });        
        $detail.find("strong").each(function(){
            $(this).text($(this).attr("title"));
        });
        
        //
        // Remove "active" status on current item.
        //
        $list.find(".Active").removeClass("Active").animate({
            opacity: this.featureFadeOpacity
        }, this.featureTransitionTime);

        //
        // Add "active" status to new item and bring to fore
        // (after clearing effects queue).
        //
        $feature.addClass("Active").stop(true).animate({
            opacity: 1
        }, this.featureTransitionTime);
        
        //
        // Add hover to non-active features in list.
        //
        $list.find(".Feature").hover(function(){
            var $this = $(this);
            if (!$this.is(".Active")) {
                $(this).animate({
                    opacity: Page.featureHoverOpacity
                }, 250);
            }
        },function(){
            var $this = $(this);
            if (!$this.is(".Active")) {
                $(this).animate({
                    opacity: Page.featureFadeOpacity
                }, 250);
            }
        });
                
        $details = $("#FeatureDetail .Feature");
        if (!$details.length) {
            $("#FeatureDetail").empty().append($detail);
        }
        else {
            $detail.css({
                opacity: 0
            });
            $detail.animate({
                opacity: 1
            });
            if ($details.length > 1) {
                $details.remove("div:not(div:last-child)");
            }
            $("#FeatureDetail").append($detail);
        }
        
        i = $feature.prevAll(".Feature").length;

        if (i > 1) {
            Page.scrollUp(1);   // Don't scroll if loading "0"
        } else if (i < 1) {
            Page.scrollDown(1);   // Don't scroll if loading "0"
        }

        this.startTimer();              
    },
    
    startTimer: function() {
        var Page = this;
        this.currentTimeout = setTimeout(function(){Page.gotoNextFeature();}, this.featurePause * 1000);
        //this.currentTimeout = setTimeout(function(){Page.gotoPrevFeature();}, this.featurePause * 1000);
    },
    
    gotoPrevFeature: function() {
        this.queueLoadFeature(0);
        return;
        
        var $current = $("#FeatureList .Active");
        var $prev = $current.prev(".Feature").eq(0);
        if (!$prev.length) {
            $prev = $current.siblings(".Feature").eq(0);
        }
//        alert($prev);
        this.queueLoadFeature($prev);
        //this.scrollUp()
    },
    
    gotoNextFeature: function() {
        this.queueLoadFeature(2);
        return;
                
        var $current = $("#FeatureList .Active");
        var $next = $current.next(".Feature").eq(0);
        if (!$next.length) {
            $next = $current.siblings(".Feature").eq(0);
        }
//        alert($next);
        this.queueLoadFeature($next);
        //this.scrollUp()
    },
    
    scrollUp: function(n) {
        var Page = this;
        var fade = this.featureFadeOpacity;
        var span = this.featureSpan;
        var duration  = this.featureTransitionTime;

        var $list = $("#FeatureList");
        var $top = $list.find(".Feature:first");
        
        n = n || 1;
        
        //
        // Fade out top feature.
        //
        $list.find(".Feature:first").animate({
            opacity: this.featureHideOpacity
        }, duration);
        
        //
        // Scroll up list.
        //        
        $list.animate({
            top: "-=" + this.featureSpan + "px"
        }, duration, function(){  
            //
            // Continue scroll if necessary...
            //            
            n--;
            if (n) Page.scrollUp(n);
        });
        
        //
        // Queue up list item shift to block subsequent scrolls
        // until finished.
        //
        $list.queue(function(){
            var $list = $(this);
            var $top = $list.find(".Feature:first");
            $list.append($top).css({
                "top": 0
            });
            $list.dequeue();         
        });
        
        //
        // Reset/start bottom item fading in.
        //        
        $top.stop();
        $top.animate({
            opacity: fade
        }, duration);            
    },
    
    scrollDown: function(n) {
        var Page = this;
        var $list = $("#FeatureList");
        var $last = $list.find(".Feature:last");
        var fade = this.featureFadeOpacity;
        var span = this.featureSpan;
        var duration  = this.featureTransitionTime;
        
        n = n || 1;

        //
        // Fade out bottom (showing) feature.
        //        
        $list.find(".Feature").eq(2).animate({
            opacity: this.featureHideOpacity
        }, duration);
        
        //
        // Move top item to bottom and prepare list
        // position for scrolling.
        //
        $list.prepend($last).css({
            top: "-" + span + "px"
        });
            
        //
        // Start scroll.
        //
        $list.animate({
            top: 0
        }, duration, function(){        
            //
            // Continue scroll if necessary...
            //            
            n--;            
            if (n) Page.scrollDown(n);
        });

        //
        // Reset/start top item fading in.
        //        
        $last.stop();
        $last.animate({
            opacity: fade
        }, duration);

    }    
        
}
$(document).ready(function(){everylittlebit.Page.handleReady();});