/* $Id$ */

(function($) {

$.widget("ui.zflipswitch", {

widgetEventPrefix : "flipswitch", //No I18N

options: {

type : undefined,

view : undefined,

option : undefined,

labelFor : undefined

},

_EVENTS: {

            'ONCLICK': 'click',

            'ONCHANGE': 'change',

            'ONDRAG': 'drag'

        },

_create:function() {

base = this;

if(this.options.view == "iconOnly")

{

var insideDiv = "<div id='leftside'></div><div class='onoffswitch' ><input type='checkbox' name='onoffswitchcheckbox' class='onoffswitch-checkbox' id='onoffswitch-checkbox1' checked><label class='onoffswitch-label' for='onoffswitch-checkbox1' ><div class='onoffswitch-inner'>ON OFF</div><div class='onoffswitch-switch' ></div></label></div><div id='righttside'></div>";

base.element.append(insideDiv);

}

else if(this.options.view == "textOnly")

{

var insideDiv = "<div id='leftside1'></div><div class='onoffswitch' ><input type='checkbox' name='onoffswitchcheckbox' class='onoffswitch-checkbox' id='onoffswitch-checkbox2' checked><label class='onoffswitch-label' for='onoffswitch-checkbox2' ><div class='onoffswitch-inner'>ON OFF</div><div class='onoffswitch-switch' ></div></label></div><div id='righttside1'></div>";

base.element.append(insideDiv);

}

else if(this.options.view == "radioGreen")

{

var insideDiv = "<div class='switch'><input type='radio' class='switch-input' name='view' value='week' id='switch3'  checked><label for='switch3' class='switch-label switch-label-off'>Outline</label><input type='radio' class='switch-input' name='view' value='month' id='month'><label for='month' class='switch-label switch-label-on'>Slide</label><span class='switch-selection' ></span></div>";

base.element.append(insideDiv);

}

else if(this.options.view == "radioBlue")

{

var insideDiv = "<div class='switch switch-blue'><input type='radio' class='switch-input' name='view2' value='week2' id='switch4'  checked><label for='switch4' class='switch-label switch-label-off'>Outline</label><input type='radio' class='switch-input' name='view2' value='month2' id='month2'><label for='month2' class='switch-label switch-label-on'>Slide</label><span class='switch-selection'></span></div>";

base.element.append(insideDiv);

}

$(".onoffswitch-label",this.element).click(function(e)

{

console.log(base._EVENTS.ONCLICK);

base._triggerEvent(base._EVENTS.ONCLICK);

e.stopPropagation();

});

},

_triggerEvent: function(event){

      var ui = this;

      return this._trigger(event, event, ui);

},

destroy : function() {

$(this.element).empty();

$(this.element).off("."+this.widgetName);

$.Widget.prototype.destroy.apply(this, arguments);

}

});

})(jQuery)

HTML: