/*
    

*/

Site.Widgets.EstimateSlider = Class.create
(
    Site.Base,
    {
        initialize: function(handle, availableBar, appliedBar, options)
        {
            this.handle = handle;
            this.availableBar = availableBar;
            this.appliedBar = appliedBar;

            this.ticks = this.appliedBar.select("div.tick");
            
            this.setOptions
            (
                options,
                {
                    width: 260,
                    handleLeftStart: 0
                    //handleLeftStart: 120
                }
            );
            
            this.width = this.options.width;
            this.handleWidth = this.handle.getWidth();
            
            this.handleOffset = Math.round(this.handleWidth / 2);

            this.usableWidth = this.width - this.handleWidth;
            this.midPoint = Math.round( ( this.usableWidth / 2 ) );

            this.snapPositions = 
            [
                Math.round( 0.25 * this.usableWidth ), Math.round( 0.75 * this.usableWidth )
                //Math.round( 0.33 * this.usableWidth ), Math.round( 0.66 * this.usableWidth )
            ];
            
            this.tickPositions = 
            [
                this.ticks[0].offsetWidth - 4, this.midPoint + 4, this.usableWidth
            ];
            
            this.tickValues = [1000, 10000, 100000];
            
            this.addBlocks("handleSnap", "handleOnDrag", "handleOnEnd");
            //this.addObservers("ignoreClick");
            this.addObservers("ignoreClick", "handleDirectClick");
            
            this.handleDraggable = new Draggable(this.handle, { starteffect: false, endeffect: false, constraint: "horizontal", snap: this.blocks.handleSnap, onDrag: this.blocks.handleOnDrag, onEnd: this.blocks.handleOnEnd });

            addEvent(this.handle, "click", this.observers.ignoreClick);
            
            this.handle.style.left = this.getXSnap(this.options.handleLeftStart) + "px";

            this.handleOnEnd();
            
            this.tickSpots = $('estimate-controls').select('div div.tick');
            this.tickSpots.each
            (                
                function(item)
                    {
                        //alert(item.id)
                        addEvent(item, "click", this.observers.handleDirectClick);
                    },
                    this
            )
        },
        
        destroy: function()
        {
            removeEvent(this.handle, "click", this.observers.ignoreClick);
            this.handleDraggable.destroy();            
        },
        
        ignoreClick: function(event)
        {
            Event.stop(event);
        },
        
        handleSnap: function(x, y)
        {
            return [this.getXSnap(x), y];
        },
        
        getXSnap: function(x)
        {
            if (x < this.snapPositions[0])
            {
                this.value = this.tickValues[0];
                return this.tickPositions[0];
            }
            else if (x >= this.snapPositions[0] && x<=this.midPoint || x >= this.midPoint && x <= this.snapPositions[1])
            {
                this.value = this.tickValues[1];
                return this.tickPositions[1];
            }
            else// (x >= this.snapPositions[1])
            {
                this.value = this.tickValues[2];
                return this.tickPositions[2];
            }
        },
        
        handleOnDrag: function()
        {
            this.updateAppliedBar();
            
            if (this.options.onChange)
            {
                this.options.onChange(this.value);
            }
            
        },
        
        handleOnEnd: function()
        {
            this.updateAppliedBar();
            
            if (this.options.onChange)
            {
                this.options.onChange(this.value);
            }
        },
        
        /* new */
        handleDirectClick: function(event)
        {
                //alert('test');
                //alert(Event.element(event).id);
                if(Event.element(event).id == 'applied-1' || Event.element(event).id == 'available-1'){
                    this.clickedSpot = 0;
                } else if(Event.element(event).id == 'applied-2' || Event.element(event).id == 'available-2'){
                    this.clickedSpot = 1;
                } else {
                    this.clickedSpot = 2;
                }
                
                this.value  = this.tickValues[this.clickedSpot];
                this.left   = parseInt(this.tickPositions[this.clickedSpot]);
                this.appliedBar.style.width = this.left + "px";
                this.handle.style.left = this.tickPositions[this.clickedSpot] + "px";
                if (this.options.onChange)
                {
                    this.options.onChange(this.value);
                }
                
        },
        
        lookupPosition: function(left)
        {
            if (left == 0)
                return 0;
                
            for (var i=0; i<this.tickPositions.length; i++)
            {
                if (i != this.tickPositions.length - 1)
                {
                    if (left > this.tickPositions[i] && left <= this.tickPositions[i + 1])
                    {
                        return i;
                    }
                }
            }
            
            return this.tickPositions.length - 1;
        },
        
        updateAppliedBar: function()
        {
            this.left = parseInt(this.handle.style.left);
            this.appliedBar.style.width = this.left + "px";
            
            // we only calculate the value on drag end for performance
        }
    }
);