/**
 * SliderImages
 * author: Ivan Shalaev
 * 
 * idImageArea - идентификатор области отображения изображений.
 * idListImages - идентификатор блока с изображениями.
 * autolist - автоматическое пролистывание (по умолчанию - true).
 * time - интервал смены изображений.
 */
function SliderImages(options) {
    this.width = 670;
    this.height = 390;
    this.imgLoader = 'ajax-loader.gif';
    this.idLoader = 'mySlideShowLoader';
    this.idImageArea = null;        
    this.idListImages = null;
    this.autolist = false;
    this.autoNav = true;
    this.previous = 'previmg';
    this.next = 'nextimg';
    this.time = 5000;
    this.animationTime = 250;
    this.numFrames = 25;
    this.timePerFrame = 10;
    this.listImages = [];
    this.objImages = [];
    this.handleImage = 0;
    this.curPos = 0;
    /** Таймеры. **/
    this.timerAuto = null;
    this.timerAnimation = null;
    this.timerLoader = null;
    /** Флаги. **/
    this.flagAuto = false;
    this.flagAnimation = false;
    this.showLoaderFlag = false;
    this.countEnter = 0;
    this.init(options);
    this.create();
};

SliderImages.prototype.init = function(options) {
    if (typeof options != 'object') return;
    if (options.width != undefined) this.width = options.width;
    if (options.height != undefined) this.height = options.height;
    if (options.imgLoader != undefined) this.imgLoader = options.imgLoader;
    if (options.idLoader != undefined) this.idLoader = options.idLoader;
    if (options.idImageArea != undefined) this.idImageArea = options.idImageArea;
    if (options.idListImages != undefined) this.idListImages = options.idListImages;
    this.autolist = (options.autolist !== undefined) ? options.autolist : this.autolist;
    this.autoNav = (options.autoNav !== undefined) ? options.autoNav : this.autoNav;
    if (options.previous != undefined) this.previous = options.previous;
    if (options.next != undefined) this.next = options.next;
    this.time = (options.time !== undefined) ? options.time : this.time;
    this.animationTime = (options.animationTime !== undefined) ? options.animationTime : this.animationTime;
    this.numFrames = (options.numFrames !== undefined) ? options.numFrames : this.numFrames;
    this.timePerFrame = this.animationTime / this.numFrames;
};

SliderImages.prototype.create = function() {
    var objListImages = document.getElementById(this.idListImages);
    var objImageArea = document.getElementById(this.idImageArea);
    if (!objListImages) return;
    if (!objImageArea) return;
    this.handleImage = 0;
    // Создание первого изображения.
    var firstImg = document.createElement('img');
    firstImg.style.visibility = 'hidden';
    firstImg.width = this.width;
    firstImg.height = this.height;
    firstImg.style.position = 'absolute';
    firstImg.style.margin = '0px';
    firstImg.style.border = '0px';
    firstImg.style.padding = '0px';
    //firstImg.style.zIndex = 2;
    firstImg.style.opacity = 0;
    firstImg.style.filter = 'alpha(opacity=0)';
    
    // Создание второго изображения.
    var secondImg = document.createElement('img');
    secondImg.style.visibility = 'hidden';
    secondImg.width = this.width;
    secondImg.height = this.height;
    secondImg.style.position = 'absolute';
    secondImg.style.margin = '0px';
    secondImg.style.border = '0px';
    secondImg.style.padding = '0px';
    //secondImg.style.zIndex = 1;
    secondImg.style.opacity = 1;
    secondImg.style.filter = 'alpha(opacity=100)';
    objImageArea.appendChild(secondImg);
    objImageArea.appendChild(firstImg);
    
    // Создание области сообщения загрузки.
    var top = (this.height / 2) - (42 / 2);
    var left = (this.width / 2) - (116 / 2);
    var loaderContent = '<table><tr>';
    loaderContent += '<td><img src="' + this.imgLoader + '" /></td>';
    loaderContent += '<td><span class="loader_msg">Загрузка...</span></td>';
    loaderContent += '</tr></table>';
    var loader = document.createElement('div');
    loader.id = this.idLoader;
    loader.innerHTML = loaderContent;
    loader.style.position = 'absolute';
    loader.style.top = top + 'px';
    loader.style.left = left + 'px';
    loader.style.zIndex = 3;
    loader.style.display = 'none';
    objImageArea.appendChild(loader);
    
    /** Сохранение объектов. **/
    this.handleImage = 0;
    this.objImages[this.handleImage] = firstImg;
    this.objImages[this.handleImage + 1] = secondImg;
    this.loader = loader;
};

