var opacityStep = 5;
var cpopacity = 60;
var slideshowSpeed = 1;
var slideshowSpeedAdjustRatio = 0.8;
var slideshowPause = false;
var userPause = false;

function SlideContainer(thisid, imagefiles, framefiles, interval, autoloop, showcontrolpanel)
{ 
    this.interval = interval;
    slideshowCounter = interval;    // Assign global variable counter
    this.autoLoop = autoloop;
    this.showControlPanel = showcontrolpanel;
    
    this.imageFiles = imagefiles;
    this.frameFiles = framefiles;
   
    if(this.frameFiles.length > 0)
    {
        this.frameChange = Math.round(Math.random() * 10) % this.imageFiles.length;
        this.currFrameIndex = 0; 
         
        this.frameImg = new SlideImage(thisid + 'Frame', this);
        this.frameImg.setImage(this.frameFiles[0]);
    }
    
    this.currImg = "slideImg2"; // so that when first load change image, slideImg1 will be loaded
    this.currFileIndex = 0; 
    
    this.slideImg1 = new SlideImage(thisid + 'Img1', this);
    this.slideImg1.setImage(this.imageFiles[0]);    
    this.slideImg2 = new SlideImage(thisid + 'Img2', this);
    this.slideImg2.setImage(this.imageFiles[1]);   
    
    this.preloadImage = function(imgobj)
    {
        if(this.autoLoop)   // if autoloop den use mod to rotate back to 0
            this.currFileIndex = (this.currFileIndex + 1) % this.imageFiles.length; 
        else
            this.currFileIndex += 1;

        if(this.currFileIndex < this.imageFiles.length)
            imgobj.setImage(this.imageFiles[this.currFileIndex]);
    }
    
    this.changeImage = function()
    {        
        if(this.currFileIndex < this.imageFiles.length)
        { 
            // Change frame image if there is more than 1 and hits the random count
            if(this.frameFiles.length > 1 && this.currFileIndex == this.frameChange)
            {
                this.frameChange = Math.round(Math.random() * 10) % this.imageFiles.length; 
                
                this.currFrameIndex = (this.currFrameIndex + 1) % this.frameFiles.length; 
                this.frameImg.setImage(this.frameFiles[this.currFrameIndex]);
            }
               
            if(this.currImg == "slideImg1")
            {
                this.currImg = "slideImg2";
                
                clearTimeout(fadeout_timerid);
                fadeout_timerid = null;
                clearTimeout(fadein_timerid);
                fadein_timerid = null;                
                
                fadeOut(thisid + ".slideImg1");
                fadeIn(thisid + ".slideImg2");
            }
            else
            { 
                this.currImg = "slideImg1";
                
                clearTimeout(fadeout_timerid);
                fadeout_timerid = null;                
                clearTimeout(fadein_timerid);
                fadein_timerid = null;                
                
                fadeOut(thisid + ".slideImg2");
                fadeIn(thisid + ".slideImg1");
            }
        }
    }
    
    // If no show control panel, den dun even have to initialise the rest of the objects
    if(!this.showControlPanel)
        return;
        
    /***** BEGIN Control Panel functions *****/
    this.container = document.getElementById(thisid + 'Container');
    this.container.onclick = function(evt)
    {       
        if(document.all?true:false)
        {
            if(event.srcElement.getAttribute('name') == "ControlIcon")
                return;
        }
        else
        {
            if(evt.target.getAttribute('name') == "ControlIcon")
                return;
        }
        
        if(userPause)
        {
            slideshowPause = false;
            userPause = false;
            
            if(document.all?true:false)
                eval(thisid).controlPause.style.filter = eval(thisid).controlPause.style.filter.replace("pause2.png","pause.png");
            else
                eval(thisid).controlPause.style.background = eval(thisid).controlPause.style.background.replace("pause2.png","pause.png");
        }
        else
        {
           slideshowPause = true;
           userPause = true;
           
           if(document.all?true:false)
                eval(thisid).controlPause.style.filter = eval(thisid).controlPause.style.filter.replace("pause.png","pause2.png");
            else
                eval(thisid).controlPause.style.background = eval(thisid).controlPause.style.background.replace("pause.png","pause2.png");
        }     
        return false;
    }
     
    this.controlPanel = new SlideImage(thisid + 'ControlPanel', this);
    this.controlPanel.imgContainer.onmouseover = function()
    {
        slideshowPause = true;
        
        clearTimeout(cpfade_timerid);
        cpfade_timerid = null;
        
        cpFadeIn(thisid);
    }
    this.controlPanel.imgContainer.onmouseout = function()
    { 
        if(!userPause)
            slideshowPause = false;  
        
        clearTimeout(cpfade_timerid);
        cpfade_timerid = null;
        
        cpFadeOut(thisid);
    }
    this.controlIconContainer = new SlideImage(thisid + 'ControlIcon', this);
    this.controlIconContainer.imgContainer.onmouseover = this.controlPanel.imgContainer.onmouseover;
    this.controlIconContainer.imgContainer.onmouseout = this.controlPanel.imgContainer.onmouseout;
    
    this.controlIconBack = document.getElementById(thisid + "ControlIconBack");
    this.controlIconBack.onmousedown = function()
    {
        if(document.all?true:false)
            this.style.filter = this.style.filter.replace("back.png","back2.png");
        else
            this.style.background = this.style.background.replace("back.png","back2.png");
    }
    this.controlIconBack.onclick = function()
    {        
        if(document.all?true:false)
            this.style.filter = this.style.filter.replace("back2.png","back.png");
        else
            this.style.background = this.style.background.replace("back2.png","back.png");

        slideshowCounter = 0;
        
        eval(thisid).currFileIndex = eval(thisid).currFileIndex - 2; 
        if(eval(thisid).currFileIndex < 0)
            eval(thisid).currFileIndex = eval(thisid).imageFiles.length - 2;
            
        if(eval(thisid).currImg == "slideImg1")
            eval(thisid).slideImg2.setImage(eval(thisid).imageFiles[eval(thisid).currFileIndex]);
        else
            eval(thisid).slideImg1.setImage(eval(thisid).imageFiles[eval(thisid).currFileIndex]);
            
        eval(thisid).changeImage();
        return false;
    }
    this.controlIconForward = document.getElementById(thisid + "ControlIconForward");
    this.controlIconForward.onmousedown = function()
    {
        if(document.all?true:false)
            this.style.filter = this.style.filter.replace("forward.png","forward2.png");
        else
            this.style.background = this.style.background.replace("forward.png","forward2.png");
    }
    this.controlIconForward.onclick = function()
    { 
        if(document.all?true:false)
            this.style.filter = this.style.filter.replace("forward2.png","forward.png");
        else
            this.style.background = this.style.background.replace("forward2.png","forward.png");
            
        slideshowCounter = 0;
            
        if(eval(thisid).currFileIndex >= eval(thisid).imageFiles.length) 
        {   
            eval(thisid).currFileIndex = 0;
            
            if(eval(thisid).currImg == "slideImg1")
                eval(thisid).slideImg2.setImage(eval(thisid).imageFiles[eval(thisid).currFileIndex]);
            else
                eval(thisid).slideImg1.setImage(eval(thisid).imageFiles[eval(thisid).currFileIndex]);
        }  
        
        eval(thisid).changeImage();        
        return false;
    }
    this.controlIconMinus = document.getElementById(thisid + "ControlIconMinus");
    this.controlIconMinus.onmousedown = function()
    {
        if(document.all?true:false)
            this.style.filter = this.style.filter.replace("minus.png","minus2.png");
        else
            this.style.background = this.style.background.replace("minus.png","minus2.png");
    }
    this.controlIconMinus.onclick = function()
    {
        if(document.all?true:false)
            this.style.filter = this.style.filter.replace("minus2.png","minus.png");
        else
            this.style.background = this.style.background.replace("minus2.png","minus.png");
        
        slideshowCounter = 0;            
        slideshowSpeed = Math.round((slideshowSpeed * 1/slideshowSpeedAdjustRatio) * 100)/100;        
        return false;
    }
    this.controlIconPlus = document.getElementById(thisid + "ControlIconPlus");
    this.controlIconPlus.onmousedown = function()
    {
        if(document.all?true:false)
            this.style.filter = this.style.filter.replace("plus.png","plus2.png");
        else
            this.style.background = this.style.background.replace("plus.png","plus2.png");
    }
    this.controlIconPlus.onclick = function()
    {
        if(document.all?true:false)
            this.style.filter = this.style.filter.replace("plus2.png","plus.png");
        else
            this.style.background = this.style.background.replace("plus2.png","plus.png");
        
        slideshowCounter = 0;        
        slideshowSpeed = Math.round((slideshowSpeed * slideshowSpeedAdjustRatio) * 100)/100;        
        return false;
    }
    
    this.controlPauseContainer = new SlideImage(thisid + 'ControlPause', this);
    this.controlPauseContainer.imgContainer.onmouseover = this.controlPanel.imgContainer.onmouseover;
    this.controlPauseContainer.imgContainer.onmouseout = this.controlPanel.imgContainer.onmouseout;
    this.controlPauseContainer.onclick = this.container.onclick;
    this.controlPause = document.getElementById(thisid + "ControlPauseDiv");
    this.controlPause.onmousedown = function()
    {
        if(document.all?true:false)
            this.style.filter = this.style.filter.replace("pause.png","pause2.png");
        else
            this.style.background = this.style.background.replace("pause.png","pause2.png");
    }
    this.controlPause.onclick = function()
    {
        if(userPause)
        {
            slideshowPause = false;
            userPause = false;
            if(document.all?true:false)
                this.style.filter = this.style.filter.replace("pause2.png","pause.png");
            else
                this.style.background = this.style.background.replace("pause2.png","pause.png");
        }
        else
        {
            slideshowPause = true;
            userPause = true;
            if(document.all?true:false)
                this.style.filter = this.style.filter.replace("pause.png","pause2.png");
            else
                this.style.background = this.style.background.replace("pause.png","pause2.png");
        }          
        return false;
    }
    
    if(document.all?true:false)
    {
        this.controlIconBack.style.background = '';
        this.controlIconForward.style.background = '';
        this.controlIconMinus.style.background = '';
        this.controlIconPlus.style.background = '';
    }
    /***** END Control Panel functions *****/  
}

