var expBrowser = null;

var ExperienceImageBrowser = Class.create();
var ExperienceImage = Class.create();

ExperienceImage.prototype = {
    
    index : null,
    path : null,
    caption : null,
    
    initialize: function(i,p,c) {
        ///<summary></summary>
        ///<param name="i">Image index relative to its collection</param>
        ///<param name="p">Image path relative to application root</param>
        ///<param name="c">Image caption (title, alt text)</param>
        
        this.index = i;
        this.path = p;
        this.caption = c;
    }
};


ExperienceImageBrowser.prototype = {

    // collection of ExperienceImages
    imageCollection: null,

    // current image index
    currentImageIndex: 0,

    // image element id
    imageElementID: null,

    // image caption element id
    captionElementID: null,

    // next image button id
    nextButtonID: null,

    // previous image button id
    previousButtonID: null,

    initialize: function(col, imgEl, captionEl, nextEl, prevEl) {
        ///<summary></summary>
        ///<param name="col">Image colletion ref</param>
        ///<param name="Image element ID"></param>
        ///<param name="Caption element ID"></param>
        ///<param name="Next image link ID"></param>
        ///<param name="Previous image link ID"></param>

        expBrowser = this;

        this.imageCollection = col;
        this.imageElementID = imgEl;
        this.captionElementID = captionEl;
        this.nextButtonID = nextEl;
        this.previousButtonID = prevEl;
        this.currentImageIndex = 0;

        this.preloadImages();

        this.displayImage();

        // events
        Event.observe(document.getElementById(this.nextButtonID), 'click', function() {
            expBrowser.nextImage();
        });
        Event.observe(document.getElementById(this.previousButtonID), 'click', function() {
            expBrowser.prevoiusImage();
        });
    },

    preloadImages: function() {
        ///<summary>Preload all images in the collection</summary>

        var pic;
        for (var i = 0; i < this.imageCollection.length; i++) {
            pic = new Image(20, 20);
            pic.src = this.imageCollection[i].path;
        }
    },

    displayImage: function() {
        ///<summary>Display the image in the collection at the current image index</summary>

        this._imageChangeStep1();
    },

    _imageChangeStep1: function() {
        ///<summary></summary>

        // TODO : perform Effect and add a delay before moving to step 2
        this._imageChangeStep2();
    },
    _imageChangeStep2: function() {
        ///<summary></summary>

        var path = this.imageCollection[this.currentImageIndex].path;
        var title = this.imageCollection[this.currentImageIndex].caption;

        // if (path.indexOf('thumbnailpreview.axd') < 1)
            // path = path.replace('/developments/', '/Miller.HomesWeb/developments/');
            
        document.getElementById(this.imageElementID).innerHTML = '<img src="' + path + '" alt="' + title + '" />'
        document.getElementById(this.captionElementID).innerHTML = title;

        // TODO : add a delay before moving to step 3
        this._imageChangeStep3();
    },
    _imageChangeStep3: function() {
        ///<summary></summary>

        // TODO : perform Effect
    },

    nextImage: function() {
        ///<summary>Display the next image in the collection or the first if at the end of the collection</summary>

        if (this.currentImageIndex + 1 < this.imageCollection.length)
            this.currentImageIndex++;
        else
            this.currentImageIndex = 0;

        this.displayImage();
    },

    prevoiusImage: function() {
        ///<summary>Display the previous image in the collection or the last at the start of the collection</summary>

        if (this.currentImageIndex > 0)
            this.currentImageIndex--;
        else
            this.currentImageIndex = this.imageCollection.length - 1;

        this.displayImage();
    }

};