/*!
 * Ext JS Library 3.4.0
 * Copyright(c) 2006-2011 Sencha Inc.
 * licensing@sencha.com
 * http://www.sencha.com/license
 */
Ext.ns('Ext.ux');

Ext.ux.Rating = Ext.extend(Ext.util.Observable, {
	// Configuration options
    starWidth: 16,
    split: 1,
    resetValue: '',
	defaultSelected: -1,	
    selected: -1,
    showTitles: true,    
    
	// Our class constructor
    constructor : function(element, config) {
        Ext.apply(this, config);
        Ext.ux.Rating.superclass.constructor.call(this);
        
        this.addEvents(
            'change',
            'reset'
        );
        
        this.el = Ext.get(element);
        this.init();
    },
    
    init : function() {
        var me = this;
        
		// Some arrays we are going to store data in
        this.values = [];
        this.titles = [];
        this.stars = [];
		
		// We create a container to put all our stars into      
        this.container = this.el.createChild({
            cls: 'ux-rating-container ux-rating-clearfix'
        });
				
        if(this.canReset) {
            this.resetEl = this.container.createChild({
                cls: 'ux-rating-reset',
                cn: [{
                    tag: 'a',
                    title: this.showTitles ? (this.resetTitle || 'Reset your vote') : '',
                    html: 'Reset'
                }]
            });
            this.resetEl.visibilityMode = Ext.Element.DISPLAY;
            
            this.resetEl.hover(function() {
                Ext.fly(this).addClass('ux-rating-reset-hover');
            }, function() {
                Ext.fly(this).removeClass('ux-rating-reset-hover');
            });
            
            this.resetEl.on('click', this.reset, this);
        }

		// We use DomQuery to select the radio buttons
		this.radioBoxes = this.el.select('input[type=radio]');
		// Then we can loop over the CompositeElement using each
        this.radioBoxes.each(this.initStar, this);
        
		// We use DomHelper to create our hidden input
		this.input = this.container.createChild({
			tag: 'input',
			type: 'hidden',
			name: this.name,
			value: this.values[this.defaultSelected] || this.resetValue
		});
		
		// Lets remove all the radio buttons from the DOM
		this.radioBoxes.remove();
		
        this.select(this.defaultSelected === undefined ? false : this.defaultSelected)

        if(this.disabled) {
            this.disable();
        } else {
			// Enable will set up our event listeners
            this.enable();
        }
    },

    initStar : function(item, all, i) {
        var sw = Math.floor(this.starWidth / this.split);
        
		// We use the name and disabled attributes of the first radio button 
		if(i == 0) {
	        this.name = item.dom.name;
	        this.disabled = item.dom.disabled;		
		}
		
		// Saving the value and title for this star
        this.values[i] = item.dom.value;
        this.titles[i] = item.dom.title;

        if(item.dom.checked) {
            this.defaultSelected = i;
        }
        
		// Now actually create the star!
        var star = this.container.createChild({
            cls: 'ux-rating-star'
        });
        
        var starLink = star.createChild({
            tag: 'a',
            html: this.values[i],
            title: this.showTitles ? this.titles[i] : ''
        });
        
        // Prepare division settings
        if(this.split) {
          var odd = (i % this.split);              
          star.setWidth(sw);
          starLink.setStyle('margin-left', '-' + (odd * sw) + 'px');
        }

		// Save the reference to this star so we can easily access it later
        this.stars.push(star.dom);
    },
    
    onStarClick : function(ev, t) {
        if(!this.disabled) {
            this.select(this.stars.indexOf(t));
        }
    },

    onStarOver : function(ev, t) {
        if(!this.disabled) {
            this.fillTo(this.stars.indexOf(t), true);
        }        
    },
    
    onStarOut : function(ev, t) {
        if(!this.disabled) {
            this.fillTo(this.selected, false);            
        }
    },
    
    reset : function(ev, t) {
        this.select(-1);
    },
    
    select : function(index) {
        if(index === false || index === -1) {
            // remove current selection in el
            this.value = this.resetValue;
            this.title = "";
			this.input.dom.value = '';    
            
            if(this.canReset) {
                this.resetEl.setOpacity(0.5);
            }
            
            this.fillNone();
            
            if(this.selected !== -1) {
                this.fireEvent('change', this, this.values[index], this.stars[index]);              
            }
            this.selected = -1;            
        }
        else if(index !== this.selected) {
			// Update some properties         
            this.selected = index;
            this.value = this.values[index];
            this.title = this.titles[index];
			
			// Set the value of our hidden input so the rating can be submitted			
			this.input.dom.value = this.value;
			
            if(this.canReset) {
                this.resetEl.setOpacity(0.99);
            }
            
			// the fillTo() method will fill the stars up until the selected one        
            this.fillTo(index, false);
            
			// Lets also not forget to fire our custom event!
            this.fireEvent('change', this, this.values[index], this.stars[index]);            
        }     
    },
    
    fillTo : function(index, hover) {
        if (index != -1) {
            var addClass = hover ? 'ux-rating-star-hover' : 'ux-rating-star-on';
            var removeClass = hover ? 'ux-rating-star-on' : 'ux-rating-star-hover';
             
			// We add a css class to each star up until the selected one   
            Ext.each(this.stars.slice(0, index+1), function() {
                Ext.fly(this).removeClass(removeClass).addClass(addClass);
            });

			// And then remove the same class from all the stars after this one
            Ext.each(this.stars.slice(index+1), function() {
                Ext.fly(this).removeClass([removeClass, addClass]);
            });
        }
        else {
            this.fillNone();
        }        
    },
    
    fillNone : function() {
        this.container.select('.ux-rating-star').removeClass(['ux-rating-star-hover', 'ux-rating-star-on']);
    },

    enable : function() {		
        if(this.canReset) {
            this.resetEl.show();
        }
        
        this.input.dom.disabled = null;
        this.disabled = false;
        
        this.container.removeClass('ux-rating-disabled');
 
		// We will be using the technique of event delegation by listening
    	// for bubbled up events on the container       
        this.container.on({
            click: this.onStarClick, 
            mouseover: this.onStarOver,
            mouseout: this.onStarOut,
            scope: this,
            delegate: 'div.ux-rating-star'
        });        
    },
	    
    disable : function() {
        if(this.canReset) {
            this.resetEl.hide();
        }
        
        this.input.dom.disabled = true;
        this.disabled = true;
        
        this.container.addClass('ux-rating-disabled');

        this.container.un({
            click: this.onStarClick, 
            mouseover: this.onStarOver,
            mouseout: this.onStarOut,
            scope: this,
            delegate: 'div.ux-rating-star'
        });        
    },
    
    getValue : function() {
        return this.values[this.selected] || this.resetValue;
    },
	
	destroy : function() {
		this.disable();
		this.container.remove();
		this.radioBoxes.appendTo(this.el);
		if(this.selected !== -1) {
			this.radioBoxes.elements[this.selected].checked = true;
		}
	}
});