var counter_timerid = null;
var slideshowCounter = 0;
function StartSlideShow(slideObjId)
{
    var slideObj = eval(slideObjId);
    if(slideshowCounter < slideObj.interval)
    {
        if(!slideshowPause) // Carry on the count-down if pause is not true, else, just do nothing and keep on looping
            slideshowCounter ++;
            
        counter_timerid = setTimeout("StartSlideShow('" + slideObjId + "')", slideshowSpeed * 1000);
    }
    else
    {        
        slideObj.changeImage();
        
        clearTimeout(counter_timerid);
        counter_timerid = null;
        
        slideshowCounter = 0;
        
        StartSlideShow(slideObjId);
    }
}

var fadein_timerid = null;
function fadeIn(temp)
{       
    var imgobj = eval(temp);   
    var opacity = imgobj.getOpacity();

    if(opacity < 100)
    {
        opacity += opacityStep;    
        imgobj.setOpacity(opacity);  

        fadein_timerid = setTimeout("fadeIn('" + temp + "')",1);
    }
    else
    {
        clearTimeout(fadein_timerid);
        fadein_timerid = null;
        
        imgobj.setOpacity(100);
    }   
}

var fadeout_timerid = null;
function fadeOut(temp)
{
    var imgobj = eval(temp);   
    var opacity = imgobj.getOpacity();

    if(opacity > 0)
    {
        opacity -= opacityStep;
        imgobj.setOpacity(opacity);  

        fadeout_timerid = setTimeout("fadeOut('" + temp + "')",1);
    }
    else
    {
        clearTimeout(fadeout_timerid);
        fadeout_timerid = null;
        
        imgobj.setOpacity(0);
        
        // Preload image
        imgobj.parentContainer.preloadImage(imgobj);
    }
}

