dojo.require("dijit.dijit");
dojo.require("dijit._Widget");


dojo.declare("SlideShow", [dijit._Widget, dijit._Templated], {

    //slideShowBorder: '5px',
    slideShowAutoplay: true,

    constructor: function(kwargs) {
        //this.inherited(arguments);
        this._playing = false;
        this._load_next_callback_id = null;
        this._images = kwargs.images;
        this._image_index = 0;
        this._loading = false;
    },

    postCreate: function() {},
    
    startup: function() {
        
        if(this.slideShowAutoplay)
            this._start_playing();

        this.inherited(arguments);
    },

    _start_playing: function() {
        this._load_next_callback_id = setTimeout(dojo.hitch(this, "_load_next", true), 2000);
    },

    _load_next: function(playing) {

        if(this._loading)
            return; // still animating previous load

        this._loading = true;

        this._image_index = (this._image_index + 1) % this._images.length;
       
        var new_image = document.createElement('div');
        new_image.id = "image_" + this._image_index;
        new_image.style.position = "absolute";
        new_image.style.top = "0px";
        new_image.style.left = "0px";
        new_image.style.width = "100%";
        new_image.style.height = "100%";               
        new_image.innerHTML = '<img src="' + this._images[this._image_index] + '" width="100%" height="100%"/>';
  
        var image_container = document.getElementById("image_container");
        image_container.insertBefore(new_image, image_container.firstChild);

        var fade_animation = dojo.fadeOut({
            node: image_container.lastChild.id, // "image_" + (this._image_index-1), // yuck...-1 seems sloppy!
            duration: 1000,
            onEnd: dojo.hitch(this, function(node) {
                image_container.removeChild(node);                        
                if(playing)
                    this._load_next_callback_id = setTimeout(dojo.hitch(this, "_load_next", true), 2000);
                
                this._loading = false;
            })});

        fade_animation.play();
    },

    _clear_load_next_callback: function()
    {
        clearTimeout(this._load_next_callback_id);
        this._load_next_callback_id = null;
    },

    _is_playing: function()
    {
        if(this._load_next_callback_id)
            return true;
        return false;
    },

    on_play: function() {
        this._start_playing();
    },

    on_stop: function() {
        this._clear_load_next_callback();
    },
   
    on_next: function() {
        var playing = this._is_playing();
        this._clear_load_next_callback();
        this._load_next(playing);
    },

    on_previous: function() {
        // no-op on previous call if previous load is still running
        // this doesn't have to be checked with on_next because
        // i'm not tweaking the current index before calling _load_next

        if(this._loading)
            return;

        var playing = this._is_playing();
        this._clear_load_next_callback();
        this._image_index -= 2;

        if(this._image_index < 0)
        {
            //console.debug('wrapping: ' + this._image_index);
            this._image_index = this._images.length + this._image_index;
        }

        this._load_next(playing);
    },

    templateString: '<div class="index_slideshow_main">\
                        <div style="width: 100%; height: 100%; position: relative; text-align: center;"> \
                            <div id="image_container"><div id="image_0" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"><img src="static/img/slideshow/house003.jpg" width="100%" height="100%"/></div></div> \
                            <div class="index_slideshow_buttons" style="position: absolute; text-align: center; width: 100px; bottom: 0px; right: 0px;"> \
                                <img dojoattachevent="onclick:on_previous" style="cursor: pointer;" src="static/img/slideshow/control_rewind.png"/><img dojoattachevent="onclick:on_stop" style="cursor: pointer;" src="static/img/slideshow/control_stop.png"/><img dojoattachevent="onclick:on_play" style="cursor: pointer;" src="static/img/slideshow/control_play.png"/><img dojoattachevent="onclick:on_next" style="cursor: pointer;" src="static/img/slideshow/control_fastforward.png"/> \
                            </div> \
                        </div> \
                    </div>',
                    
});