_.namespace('PORSCHE.View.SplitterContainer');
PORSCHE.View.SplitterContainer = PORSCHE.View.Module.extend({

        tag: 'tagName',
        className: 'module',
        templateHTML: undefined,

        usedElements: {
            $splitter: undefined,
            $dragger: undefined,
            $left: undefined,
            $right: undefined,
            $leftContent: undefined,
            $rightContent: undefined
        },
        prevWidth: undefined,
        fullwidth: undefined,

        initialize: function (options)
        {
        },

        render: function ()
        {
            this.$el.html(this.model.get('templateHTML'));
            var dataModel = this.model.get("dataModel");
            var background1 = dataModel.splitter.background1;
            var background2 = dataModel.splitter.background2;

            this.usedElements = {
                $splitter: this.$el.find('.splitterParentContainer'),
                $dragger: this.$el.find('.splitterDragger'),
                $left: this.$el.find('.splitterLeftContainer'),
                $right: this.$el.find('.splitterRightContainer'),
                $leftContent: this.$el.find('.splitterLeftContainer > div'),
                $rightContent: this.$el.find('.splitterRightContainer > div')
            };

            // Dummy image to resize the container properly
            this.usedElements.$splitter.append("<img src='" + background1 + "' class='dummy-image'/>");

            // Click events
            this.usedElements.$left.on('click', _.bind(this.onClick, this));
            this.usedElements.$right.on('click', _.bind(this.onClick, this));

            // Resize events
            $(window).on('resize', _.bind(this.onResize, this));

            if (Draggable)
            {
                Draggable.create(this.usedElements.$dragger, {
                    type: "left",
                    lockAxis: true,

                    throwProps: true,
                    overshootTolerance: 0,

                    bounds: this.usedElements.$splitter,

                    onDrag: this.onDrag,
                    onDragParams: [this],

                    onDragStart: this.onDragStart,
                    onDragStartParams: [this],

                    onThrowComplete: this.onThrowComplete,
                    onThrowCompleteParams: [this],

                    onThrowUpdate: this.onThrowUpdate,
                    onThrowUpdateParams: [this]

                })
                ;
            }

            this.usedElements.$left.css('background-image', "url(" + background1 + ")");
            this.usedElements.$right.css('background-image', "url(" + background2 + ")");

            return this;
        },


        // LISTENERS

        onDragStart: function (splitterView)
        {
            splitterView.fullwidth = splitterView.usedElements.$splitter.actual('width');
        },
        onDrag: function (splitterView)
        {
            splitterView.updateContainers(this.x);
        },
        onThrowComplete: function (splitterView)
        {
            splitterView.updateContainers(this.endX);
        },
        onThrowUpdate: function (splitterView)
        {
            splitterView.updateContainers(this.x);
        },
        onClick: function (event)
        {
            this.fullwidth = this.usedElements.$splitter.actual('width');
            var eventLeft = event.clientX - this.usedElements.$splitter.offset().left;
            this.animateToPosition(eventLeft);
        },
        onResize: function ()
        {
            this.fullwidth = this.usedElements.$splitter.actual('width');
            this.animateToPosition(this.fullwidth / 2);
        },

        // DOM MANIPULATION

        updateContainers: function (pos)
        {
            pos = _.calculateInRangeValue(pos, 0, this.fullwidth);
            TweenMax.set(
                this.usedElements.$left,
                {
                    css: {
                        width: pos + 'px'
                    }
                }
            );
            TweenMax.set(
                this.usedElements.$right,
                {
                    css: {
                        width: (this.fullwidth - pos) + 'px'
                    }
                }
            );
        },


        // ANIMATION

        introAnimation: function (pos)
        {
            TweenMax.to(this.usedElements.$dragger, 0, {
                left: pos,
                onUpdate: this.updateContainers(this.usedElements.$splitter.actual('width') / 2)
            });
        },
        animateToPosition: function (pos)
        {
            var currentLeft = parseInt(this.usedElements.$dragger.css('left'));
            var tweenTarget = {left: currentLeft};
            TweenMax.to(tweenTarget, 1, {
                left: pos,
                onUpdate: function (splitterView, tween)
                {
                    TweenMax.set(
                        splitterView.usedElements.$dragger,
                        {
                            css: {
                                left: tweenTarget.left + 'px'
                            }
                        }
                    );

                    splitterView.updateContainers(tweenTarget.left);
                },
                onUpdateParams: [this, '{self}']
            });
        }

    })
    ;