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

function BannerControl() {
    this.init('#banner_wrap');
    this._getListOfImages();
}
BannerControl.prototype = {
    init: function (selector) {
        this.bannerControl = $(selector);
        this.banner = $('#b_img_wrap', this.bannerControl);
        this._createSecondImage();

        this.delay = "3000";

        this._isTimeOut = false;
        this._isImageLoad = false;

        this._isHover = false;
        this._isChangingImage = false;

        this.indexOfHtmlImg = 0;
        this.indexOfImg = 0;
        //        this.banner.bind("mouseover", $.proxy(this.onMouseOver, this));
        //        this.banner.bind("mouseout", $.proxy(this.onMouseOut, this));
        this.bannerControl.hover($.proxy(this.onMouseOver, this), $.proxy(this.onMouseOut, this));

        $('.b_toggle', this.bannerControl).click($.proxy(function (event) {
            event.preventDefault();

            //this.indexOfImg = parseInt(event.target.hash.replace('#', ''));

            //console.log("fast: " + this.indexOfImg);

            this._changeImageFast(parseInt($(event.target).attr('index')));
        }, this));

        this.image = new Image();
        $(this.image).load($.proxy(this.onImageLoadSuccess, this));
        //this.image.bind("load", $.proxy(this.onImageLoaded, this));
    },
    _createSecondImage: function () {
        $("<img />").attr("galleryimg", "no").css("display", "none").insertAfter($("img:eq(0)", this.banner));
    },
    go: function () {
        if (this.listOfImages[this.indexOfImg].href != null)
            $('#b_img_wrap a').attr('href', this.listOfImages[this.indexOfImg].href);
        else
            $('#b_img_wrap a').attr('href', '#');

        this.next();

        $(this.image).attr("src", this.listOfImages[this.indexOfImg].src);
    },
    changeImage: function () {
        if (this._isTimeOut == true && this._isImageLoad == true && !this._isHover) {
            this._isChangingImage = true;
            this._isTimeOut = false;
            this._isImageLoad = false;

            //var tImg = $("img", this.banner).eq(this.indexOfHtmlImg);
            $("img", this.banner).each($.proxy(function (index, el) {
                if (index != this.indexOfHtmlImg) {
                    $(el).fadeOut(500);
                }
                else {
                    //                    $(el).css("left", -this.listOfImages[this.indexOfImg].left + "px");
                    //                    $(el).css("top", -this.listOfImages[this.indexOfImg].top + "px");


                    $(el).attr("src", this.listOfImages[this.indexOfImg].src).fadeIn(500, $.proxy(function () {
                        this.go();
                        this.startTimer();
                        this._isChangingImage = false;
                    }, this));
                }
            }, this));
        }
    },
    _changeImageFast: function (indexOfImage) {
        //        this._isChangingImage = true;
        //        this._isTimeOut = false;
        //        this._isImageLoad = false;        
        this.stopTimer();

        this.indexOfImg = indexOfImage;
        this._nextHtmlImg();

        var visibleImg = $("img", this.banner).filter(function (index) {
            return $(this).css('display') != 'none';
        });



        visibleImg.attr("src", this.listOfImages[indexOfImage].src);
        this._setSelectedBanner(indexOfImage);

        this.go();
        //this.startTimer();
        //this._isChangingImage = false;
    },
    startTimer: function () {
        this.timer = setInterval($.proxy(this.onTimeOut, this), this.delay);
        //console.log("startTimer: " + this.timer);
    },
    stopTimer: function () {
        clearInterval(this.timer);
        //console.log("stopTimer: " + this.timer);
        this.timer = null;
    },

    _setSelectedBanner: function (indexOfBanner) {
        if (indexOfBanner == null) {
            $('.b_toggle', this.bannerControl).each($.proxy(function (index, element) {
                var el = $(element);
                var hash = parseInt($(element).attr('index'));
                if (el.hasClass('selected') == true) {
                    el.removeClass('selected');
                    //                console.log(hash);
                }
                if (hash == this.indexOfImg) {
                    el.addClass('selected');
                }
            }, this));
        }
        else {
            $('.b_toggle', this.bannerControl).each($.proxy(function (index, element) {
                var el = $(element);
                var hash = parseInt($(element).attr('index'));
                if (el.hasClass('selected') == true) {
                    el.removeClass('selected');
                    //                console.log(hash);
                }
                if (hash == indexOfBanner) {
                    el.addClass('selected');
                }
            }, this));
        }
    },
    _nextHtmlImg: function () {
        if (this.indexOfHtmlImg == 0) this.indexOfHtmlImg++;
        else { this.indexOfHtmlImg = 0; }
    },
    _nextImg: function () {
        this._setSelectedBanner();

        //console.log("curent: " + this.indexOfImg);

        if (this.indexOfImg < this.listOfImages.length - 1) this.indexOfImg++;
        else { this.indexOfImg = 0; }

        //console.log("next: " + this.indexOfImg);
    },
    next: function () {
        this._nextHtmlImg();
        this._nextImg();
    },
    onMouseOver: function (event) {
        this._isHover = true;
        this.stopTimer();
    },
    onMouseOut: function (event) {
        this._isHover = false;
        if (this._isChangingImage != true) this.startTimer();
    },

    onImageLoadSuccess: function (event) {
        //        $.ajax({
        //            url: "imageDelay",
        //            data: "{}",
        //            success: $.proxy(function () {
        this._isImageLoad = true;
        this.changeImage();
        //            }, this)
        //        });
    },
    onImageLoadError: function (event) {
    },
    _getListOfImages: function () {
        $.ajax({
            type: "POST",
            url: "home/GetList",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: "{}",
            success: $.proxy(this._listOfImageLoadSuccess, this),
            error: $.proxy(this._listOfImageLoadError, this)
        });
    },
    _listOfImageLoadSuccess: function (result) {
        this.listOfImages = result;
        this.go();
        this.startTimer();
    },
    _listOfImageLoadError: function (XMLHttpRequest, textStatus, errorThrown) {
        //alert(textStatus);
    },
    onTimeOut: function () {
        this._isTimeOut = true;
        this.stopTimer();
        this.changeImage();
    }
}