/// <reference path="jquery-1.4.4-vsdoc.js" name="jquery-1.4.4-vsdoc.js"/>  

(function ($) {

    $.fn.fadeGallery = function (settings) {
        var _jqObj = this;
        var _isOver = false;
        var _hasTimer = false;
        var _currentIndex = 0;
        var _isPopupVisible = false;
        var _overlay = null;

        var _config = {
            timerDelay: 3000
            , transitionDuration: 1000
            , onlyOnMouseOver: false
            , usePopup: false
        };

        //debugger;

        if (settings) $.extend(_config, settings);

        function _initialize() {
            var id = _jqObj.get(0).id;

            if (_config.thumbs.length > 0) {
                if (_config.usePopup)
                    _jqObj.css('cursor', 'pointer');

                _jqObj.mouseover(onMouseOver);
                _jqObj.mouseout(onMouseOut);
                _jqObj.click(onClick);

                var loader = new Image();
                loader.onload = function () {
                    loader.onload = function () { };

                    var html = "<div style='position: relative;'>";
                    html += "<div id='" + id + "_back' style='position: absolute; top: 0px; left: 0px; right: 0px; display: none;'><img id='" + id + "_backImg' /></div>";
                    html += "<div id='" + id + "_front' style='position: absolute; top: 0px; left: 0px; right: 0px;'><img id='" + id + "_frontImg' src='" + _config.thumbs[_currentIndex] + "' /></div>";
                    html += "<div style='clear: both;'></div>"
                    html += "</div>";

                    _jqObj.html(html);

                    var frontImage = $('#' + id + '_frontImg');
                    var container = $(_jqObj.children()[0]);
                    container.css({
                        height: frontImage.height()
                        , width: frontImage.width()
                    });

                    _setTimer();
                }
                loader.src = _config.thumbs[_currentIndex];
            }
        };

        function _setTimer() {
            if (_hasTimer)
                return;

            if (_config.onlyOnMouseOver && !_isOver) {
                _hasTimer = false;
                return;
            }

            _hasTimer = true;
            setTimeout(showNextImage, _config.timerDelay);
        };

        function showNextImage() {
            if (_isPopupVisible) {
                _hasTimer = false;
                return;
            }

            if (_config.thumbs.length <= 1) {
                _hasTimer = false;
                return;
            }

            if (_config.onlyOnMouseOver && !_isOver) {
                _hasTimer = false;
                return;
            }

            var idx = _currentIndex + 1;
            if (idx > _config.thumbs.length - 1)
                idx = 0;

            var id = _jqObj.get(0).id;
            var container = $(_jqObj.children()[0]);
            var frontImage = $('#' + id + '_frontImg');
            var backImage = $('#' + id + '_backImg');

            var loader = new Image();
            loader.onload = function () {
                loader.onload = function () { };

                _currentIndex = idx;

                backImage.attr('src', _config.thumbs[idx]);

                frontImage.parent().fadeOut(_config.transitionDuration);
                backImage.parent().fadeIn(_config.transitionDuration, function () {
                    container.css({
                        height: backImage.height()
                        , width: backImage.width()
                    });

                    frontImage.attr('src', _config.thumbs[idx]);
                    frontImage.parent().show();
                    backImage.parent().hide();

                    _hasTimer = false;
                    _setTimer();
                });
            };
            loader.src = _config.thumbs[idx];
        };

        function showPopup() {
            if (_config.galleryId) {
                var gal = $find(_config.galleryId);
                if (gal != null)
                    gal.displayElement(_currentIndex);
            }
        }

        function onMouseOver(e) {
            _isOver = true;

            if (_config.onlyOnMouseOver)
                _setTimer();
        };

        function onMouseOut(e) {
            _isOver = false;
        };

        function onClick(e) {
            if (_config.usePopup) {
                showPopup();
            }
        };

        return this.each(function () {
            _initialize();
        });
    };

})(jQuery);