dojo.declare( "ShowCase", null,
{
  
    _loadDataFile: function()
    {
        dojo.xhrGet( {
        
            url: "/static/data/showcase.json",
            handleAs: "json",
                        
            load: dojo.hitch( this, "_dataFileLoaded" )
        } );
    },


    _dataFileLoaded: function( response )
    {
        this._showCaseData = response;
        this._initStage();
    },


    _createImgNode: function( imageSrc )
    {
        //"<img src='" + this._showCaseData.houses[ this._currentIndex ].details.img + "'/>";
    
        var div = document.createElement( "div" );
        div.style.position = "absolute";
    
        var img = document.createElement( "img" );
        img.id = "slideShowImg_" + this._currentIndex;
        img.src = imageSrc;
        
        div.appendChild( img );
    
        return div;
    },
    
    
    _increment: function()
    {
        if( this._currentIndex >= ( this._showCaseData.houses.length - 1 ) )
        {
            this._currentIndex = 0;
            this._previousIndex = this._showCaseData.houses.length - 1;   
        } else {
            this._previousIndex = this._currentIndex;
            this._currentIndex++;
        }
       
    },
    
    play: function()
    {
        this._increment();
        
        var imgNode = this._createImgNode( this._showCaseData.houses[ this._currentIndex ].details.img );
                   
        document.getElementById( "housepic" ).insertBefore( imgNode, document.getElementById( "housepic" ).firstChild );
                
        dojo.fadeOut( { node : document.getElementById( "slideShowImg_" + this._previousIndex ), duration : 2000, onEnd : dojo.hitch( this, "_fadeComplete" ) } ).play();
                
        this._timerid = setTimeout( dojo.hitch( this, "play" ), 5000 ); 
    },

    
    _setText: function()
    {
        var textNode = document.getElementById( "houseinfo" );
        
        var out_text = "";
        out_text += "<center><a style='color: #ffffff;' href='/pictures/details/" + this._showCaseData.houses[ this._currentIndex ].details.id + "/'>Click For Details</a><br/><br/></center>";      
        out_text += "- " + this._showCaseData.houses[ this._currentIndex ].details.style + "<br/>";   
        out_text += "- " + this._showCaseData.houses[ this._currentIndex ].details.sqft + "<br/>";   
        out_text += "- " + this._showCaseData.houses[ this._currentIndex ].details.exterior + "<br/>";   
        out_text += "- " + this._showCaseData.houses[ this._currentIndex ].details.numbeds + "<br/>";      
        out_text += "- " + this._showCaseData.houses[ this._currentIndex ].details.numbaths + "<br/><br/>";
        
                
        //alert( this._showCaseData.houses[ this._currentIndex ].details.numbeds );
        
        textNode.innerHTML = out_text;
        
        //this._showCaseData.houses[ this._currentIndex ].details.style;   
        
        //this._showCaseData.houses[ this._currentIndex ].details.img
    },
        
    _fadeComplete: function()
    {
        this._setText();
    
        var toRemove = document.getElementById( "slideShowImg_" + this._previousIndex );
        document.getElementById( "housepic" ).removeChild( toRemove.parentNode );
    },
    

    startPlay: function( wait )
    {
        this._timerid = setTimeout( dojo.hitch( this, "play" ), wait );
    },
    
    
    pausePlay: function()
    {
		clearTimeout( this._timerid );    
    },
    

    _initStage: function()
    {
        document.getElementById( "housepic" ).innerHTML = "<div sytle='position: absolute;'><img id='slideShowImg_0' src='" + this._showCaseData.houses[ this._currentIndex ].details.img + "'/></div>";
        this._setText();
        this.startPlay( 5000 );
    },
    
    
    constructor: function()
    {   
        this._currentIndex = 0;
        this._previousIndex = 0;
        this._timerid = 0;
        this._loadDataFile();      
    }
});