﻿function addListener(element, type, expression, bubbling) {
    bubbling = bubbling || false;
    if (window.addEventListener) { // Standard
        element.addEventListener(type, expression, bubbling);
        return true;
    } else if (window.attachEvent) { // IE
        element.attachEvent('on' + type, expression);
        return true;
    } else return false;
}


var ImageLoader = function(url) {
    this.url = url;
    this.image = null;
    this.loadEvent = null;
};

ImageLoader.prototype = {
    load: function() {
        this.image = document.createElement('img');
        var url = this.url;
        var image = this.image;
        var loadEvent = this.loadEvent;
        addListener(this.image, 'load', function(e) {
            if (loadEvent != null) {
                loadEvent(url, image);
            }
        }, false);
        this.image.src = this.url;
    },
    getImage: function() {
        return this.image;
    }
};
var PhotoGalerry = function(gelerryDiv, images, imageClassName) {
    this.galerryDiv = document.getElementById(gelerryDiv);
    this.images = images;
    this.statusObjects = new Array();
    this.imageClassName = imageClassName;
    this.id = PhotoGalerry.id++;
    PhotoGalerry.instances[this.id] = this;

    this.galerryDiv.innerHTML = '';
};


PhotoGalerry.prototype = {
    id: Object,
    galerryDiv: Object,
    statusObjects: Array,
    timeBetweenSlides: Number,
    imageClassName: String,
    currentImage: Number,
    nextImage: Number,
    currentOpacity: Number,

    play: function() {
        if (!this.statusObjects[0])
            this.createImage(0);
    },
    playNextImage: function() {
        var next = this.currentImage + 1;
        if (!this.images[next]) next = 0;
        if (this.getImage(next)) {
            this.nextImage = next;
            this.currentOpacity = 100;

            this.getImage(this.currentImage).style.visibility = 'visible';
            this.getImage(this.nextImage).style.visibility = 'visible';
            if (navigator.userAgent.indexOf('Opera') < 0) {
                //this.getImage(this.nextImage).style.visibility = 'visible';
            }


            if (document.all) {	//IE
                this.getImage(this.currentImage).style.filter = 'alpha(opacity=100)';
                this.getImage(this.nextImage).style.filter = 'alpha(opacity=1)';
            } else {
                this.getImage(this.currentImage).style.opacity = 0.99;
                this.getImage(this.nextImage).style.opacity = 0.01;
            }

            setTimeout('PhotoGalerry.instances[' + this.id + '].switchImages()', 100);
        }
        else {
            setTimeout('PhotoGalerry.instances[' + this.id + '].playNextImage()', 100);
        }
    },
    switchImages: function() {
        this.currentOpacity -= 10;
        if (this.currentOpacity > 0) {
            if (document.all) {
                this.getImage(this.currentImage).style.filter = 'alpha(opacity=' + this.currentOpacity + ')';
                this.getImage(this.nextImage).style.filter = 'alpha(opacity=' + (100 - this.currentOpacity) + ')';
            } else {
                this.getImage(this.currentImage).style.opacity = Math.max(0.01, this.currentOpacity / 100); // Can't use 1 and 0 because of screen flickering in FF
                this.getImage(this.nextImage).style.opacity = Math.min(0.99, (1 - (this.currentOpacity / 100)));
            }
            setTimeout('PhotoGalerry.instances[' + this.id + '].switchImages()', 50);
        }
        else {
            if (document.all) {
                this.getImage(this.currentImage).style.filter = 'alpha(opacity=0)';
                this.getImage(this.nextImage).style.filter = 'alpha(opacity=100)';
            } else {
                this.getImage(this.currentImage).style.opacity = 0.01; // Can't use 1 and 0 because of screen flickering in FF
                this.getImage(this.nextImage).style.opacity = 0.99;
            }
            this.getImage(this.currentImage).style.visibility = 'hidden';
            this.currentImage = this.nextImage;
            setTimeout('PhotoGalerry.instances[' + this.id + '].playNextImage()', this.timeBetweenSlides);
        }

    },
    getImage: function(index) {
        return this.galerryDiv.getElementsByTagName('IMG')[index];
    },
    createImage: function(index) {
        if (index != 0) {
            var previosImageNumber = index - 1;
            this.statusObjects[previosImageNumber].loader.image.style.visibility = 'hidden';
            this.galerryDiv.appendChild(this.statusObjects[previosImageNumber].loader.image);
            this.statusObjects[previosImageNumber].loaded = true;
            this.getImage(previosImageNumber).className = this.imageClassName;
            if (previosImageNumber == 0) {
                this.getImage(0).style.visibility = 'visible';
                this.currentImage = 0;
                setTimeout('PhotoGalerry.instances[' + this.id + '].playNextImage()', this.timeBetweenSlides);
            }
        }
        if (!this.statusObjects[index] && this.statusObjects.length < this.images.length) {
            this.statusObjects[index] = new Object();
            var loader = new ImageLoader(images[index]);
            this.statusObjects[index].loader = loader;
            var thisInatance = 'PhotoGalerry.instances[' + this.id + '].createImage(' + (index + 1) + ');';
            loader.loadEvent = function(url, image) { eval(thisInatance); }
            loader.load();
        }
    },

    getTotalImagesCount: function() {
        return this.images.length;
    }
};

PhotoGalerry.id = 0;
PhotoGalerry.instances = new Array();