/** Сброс таймеров, если были установлены. Запуск. **/
SliderImages.prototype.start = function(options) {
    if (typeof options == 'object') this.init(options);
    var objListImages = document.getElementById(this.idListImages);
    var objImageArea = document.getElementById(this.idImageArea);
    if (!objListImages) return;
    if (!objImageArea) return;
    this.stop();
    this.listImages = [];
    var listElemImages = objListImages.getElementsByTagName('a'); 
    
    // Получение списка элементов.
    var j = 0;
    for (var i = 0; i < listElemImages.length; i++) {
        var srcImg = listElemImages[i].getAttribute('href');
        if (srcImg == undefined || srcImg == '') continue;
        if (srcImg.lastIndexOf) {
            var b = srcImg.lastIndexOf('.');
            if (b != -1) {
                var ext = srcImg.substring(b+1);
                ext = ext.toLowerCase();
                if (!((ext == 'jpg') || (ext == 'jpeg') || (ext == 'gif') || (ext == 'png'))) continue;
                
            }
        }
        this.listImages[j] = srcImg;
        ++j;
    }
    if (this.listImages.length == 0) return;
    this.handleImage = 0;
    var firstImg = this.objImages[this.handleImage];
    var secondImg = this.objImages[this.handleImage + 1];
    firstImg.style.opacity = 0;
    firstImg.style.filter = 'alpha(opacity=0)';
    //firstImg.src = this.listImages[0];
    secondImg.style.opacity = 1;
    secondImg.style.filter = 'alpha(opacity=100)';
    //secondImg.src = this.listImages[0];
    
    if (this.autoNav) {
        if (this.listImages.length == 1) {
            var previous = document.getElementById(this.previous);
            var next = document.getElementById(this.next);
            if (previous) previous.style.visibility = 'hidden';
            if (next) next.style.visibility = 'hidden';
        } else {
            var previous = document.getElementById(this.previous);
            var next = document.getElementById(this.next);
            if (previous) previous.style.visibility = 'visible';
            if (next) next.style.visibility = 'visible';
        }
    }   
    this.curPos = 0;
    this.slideImage(this.curPos);
    if (this.autolist && (this.listImages.length > 1)) this.auto();
};

/** Сбросить все таймеры: эффекты, автоматическое пролистывание. **/
SliderImages.prototype.resetAllTimer = function() {
    // Таймер пролистывания.
    clearInterval(this.timerAuto);
    this.flagAuto = false;
    // Скрываем загрузчик.
    clearInterval(this.timerLoader);
    if (this.showLoaderFlag) this.hideLoader();
    // Остановка эффекта.
    clearInterval(this.timerAnimation);
    this.flagAnimation = false;
};

/** Сбросить все таймеры: эффекты, автоматическое пролистывание. **/
SliderImages.prototype.stop = function() {
    this.resetAllTimer();
};

/** Автоматическое пролистывание. **/
SliderImages.prototype.auto = function() {
    var obj = this;
    this.timerAuto = setInterval(function() {
        obj.list('1');
    }, this.time);
    this.flagAuto = true;
};

/** Навигация. **/
SliderImages.prototype.nav = function(pos) {
    if (this.flagAnimation == true) return;
    clearInterval(this.timerAuto);
    this.flagAuto = false;
    if (this.autolist) this.auto();
    this.list(pos);
};

/** Показать загрузчик. **/
SliderImages.prototype.showLoader = function() {
    this.showLoaderFlag = true;
    var loader = this.loader;
    loader.style.display = 'block';
    clearInterval(this.timerAuto);
    this.flagAuto = false;
};

/** Скрыть загрузчик. **/
SliderImages.prototype.hideLoader = function() {
    this.showLoaderFlag = false;
    var loader = this.loader;
    loader.style.display = 'none';
    clearInterval(this.timerAuto);
    this.flagAuto = false;
    if (this.autolist) this.auto();
};

/** Управление показом: 1 - вперед, -1 - назад. **/
SliderImages.prototype.list = function(pos) {
    /** На одну картинку вперед. **/
    var tmp = this.curPos;
    if (pos == 1) {
        ++tmp;
        if (tmp > (this.listImages.length - 1)) tmp = 0;
        if (tmp < 0) tmp = 0;
    }
    /** На одну картинку назад. **/
    if (pos == -1) {
        --tmp;
        if (tmp < 0) tmp = this.listImages.length - 1;
        if (tmp > (this.listImages.length - 1)) tmp = this.listImages.length - 1;
    }   
    this.slideImage(tmp);
};

/**  Отобразить картинку. **/
SliderImages.prototype.slideImage = function(key) {
    this.countEnter = 0;
    var srcImg = this.listImages[key];
    var firstImg = this.objImages[this.handleImage];
    var secondImg = this.objImages[this.handleImage + 1];
    var obj = this;
    /** Отключение таймера загрузки. **/
    clearInterval(this.timerLoader);
    if (this.showLoaderFlag) this.hideLoader();
    
    firstImg.onload = function() {
        if (firstImg.style.visibility == 'hidden') firstImg.style.visibility = 'visible';
        obj.animateCSS(firstImg, obj.numFrames, obj.timePerFrame, {
            opacity : function(f, t, n) {return ((1 * f) / n )},
            filter : function(f, t, n) {
                var tmp = ((100 * f) / n);
                return 'alpha(opacity=' + tmp + ')';
            }}, 
            function(){
                secondImg.src = firstImg.src;
            }
        );
        secondImg.onload = function() {
            if (secondImg.style.visibility == 'hidden') secondImg.style.visibility = 'visible';
            firstImg.style.opacity = 0;
            firstImg.style.filter = 'alpha(opacity=0)';
        };
        clearInterval(obj.timerLoader);
        if (obj.showLoaderFlag) obj.hideLoader();
    };
    
    this.timerLoader = setInterval(function() {
        if (obj.countEnter > 10) {
            obj.showLoader();
        }
        obj.countEnter++;
    }, 50);
    
    firstImg.src = srcImg;
    this.curPos = key;
};

/** Функция анимации. **/
SliderImages.prototype.animateCSS = function(element, numFrames, timePerFrame, animation, whendone) {
    var obj = this;
    this.flagAnimation = true;
    var frame = 0;
    var time = 0;
    
    this.timerAnimation = setInterval(function() {
        if (frame >= numFrames) {
            obj.flagAnimation = false;
            clearInterval(obj.timerAnimation);
            if (whendone) whendone(element);
            return;
        }
        for(var cssprop in animation) {
            try {
                element.style[cssprop] = animation[cssprop](frame, time, numFrames);
            } catch(e) {}
        }
        frame++;
        time += timePerFrame;
    }, timePerFrame);
};