// Constants
var IMAGE_COUNT = 5;
var IMAGE_TIMEOUT = 4;
var PROGRESS_WIDTH = 500;

// Formats
var progressFormat = "Please wait...Loading images: {0}%";
var debugFormat = "<div>{0}</div>";

// Paths
var imagePathFormat = "Images/I{0}.jpg";
var cssImagePathFormat = "url("+imagePathFormat+")";

// Misc
var imagesLoaded = -1;
var imageIndex = -1;
var Image1 = null;
var Image2 = null;
var imagesShown = -1;

var ProgressBar = null;
var ProgressText = null;
var ProgressContainer = null;

    function Message(str) {
        //$("Debug").innerHTML = debugFormat.replace(/\{0\}/, str) + $("Debug").innerHTML;
    }
    
    function ChangeContent(index) {
        var classname="";
        if (index==0) {
            classname = "Welcome";
        } else if (index==1) {
            classname = "About";
        } else if (index==2) {
            classname = "Contact";
        }
        $("Right").className = classname;
    }
    
    function FetchNextImage() {
       
        
        
        imagesLoaded++;
        
        
        Message("Loading image " + imagesLoaded);
        
        var img = new Image();
        img.onload = ImageLoaded;
        img.onerror = ImageLoadError;
        img.src = imagePathFormat.replace(/\{0\}/, imagesLoaded);    
    
    }
    
    function ImageLoaded() {
        var p = (imagesLoaded+1)/IMAGE_COUNT;
        ProgressText.setHTML(progressFormat.replace(/\{0\}/, Math.round(p*100)));
        ProgressBar.setStyle('width', Math.round(p*PROGRESS_WIDTH));
        if (imagesLoaded<IMAGE_COUNT-1) {
            setTimeout("FetchNextImage()", 250);
        } else {        
            ProcessImages();
        }      
        
    } 
    
    function ImageLoadError() {
        Message("Image error");
    }
    
    function Initialize() {
        
        Message("Initialize");
        
        ProgressText = $("ProgressText");
        ProgressBar = $("ProgressBar");
        ProgressContainer = $("ProgressContainer");
        setTimeout("FetchNextImage()", 250);
    }
    
    function FadeOutProgress() {
    
        ProgressContainer.effect('opacity').start(0);
    
    }
    
    function ProcessImages() {
        Image1 = $("Image1");
        Image2 = $("Image2");
        
        Image1.setStyle('opacity', 0);
        Image2.setStyle('opacity', 0);
        
        setTimeout("FadeOutProgress()", 500);
        
        ProcessNextImage(true);
        
    }
    
    function ProcessNextImage(firstTime) {
        imagesShown++;
        imageIndex++;
        if (imageIndex>IMAGE_COUNT-1) { imageIndex=0; }
        if (imagesShown%2==0) {
            Image1.style.backgroundImage = cssImagePathFormat.replace(/\{0\}/, imageIndex);
            Image1.effect('opacity').start(1);
        } else {
            Image2.style.backgroundImage = cssImagePathFormat.replace(/\{0\}/, imageIndex);
            Image2.setStyle('opacity', 1);
            Image1.effect('opacity').start(0);
        }
        setTimeout("ProcessNextImage();", IMAGE_TIMEOUT*1000);
    }    
    
    
    
window.addEvent("domready", Initialize);