(function($){
	this.IPhoneCheckbox = new Class({ 
		
		Implements: [Options],
		
		options: {
			checkedLabel: 'ON', 
			uncheckedLabel: 'OFF', 
			background: '#fff', 
			containerClass: 'icheck-container', 
			labelOnClass: 'icheck-label-on', 
			labelOffClass: 'icheck-label-off', 
			handleClass: 'icheck-handle', 
			handleBGClass: 'icheck-handle-bg', 
			handleSliderClass: 'icheck-handle-slider', 
			elements: 'input[type=checkbox]' 
		},
		
		initialize: function(options) { 
			this.setOptions(options); 
			this.elements = $$(this.options.elements); 
			this.elements.each(function(el) { 
				this.observe(el); 
			},this); 
		},
		 
		observe: function(el) { 
			el.set('opacity',0);
			el.get('id') && $E('label[for='+el.get('id')+']').removeProperty('for');
			var wrap = new Element('div',{ 
				'class': this.options.containerClass 
			}).inject(el.getParent()); 
			//inject this checkbox into it 
			el.inject(wrap); 
			//now create subsquent divs and labels 
			var handle = new Element('div',{'class':this.options.handleClass}).inject(wrap); 
			var handlebg = new Element('div',{'class':this.options.handleBGClass,'style':this.options.background}).inject(handle); 
			var handleSlider = new Element('div',{'class':this.options.handleSliderClass}).inject(handle); 
			var offLabel = new Element('label',{'class':this.options.labelOffClass,text:this.options.uncheckedLabel}).inject(wrap); 
			var onLabel = new Element('label',{'class':this.options.labelOnClass,text:this.options.checkedLabel}).inject(wrap); 
			var rightSide = wrap.getSize().x - 34; 
			
			el.offFx = new Fx.Tween(offLabel,{'property':'opacity','duration':200}); 
			el.onFx = new Fx.Tween(onLabel,{'property':'opacity','duration':200}); 
			
			wrap.addEvent('mouseup',function() { 
				var is_onstate = !el.checked; //originally 0 
				var new_left = (is_onstate ? rightSide : 0); 
				var bg_left = (is_onstate ? 34 : 0); 
				handlebg.hide(); 
				new Fx.Tween(handle, { 
					duration: 100, 
					'property': 'left', 
					onComplete: function() { 
						handlebg.setStyle('left',bg_left).show(); 
					} 
				}).start(new_left); 
				if(is_onstate) { 
					el.offFx.start(0); 
					el.onFx.start(1); 
				} else { 
					el.offFx.start(1); 
					el.onFx.start(0); 
				} 
				el.set('checked',is_onstate); 
			});
			
			if(el.checked){ 
				offLabel.set('opacity',0); 
				onLabel.set('opacity',1); 
				handle.setStyle('left',rightSide); 
				handlebg.setStyle('left',34); 
			} else { 
				onLabel.set('opacity',0); 
				handlebg.setStyle('left',0); 
			}
		} 
	}); 
})(document.id);