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

Type.registerNamespace("CorvusInfo.Components");

CorvusInfo.Components.ReferenceAnimation = function(element) {
    CorvusInfo.Components.ReferenceAnimation.initializeBase(this, [element]);

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

    this._viewNextHandler = null;
    this._viewPrevHandler = null;
    this._viewByIndexHandler = 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._isViewedByIndex = false;
    this._sourceIndex = -1;
    this._targetIndex = -1;

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

CorvusInfo.Components.ReferenceAnimation.prototype = {
    initialize: function() {
        CorvusInfo.Components.ReferenceAnimation.callBaseMethod(this, 'initialize');

        this._viewNextHandler = Function.createDelegate(this, this.viewNext);
        this._viewPrevHandler = Function.createDelegate(this, this.viewPrev);
        this._viewByIndexHandler = Function.createDelegate(this, this.viewByIndex);
        $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);
        }
    },
    dispose: 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);
        }

        CorvusInfo.Components.ReferenceAnimation.callBaseMethod(this, 'dispose');
    },

    viewByIndex: function(evt) {
        this._isViewedByIndex = true;
        this._sourceIndex = this._index;
        this._targetIndex = evt.target.firstChild.data - 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) {
        if (this._index < this._elements.length - 1) {
            this._isViewedByIndex = false;
            this._elementsForAnimation = [];
            this._elements[this._index].style.display = 'block';
            this._elementsForAnimation.push(this._elements[this._index]);
            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]);
            Sys.UI.DomElement.removeCssClass(this._indexElements[this._index - 1], 'active');
            Sys.UI.DomElement.addCssClass(this._indexElements[this._index], 'active');
            this._render();

        }
    },

    viewPrev: function(evt) {
        if (this._index > 0) {
            this._isViewedByIndex = false;
            this._elementsForAnimation = [];
            this._elements[this._index].style.display = 'block';
            this._elementsForAnimation.push(this._elements[this._index]);
            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]);
            Sys.UI.DomElement.removeCssClass(this._indexElements[this._index + 1], 'active');
            Sys.UI.DomElement.addCssClass(this._indexElements[this._index], 'active');
            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;
        this._horizontal1 = 298;
        this._horizontal2 = 248;
        this._horizontal3 = 198;
        this._horizontal4 = 148;
        this._horizontal5 = 98;
        this._duration1 = 0.1;
        this._duration2 = 0.1;
        this._duration3 = 0.1;
        this._duration4 = 0.1;
        this._duration5 = 0.1;

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

        this._sequence = AjaxControlToolkit.Animation.createAnimation(
        {
            "AnimationName": "Sequence",
            "AnimationTarget": element.id,
            "AnimationChildren":
            [
                {
                    "AnimationName": "Move",
                    "Duration": this._duration1,
                    "Horizontal": this._horizontal1,
                    "Unit": "px"
                },
                {
                    "AnimationName": "Move",
                    "Duration": this._duration2,
                    "Horizontal": this._horizontal2,
                    "Unit": "px"
                },
                {
                    "AnimationName": "Move",
                    "Duration": this._duration3,
                    "Horizontal": this._horizontal3,
                    "Unit": "px"
                },
                {
                    "AnimationName": "Move",
                    "Duration": this._duration4,
                    "Horizontal": this._horizontal4,
                    "Unit": "px"
                },
                {
                    "AnimationName": "Move",
                    "Duration": this._duration5,
                    "Horizontal": this._horizontal5,
                    "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) {
                    Sys.UI.DomElement.removeCssClass(this._indexElements[this._sourceIndex], 'active');
                    Sys.UI.DomElement.addCssClass(this._indexElements[this._targetIndex], 'active');
                }

                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_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;
    }
}
CorvusInfo.Components.ReferenceAnimation.registerClass('ReferenceAnimation', Sys.UI.Control);

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