(function($) {

    $.widget("ui.toggle", {
        
        // default options
        options: {
            
            onLabel: "On",
            offLabel: "Off"
            
        },
        
        _create: function() {
            
            if (this.options) {
                
                var self = this;
                
                this.toggleElementStructure = $('<div><div class="left"><div></div></div><div class="right"><div></div></div><div class="fill"><div class="left"></div><div class="middle"><div class="left"></div><div class="middle"></div><div class="right"></div></div><div class="right"></div></div></div><ul><li class="left"></li><li class="right"></li></ul>');
                
                this._resolveToggleElement();
                
                if(this.elementIsCheckbox) {
                    
                    this.element.addClass('ui-helper-hidden-accessible');
                    this.checked = this.element.is(':checked');
                    
                } else {
                    
                    this.checked = false;
                    
                }
                
                this.toggleElement.addClass('cf-ui').addClass('toggle');
                this.toggleElement.append(this.toggleElementStructure);
                
                this.toggleElement.find('li').first().text(this.options.onLabel);
                this.toggleElement.find('li').last().text(this.options.offLabel);
                
                this.toggleElement.css(
                    {
                        width: (this.toggleElement.find('li').text().length) * 8 + 100 + "px"
                    }
                );
                
                this.toggleElement.find('div.fill > div.left, div.fill > div.right').css(
                    {
                        width: this.toggleElement.find('div.fill > div.left').width() + 5 + "px"
                    }
                );
                
                this.toggleElement.find('div.fill > div.middle').css(
                    {
                        width: this.toggleElement.find('div.fill > div.middle').width() - 10 + "px",
                        left: Math.floor(this.toggleElement.find('div.fill > div.left').width()) + "px",
                        right: Math.floor(this.toggleElement.find('div.fill > div.right').width()) + "px"
                    }
                );
                
                this.toggleElement.find('div.fill').css(
                    {
                        left: (this.toggleElement.width() - (this.toggleElement.find('div.fill > div.left').width() + this.toggleElement.find('div.fill > div.middle').width()) - 5) + "px"
                    }
                );
                
                this.toggleElement.bind(
                    'click', 
                    function() {
                        
                        if(self.enabled) {
                            
                            if(self.elementIsCheckbox) {
                                
                                self.element.click().trigger('change');
                                
                            } else {
                                
                                self.refresh();
                                
                            }
                            
                        }
                    }
                );
                
                if(this.elementIsCheckbox) {
                    
                    this.element.bind(
                        'change',
                        function() {
                            
                            if(self.enabled) {
                                
                                self.refresh();
                                
                            }
                            
                        }
                    );
                    
                }
                
                
                this.refresh();
                
                this.enable();
            }
            
        },
        
        _resolveToggleElement: function() {
            
            var self = this;
            
            if(self.element.is(':checkbox')) {
                
                self.elementIsCheckbox = true;
                self.toggleElement = self.element.after($('<div></div>')).next();
                
            } else {
                
                self.toggleElement = self.element;
                
            }
            
    	},
    	
    	_resolveChecked: function() {
    	   
    	   var self = this;
    	   
    	   if(self.elementIsCheckbox) {
    	       
    	       self.checked = self.element.is(':checked');
    	       
    	   } else {
    	       
    	       self.checked = !self.checked;
    	       
    	   }
    	   
    	},
        
        refresh: function() {
            
            var self = this;
            
            self._resolveChecked();
            
            var leftFinal = this.checked ? 
                (-1 * this.toggleElement.find('div.fill > div.left').width()) + 5 + "px" :
                (this.toggleElement.width() - (this.toggleElement.find('div.fill > div.left').width() + this.toggleElement.find('div.fill > div.middle').width()) - 5) + "px";
                
            this.toggleElement.find('div.fill').stop().animate(
                {
                    left: leftFinal
                },
                400,
                'swing'
            );
            
        },
        
        
        widget: function() {
            
            return this.toggleElement;
            
        },
        
        enable: function() {
            
            this.enabled = true;
            
        },
        
        disable: function() {
            
            this.enabled = false;
            
        },
        
        destroy: function() {
            
            
            //$.Widget.prototype.destroy.apply(this, arguments); // default destroy
            // now do other stuff particular to this widget
            
        }
        
    });
    
})(jQuery)