/// <reference name="MicrosoftAjax.js"/>

Type.registerNamespace("UrbanCult.Components");

UrbanCult.Components.FunBoxAnimation = function(element) {
    UrbanCult.Components.FunBoxAnimation.initializeBase(this, [element]);

    this._elements = [];
    this._nextElement = null;
    this._prevElement = null;
    this._resumeElement = null;
    this._indexElements = [];
    this._index = -1;
    this._isAutomated = false;
    this._elementsWidth = null;

    this._viewNextHandler = null;
    this._viewPrevHandler = null;
    this._viewByIndexHandler = null;
    this._resumeHandler = null;
    this._pauseHandler = null;
    this._sequence = null;
    this._directionNext = null;

    this._duration1 = null;
    this._duration2 = null;
    this._duration3 = null;
    this._duration4 = null;
    this._duration5 = null;
    this._horizontal1 = null;
    this._horizontal2 = null;
    this._horizontal3 = null;
    this._horizontal4 = null;
    this._horizontal5 = null;
    this._target = null;
    this._timer = new Sys.Timer();
    this._timerPaused = false;

    this._isViewedByIndex = false;
    this._sourceIndex = -1;
    this._targetIndex = -1;

    this._elementsForAnimation = [];
    this._animations = [];
}

UrbanCult.Components.FunBoxAnimation.prototype = {
    initialize: function() {
        UrbanCult.Components.FunBoxAnimation.callBaseMethod(this, 'initialize');

        this._viewNextHandler = Function.createDelegate(this, this.viewNext);
        this._viewPrevHandler = Function.createDelegate(this, this.viewPrev);
        this._viewByIndexHandler = Function.createDelegate(this, this.viewByIndex);
        this._resumeHandler = Function.createDelegate(this, this.timerResume);
        this._pauseHandler = Function.createDelegate(this, this.timerPause);

        $addHandler(this._nextElement, 'click', this._viewNextHandler);
        $addHandler(this._prevElement, 'click', this._viewPrevHandler);
        $addHandler(this._resumeElement, 'click', this._resumeHandler);

        $addHandler(this._nextElement, 'click', this._pauseHandler);
        $addHandler(this._prevElement, 'click', this._pauseHandler);
        $addHandler(this.get_element(), 'click', this._pauseHandler);

        for (var i = 0; i < this._indexElements.length; i++) {
            $addHandler(this._indexElements[i], 'click', this._viewByIndexHandler);
            $addHandler(this._indexElements[i], 'click', this._pauseHandler);

        }
        this.startTimer();
    },
    dispose: function() {
        $removeHandler(this._nextElement, 'click', this._viewNextHandler);
        $removeHandler(this._prevElement, 'click', this._viewPrevHandler);
        $removeHandler(this._resumeElement, 'click', this._resumeHandler);

        $removeHandler(this._nextElement, 'click', this._pauseHandler);
        $removeHandler(this._prevElement, 'click', this._pauseHandler);

        $removeHandler(this.get_element(), 'click', this._pauseHandler);

        for (var i = 0; i < this._indexElements.length; i++) {
            $removeHandler(this._indexElements[i], 'click', this._viewByIndexHandler);
            $removeHandler(this._indexElements[i], 'click', this._pauseHandler);
        }

        UrbanCult.Components.FunBoxAnimation.callBaseMethod(this, 'dispose');
    },

    startTimer: function() {
        this._timer.set_interval(6000);
        this._timer.add_tick(this._viewNextHandler);
        this._timer.set_enabled(true);
    },

    timerPause: function() {
        if (this._timerPaused != null) {
            this._timer._stopTimer();
            this._timerPaused = this._timer._timer;
        }
    },

    timerResume: function() {
        if (this._timerPaused == null) {
            this._timer._startTimer();
            this._timerPaused = this._timer._timer;
        }
    },

    viewByIndex: function(evt) {
        this._isViewedByIndex = true;
        this._sourceIndex = this._index;
        this._targetIndex = evt.target.id.slice(20) - 1;
        this._elementsForAnimation = [];
        var j = 0;
        if (this._targetIndex >= this._index) {
            for (var i = this._index; i <= this._targetIndex; i++) {
                if (j == 0) {
                    this._elements[i].style.left = '0px';
                    this._elements[i].style.display = 'block';
                }
                else {
                    this._elements[i].style.left = (this._elementsWidth * j) + 'px';
                    this._elements[i].style.display = 'block';
                    this._index++;
                }
                j++;
                this._elementsForAnimation.push(this._elements[i]);
            }
            this._directionNext = false;
            this._render();
        }
        else if (this._targetIndex < this._index) {
            for (var i = this._index; i >= this._targetIndex; i--) {
                if (j == 0) {
                    this._elements[i].style.left = '0px';
                    this._elements[i].style.display = 'block';
                }
                else {
                    this._elements[i].style.left = '-' + (this._elementsWidth * j) + 'px';
                    this._elements[i].style.display = 'block';
                    this._index--;
                }
                j++;
                this._elementsForAnimation.push(this._elements[i]);
            }
            this._directionNext = true;
            this._render();
        }
    },

    viewNext: function(evt) {
        this._isViewedByIndex = false;
        this._elementsForAnimation = [];
        this._elements[this._index].style.display = 'block';
        this._elementsForAnimation.push(this._elements[this._index]);
        this._indexElements[this._index].src = "img/indicatoroff.gif";
        if (this._index >= this._elements.length - 1) {
            this._index = -1;
        }
        this._index++;
        this._directionNext = false;
        this._elements[this._index].style.left = this._elementsWidth + 'px';
        this._elements[this._index].style.display = 'block';
        this._elementsForAnimation.push(this._elements[this._index]);
        this._indexElements[this._index].src = "img/indicatoron.gif";
        this._render();
    },

    viewPrev: function(evt) {
        this._isViewedByIndex = false;
        this._elementsForAnimation = [];
        this._elements[this._index].style.display = 'block';
        this._elementsForAnimation.push(this._elements[this._index]);
        this._indexElements[this._index].src = "img/indicatoroff.gif";
        if (this._index <= 0) {
            this._index = this._elements.length;
        }
        this._index--;
        this._directionNext = true;
        this._elements[this._index].style.left = '-' + this._elementsWidth + 'px';
        this._elements[this._index].style.display = 'block';
        this._elementsForAnimation.push(this._elements[this._index]);
        this._indexElements[this._index].src = "img/indicatoron.gif";
        this._render();
    },

    _render: function() {
        this._animations = [];
        for (var i = 0; i < this._elementsForAnimation.length; i++) {
            this._createAnimation(this._elementsForAnimation[i]);
        }
        this._playTransition();
    },

    _createAnimation: function(element) {
        var multiplayer = this._elementsForAnimation.length;
        var temp1 = this._horizontal1;
        var temp2 = this._horizontal2;
        var temp3 = this._horizontal3;
        var temp4 = this._horizontal4;
        var temp5 = this._horizontal5;
        this._duration1 = 0.1;
        this._duration2 = 0.1;
        this._duration3 = 0.1;
        this._duration4 = 0.1;
        this._duration5 = 0.1;

        if (this._directionNext == false) {
            temp1 = -this._horizontal1;
            temp2 = -this._horizontal2;
            temp3 = -this._horizontal3;
            temp4 = -this._horizontal4;
            temp5 = -this._horizontal5;
        }
        temp1 = temp1 * (multiplayer - 1);
        temp2 = temp2 * (multiplayer - 1);
        temp3 = temp3 * (multiplayer - 1);
        temp4 = temp4 * (multiplayer - 1);
        temp5 = temp5 * (multiplayer - 1);

        this._sequence = AjaxControlToolkit.Animation.createAnimation(
        {
            "AnimationName": "Sequence",
            "AnimationTarget": element.id,
            "AnimationChildren":
            [
                {
                    "AnimationName": "Move",
                    "Duration": this._duration1,
                    "Horizontal": temp1,
                    "Unit": "px"
                },
                {
                    "AnimationName": "Move",
                    "Duration": this._duration2,
                    "Horizontal": temp2,
                    "Unit": "px"
                },
                {
                    "AnimationName": "Move",
                    "Duration": this._duration3,
                    "Horizontal": temp3,
                    "Unit": "px"
                },
                {
                    "AnimationName": "Move",
                    "Duration": this._duration4,
                    "Horizontal": temp4,
                    "Unit": "px"
                },
                {
                    "AnimationName": "Move",
                    "Duration": this._duration5,
                    "Horizontal": temp5,
                    "Unit": "px"
                }
            ]
        });

        if (this._animations.length == this._elementsForAnimation.length - 1) {
            function onSequenceEnded() {
                $addHandler(this._nextElement, 'click', this._viewNextHandler);
                $addHandler(this._prevElement, 'click', this._viewPrevHandler);
                for (var i = 0; i < this._indexElements.length; i++) {
                    $addHandler(this._indexElements[i], 'click', this._viewByIndexHandler);
                }
                if (this._isViewedByIndex) {
                    this._indexElements[this._sourceIndex].src = "img/indicatoroff.gif";
                    this._indexElements[this._targetIndex].src = "img/indicatoron.gif";
                }

                for (var i = 0; i < this._animations.length; i++) {
                    this._animations[i].clear();
                }

                this._sequence.clear();
            }
            this._sequence.add_ended(Function.createDelegate(this, onSequenceEnded));
        }
        this._animations.push(this._sequence);
    },

    _playTransition: function() {
        $removeHandler(this._nextElement, 'click', this._viewNextHandler);
        $removeHandler(this._prevElement, 'click', this._viewPrevHandler);
        for (var i = 0; i < this._indexElements.length; i++) {
            $removeHandler(this._indexElements[i], 'click', this._viewByIndexHandler);
        }

        for (var i = 0; i < this._animations.length; i++) {
            this._animations[i].play();
        }
    },

    get_elements: function() {
        return this._elements;
    },

    set_elements: function(value) {
        this._elements = value;

        if (this._elements.length > 0)
            this._index = 0;
    },

    get_oldElement: function() {
        return this._oldElement;
    },

    set_oldElement: function(value) {
        return this._oldElement = value;
    },

    get_nextElement: function() {
        return this._nextElement;
    },

    set_nextElement: function(value) {
        return this._nextElement = value;
    },

    get_prevElement: function() {
        return this._prevElement;
    },

    set_prevElement: function(value) {
        this._prevElement = value;
    },

    get_resumeElement: function() {
        return this._resumeElement;
    },

    set_resumeElement: function(value) {
        this._resumeElement = value;
    },

    get_indexElements: function() {
        return this._indexElements;
    },

    set_indexElements: function(value) {
        this._indexElements = value;
    },

    get_isAutomated: function() {
        return this._isAutomated;
    },

    set_isAutomated: function(value) {
        this._isAutomated = value;
    },

    get_elementsWidth: function() {
        return this._elementsWidth;
    },

    set_elementsWidth: function(value) {
        this._elementsWidth = value;
    },

    get_horizontal1: function() {
        return this._horizontal1;
    },

    set_horizontal1: function(value) {
        this._horizontal1 = value;
    },

    get_horizontal2: function() {
        return this._horizontal2;
    },

    set_horizontal2: function(value) {
        this._horizontal2 = value;
    },

    get_horizontal3: function() {
        return this._horizontal3;
    },

    set_horizontal3: function(value) {
        this._horizontal3 = value;
    },

    get_horizontal4: function() {
        return this._horizontal4;
    },

    set_horizontal4: function(value) {
        this._horizontal4 = value;
    },

    get_horizontal5: function() {
        return this._horizontal5;
    },

    set_horizontal5: function(value) {
        this._horizontal5 = value;
    }
}
UrbanCult.Components.FunBoxAnimation.registerClass('FunBoxAnimation', Sys.UI.Control);

if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();