/*
*	Slide Show
*	Generates a browser/slide show for a list of stories with imagery
*	
*	Requires Trapeze jQuery distribution
*	
*	Taylan Pince (tpince at trapeze dot com) - February 24, 2009
*/

$.namespace("trapeze.SlideShow");

trapeze.SlideShow = $.Class.extend({
    
    selector : "",
    total : 0,
    sequence : [],
    active_index : 0,
    visible_items : 5,
    viewer_position : 2,
    slide_interval : 0,
    slide_timer : null,
    thumbnails : true,
    
    indicator_template : '<div class="indicator" style="left: %(position)px">&nbsp;</div>',
    arrow_template : '<a href="javascript:void(0);" class="arrow-%(direction)"><img src="%(media_path)images/btn-arrow-%(direction).png" alt="%(direction)" /></a>',
    
    position_thumbnail : function(index, obj) {
        this.sequence.push(index);
        
        $(obj).addClass("index-" + index);
        
        this.position_list_item(index, obj);
    },
    
    position_list_item : function(index, obj) {
        $(obj).css({
            "position": "absolute",
            "top": "0px",
            "left": (index * $(obj).outerWidth(true)) + "px"
        });
        
        $.data(obj, "show_index", index);
    },
    
    thumbnail_click : function(evt) {
        this.show_story($.data($(evt.currentTarget).parent().get(0), "show_index"));
        
        return false;
    },
    
    show_next_story : function() {
        if (this.active_index < this.total - 1) {
            this.show_story(this.active_index + 1);
        } else {
            this.show_story(0);
        }
    },
    
    show_previous_story : function() {
        if (this.active_index > 0) {
            this.show_story(this.active_index - 1);
        } else {
            this.show_story(this.total - 1);
        }
    },
    
    show_story : function(index) {
        if (index != this.active_index) {
            if (this.slide_timer) {
                window.clearTimeout(this.slide_timer);
                
                this.slide_timer = null;
            }
            
            var image = $(this.selector).children("div.images").find("li").get(index);
            
            $(this.selector).children("div.images").children("ul").animate({
                "left": -1 * parseInt($(image).css("left"))
            });
            
            if (this.thumbnails) {
                var thumb = $(this.selector).children("div.thumbnails").find("li.index-" + index).get(0);
            
                $(this.selector).children("div.thumbnails").children("ul").animate({
                    "left": -1 * (parseInt($(thumb).css("left")) - 174)
                }, this.update_sequence.bind(this));
            }
            
            this.active_index = index;
            
            if (this.slide_interval > 0 && this.total > 0) {
                this.slide_timer = window.setTimeout(this.show_next_story.bind(this), this.slide_interval * 1000);
            }
        }
    },
    
    update_sequence : function() {
        var move = this.sequence.indexOf(this.active_index) - this.viewer_position;
        var new_sequence = this.sequence.slice();
        
        for (var i = 0; i < Math.abs(move); i++) {
            if (move > 0) {
                new_sequence.push(new_sequence.shift());
            } else {
                new_sequence.unshift(new_sequence.pop());
            }
        }
    
        for (var i = 0; i < new_sequence.length; i++) {
            var item_index = new_sequence[i];
        
            if ((this.sequence.indexOf(item_index) - move) != new_sequence.indexOf(item_index)) {
                var item = $(this.selector).children("div.thumbnails").find("li.index-" + item_index).get(0);
            
                $(this.selector).children("div.thumbnails").find("li.index-" + item_index).css({
                    "left" : parseInt($(item).css("left")) + (new_sequence.indexOf(item_index) - this.sequence.indexOf(item_index) + move) * $(item).outerWidth(true)
                });
            }
        }
    
        this.sequence = new_sequence.slice();
    },
    
    init : function(selector, options) {
        this.selector = selector;
        
        if (options) {
            this.visible_items = (options.visible_items) ? options.visible_items : 5;
            this.viewer_position = (options.viewer_position) ? (options.viewer_position - 1) : 2;
            this.slide_interval = (options.slide_interval) ? options.slide_interval : 0;
        }
        
        this.total = $(this.selector).children("div.images").find("li").size();
        
        if (this.total < this.viewer_position) {
            this.viewer_position = this.total - 1;
        }
        
        this.active_index = this.viewer_position;
        this.thumbnails = ($(this.selector).children("div.thumbnails").size() > 0);
        
        $(this.selector).children("div.images").find("li").each(this.position_list_item.bind(this));
        
        if (this.thumbnails) {
            $(this.selector).children("div.thumbnails").find("li").each(this.position_thumbnail.bind(this));
            $(this.selector).children("div.thumbnails").find("a").click(this.thumbnail_click.bind(this));
            
            $(this.selector).children("div.thumbnails").append(trapeze.render_template(this.indicator_template, {
                "position" : $(this.selector).children("div.thumbnails").find("li:first-child").outerWidth(true) * this.viewer_position
            }));
        }
        
        if (this.total > 1) {
            $(this.selector).children("div.images").append(trapeze.render_template(this.arrow_template, {
                "direction" : "left",
                "media_path" : trapeze.media_path
            }));

            $(this.selector).find("a.arrow-left").click(this.show_previous_story.bind(this));

            $(this.selector).children("div.images").append(trapeze.render_template(this.arrow_template, {
                "direction" : "right",
                "media_path" : trapeze.media_path
            }));

            $(this.selector).find("a.arrow-right").click(this.show_next_story.bind(this));
        }
        
        this.show_story(0);
    }
    
});