var cpfade_timerid = null;
function cpFadeIn(temp)
{       
    var cpObj = eval(temp).controlPanel;   
    var opacity = cpObj.getOpacity();

    if(opacity < cpopacity)
    {
        opacity += 10;    
        cpObj.setOpacity(opacity);  

        cpfade_timerid = setTimeout("cpFadeIn('" + temp + "')",1);
    }
    else
    {
        clearTimeout(cpfade_timerid);
        cpfade_timerid = null;
        
        cpObj.setOpacity(cpopacity);
        eval(temp).controlIconContainer.setOpacity(100);
        eval(temp).controlPauseContainer.setOpacity(100);             
    }   
}

function cpFadeOut(temp)
{
    var cpObj = eval(temp).controlPanel;    
    var opacity = cpObj.getOpacity();

    if(opacity > 0)
    {
        opacity -= 10;
        cpObj.setOpacity(opacity);  

        cpfade_timerid = setTimeout("cpFadeOut('" + temp + "')",1);
    }
    else
    {
        clearTimeout(cpfade_timerid);
        cpfade_timerid = null;
        
        cpObj.setOpacity(0);
        eval(temp).controlIconContainer.setOpacity(0);
        if(!userPause)
            eval(temp).controlPauseContainer.setOpacity(0);
    }
}