SlideClass = function() {
    this.linkElement;
    this.imgElement;
    this.spanElement;
    this.largeSrc;
};
    
MapSlides = function(msObj, id, cLeft, cRight, cPlay, cStop, sContainer, sViewer) {

    this.objid = id;
    this.slidesContainer = $get(sContainer);  
    this.slidesViewer = $get(sViewer);;  
    this.slides; 
    this.currentIndex = 0; 
    this.viewIndex = 0;
    this.viewSize = 5;     
    this.externalRef;
    this.slideLeft = $get(cLeft);
    this.slideRight = $get(cRight);
    this.slidePlay = $get(cPlay); 
    this.slideStop = $get(cStop);        
    this.timerId;
    
    msObj = this;
    
    this.selectImage = function(index)
    {
        this.slides[this.currentIndex].linkElement.className = "dailyMapsSlide";
        
        if(index < 0) index = 0;
        if(index >= this.slides.length) index = this.slides.length - 1;
        
        if(index != undefined) this.currentIndex = index;
        
        if(this.slidesViewer && this.slides[this.currentIndex])
        {            
            this.slidesViewer.src = this.slides[this.currentIndex].largeSrc;
            this.slides[this.currentIndex].linkElement.className = "dailyMapsSlideSelect";
        }    
        
        this.moveViewPort(this.currentIndex - this.viewIndex - 2);
        
        /*if(index == 0) msObj.slideLeft.style.display = "none";
        else msObj.slideLeft.style.display = "";
        
        if(index == this.slides.length - 1) msObj.slideRight.style.display = "none";
        else msObj.slideRight.style.display = "";*/
    }
    
    this.moveViewPortLeft = function() {
        msObj.selectImage(parseInt(msObj.currentIndex) - 1);   
    }
    
    this.moveViewPortRight = function() {
        msObj.selectImage(parseInt(msObj.currentIndex) + 1);   
    }
    
    this.moveViewPort = function(step) {
        this.viewIndex += step;
        
        if(this.viewIndex < 0) this.viewIndex = 0;
        if(this.viewIndex >= this.slides.length - this.viewSize) this.viewIndex = this.slides.length - this.viewSize;
        
        for(var i = 0; i < this.slides.length; i++){
            if((i >= this.viewIndex) && (i < this.viewIndex + this.viewSize))
            {
                this.slides[i].linkElement.style.display = "";
            }
            else
            {
                this.slides[i].linkElement.style.display = "none";
            }
        }
    }
    
    this.playSlides = function() { 
        clearTimeout(msObj.timerId);    
        
        if(msObj.currentIndex == msObj.slides.length - 1)
        {
            msObj.selectImage(0);
        }
        else
        {
            msObj.moveViewPortRight();
        }
        
        var recur_call = msObj.objid + ".playSlides()";
        msObj.timerId = setTimeout(recur_call, 800);        
    }
    
    this.stopSlides = function() {
        clearTimeout(msObj.timerId);
    }

    this.loadSlides = function(forecast, typeListId) {

        this.slideLeft.onclick = this.moveViewPortLeft;
        this.slideRight.onclick = this.moveViewPortRight;
        this.slidePlay.onclick = this.playSlides;
        this.slideStop.onclick = this.stopSlides;
    
        if(typeListId)
        {
            typeList = $get(typeListId);
            var typeListVal = "";
            
            for(var i = 0; i < typeList.options.length; i++)
            {
                if(typeList.options[i].selected)
                    typeListVal =  typeList.options[i].value;
            }  
        }
        else
        {
            typeListVal = "Daily Rainfall";
        }    
        WeatherSlides.GetPreviewSlides(typeListVal,forecast,this.loadSlidesCallback);
    }

    this.loadSlidesCallback = function(result) {  
        
        msObj.slides = new Array(); 
        //msObj.slidesContainer = $get("histSlidesContainer");  
        //msObj.slidesViewer = $get("histSlidesMainImage");  
        msObj.currentIndex = 0;
                 
        //remove children
        if ( msObj.slidesContainer.hasChildNodes() )
        {
            while ( msObj.slidesContainer.childNodes.length >= 1 )
            {
                msObj.slidesContainer.removeChild( msObj.slidesContainer.firstChild );       
            } 
        }
     
        for(var i = 0; i < result.length; i++){            
                         
            msObj.slides[i] = new SlideClass();
                   
            msObj.slides[i].linkElement = document.createElement("a");
            msObj.slides[i].linkElement.className = "dailyMapsSlide";
            msObj.slides[i].linkElement.href = "javascript:" + msObj.objid + ".selectImage('" + i + "');"
            
            msObj.slides[i].imgElement = document.createElement("img"); 
            msObj.slides[i].imgElement.src = result[i].PreviewPath;
            
            msObj.slides[i].spanElement = document.createElement("span");            
            msObj.slides[i].spanElement.innerHTML = result[i].Name + "<br/>" + result[i].DateLabel;
             
            msObj.slides[i].largeSrc = result[i].ImagePath;                        
                
            //add to parent                    
            msObj.slides[i].linkElement.appendChild(msObj.slides[i].imgElement); 
            msObj.slides[i].linkElement.appendChild(msObj.slides[i].spanElement);     
            msObj.slidesContainer.appendChild(msObj.slides[i].linkElement);    
        } 
        msObj.moveViewPort(0);
        msObj.selectImage(0);                  
    }   
     
};