ios-checkboxes 0.1.0 → 0.1.2

data/.gitignore

@@ -1,7 +1,13 @@
-.DS_Store
-pkg/*
-*.gem
-*.rbc
-*.swp
-.bundle
+.bundle/
+log/*.log
+pkg/
 Gemfile.lock
+spec/dummy/db/*.sqlite3
+spec/dummy/log/*.log
+spec/dummy/tmp/
+spec/dummy/public/assets
+db/*.sqlite3
+log/*.log
+tmp/
+.sass-cache/
+*.swp

data/Gemfile

@@ -0,0 +1,21 @@
+source "http://rubygems.org"
+
+# Declare your gem's dependencies in ios-checkboxes.gemspec.
+# Bundler will treat runtime dependencies like base dependencies, and
+# development dependencies will be added by default to the :development group.
+gemspec
+
+# jquery-rails is used by the dummy application
+gem "jquery-rails"
+gem 'jasminerice'
+gem 'coffee-script'
+gem 'pry'
+gem 'uglifier'
+
+# Declare any dependencies that are still in development here instead of in
+# your gemspec. These might include edge Rails or gems from your path or
+# Git. Remember to move these dependencies to your gemspec before releasing
+# your gem to rubygems.org.
+
+# To use debugger
+# gem 'ruby-debug19', :require => 'ruby-debug'

data/HISTORY.md

@@ -0,0 +1,10 @@
+0.1.2 - Mon 21 Nov 2011
+========================================
+- Customise the images, sizes etc via SASS
+- Provide precompiled assets for standalone use
+
+0.1.1 - Fri 18 Nov 2011
+========================================
+- Provides jQuery iphoneStyle function in JavaScript and the JavaScript file itself.
+- Provides default styling.
+- Compatible with Rails Assets Pipeline (include images referenced from the CSS).

data/README.md

@@ -0,0 +1,136 @@
+ios-checkboxes
+========================================
+
+This project allows you to easily use iPhone style checkboxes in a Rails 3.1 application.
+
+Install
+========================================
+
+Add `gem 'ios-checkboxes'` to your Gemfile and run `bundle install`
+
+
+Usage
+========================================
+
+Add `//=require ios-checkboxes` to your `app/assets/javascripts/application.js`.
+This will require `jquery` automaticaly.
+
+Also make sure you add the stylesheets to your `application.css`.
+Just `require ios-checkboxes` to get the default styling.
+
+You may choose not to use it and write the styling from scratch. In that case just don't add the iox-checkboxes to the stylesheet manifest.
+
+
+After you have all the ingridients in place you can convert your checkboxes into "On/Off" buttons
+with this JavaScript snippet:
+
+```javascript
+$(function(){
+  $("input:checkbox").iphoneStyle();
+});
+```
+
+Using as a standalone
+========================================
+
+Go to the `build/output` directory and download its content.
+Put it content under your server root.
+Make sure you reference the JavaScript and CSS files properly.
+
+Don't reference it as 'assets/ios-checkboxes.js', instead use the full file name from the download
+(it will change with time): `assets/ios-checkboxes-d0bbaf0b834d61ddccf7510739596dd2.js`
+
+The same applies to CSS, but you don't need to do anything for images.
+
+The use of the "digest" appended to the end of file ensures that your users will have the most recent version of the files (cashe buster).
+
+
+Customisation
+========================================
+
+If the defaut stylesheet doesn't fit your design, you can customize it.
+
+First, add a `.css.sass` file to your application:
+
+```sass
+// app/assets/stylesheets/iphone.css.sass
+@import "./ios-checkboxes/mixins"
+
+// This will change the default for everything
+$iphone-style-height: 33px // Default = 27px
+$iphone-style-font-size: 30px // Default = 17px
+$iphone-style-images-path: 'custom-path-to-images' // Default = ios-checkboxes
+
++iphone-style // This includes the actual styles with customised values
+
+// You can also override the styles for sub-selectors
+.huge
+  $iphone-style-height: 60px
+  $iphone-style-font-size: 40px
+  $iphone-style-images-path: 'hude-images'
+  +iphone-style
+```
+
+If you modify the `$iphone-style-images-path` then you have to provide a (Sprockets) directory with the following files:
+
+```
+off.png
+on.png
+slider.png
+slider_center.png
+slider_left.png
+slider_right.png
+```
+
+
+
+Development
+========================================
+
+```bash
+git clone git@github.com:dnagir/ios-checkboxes.git
+cd ios-checkboxes
+bundle install
+bundle rspec spec
+(cd spec/dummy/ && bundle exec rails s)
+# Now go to http://localhost:3000/jasmine to run the specs
+```
+
+To build the standalone assets: `sh build/build.sh`.
+
+Help
+========================================
+
+- Report issues on [Github](https://github.com/dnagir/ios-checkboxes/issues).
+- Shout at me in Twitter - [@dnagir](http://twitter.com/dnagir)
+
+
+Credits
+========================================
+
+[Thomas Reynolds](https://github.com/tdreyno) for the original [implementation](https://github.com/tdreyno/iphone-style-checkboxes).
+
+
+License (MIT)
+========================================
+
+Copyright 2011 Thomas Reynolds, Dmytrii Nagirniak
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/Rakefile

@@ -1,22 +1,37 @@
-require 'rake'
-require 'bundler/gem_tasks'
-
-desc "Update the gem with the latest files"
-task :update do
-  # Copy the js file and require jQuery
-  js_content = File.read "../jquery/iphone-style-checkboxes.js"
-  f = File.new("vendor/assets/javascripts/ios-checkboxes.js", "w")
-  f.write("//= require jquery\n\n#{js_content}")
-  f.close
-
-  # Copy the images
-  cp_r "../images/", "vendor/assets/"
-
-  # Copy CSS and make sure it references the images via assets pipeline
-  css_content = File.read "../style.css"
-  pattern = /url\('images\/([^']+)'\)/
-  css_processed = css_content.gsub(pattern) {|m| "url('<%= image_path \"#{$1.sub(/\?.*/, '')}\" %>')" }
-  f2 = File.new("vendor/assets/stylesheets/ios-checkboxes.css.erb", "w")
-  f2.write(css_processed)
-  f2.close
+#!/usr/bin/env rake
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
 end
+begin
+  require 'rdoc/task'
+rescue LoadError
+  require 'rdoc/rdoc'
+  require 'rake/rdoctask'
+  RDoc::Task = Rake::RDocTask
+end
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'IosCheckboxes'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+
+
+Bundler::GemHelper.install_tasks
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+
+task :default => :test

data/build/.gitignore

@@ -0,0 +1,2 @@
+*.yml
+*.gz

data/build/build.sh

@@ -0,0 +1,7 @@
+
+pushd spec/dummy &&
+bundle exec rake assets:clean RAILS_ENV=production &&
+bundle exec rake assets:precompile:primary RAILS_ENV=production &&
+popd &&
+rm -rf build/output/* &&
+cp -rf spec/dummy/public/assets build/output

data/build/output/assets/ios-checkboxes/ios-checkboxes-5d38e09413b47993266b4343b181d2f9.css

@@ -0,0 +1 @@
+.iPhoneCheckContainer{position:relative;height:27px;cursor:pointer;overflow:hidden}.iPhoneCheckContainer input{position:absolute;top:5px;left:30px;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0}.iPhoneCheckContainer label{white-space:nowrap;font-size:17x;line-height:17x;font-weight:bold;font-family:"Helvetica Neue",Arial,Helvetica,sans-serif;cursor:pointer;display:block;height:27px;position:absolute;width:auto;top:0;padding-top:5px;overflow:hidden}.iPhoneCheckContainer,.iPhoneCheckContainer label{user-select:none;-moz-user-select:none;-khtml-user-select:none}.iPhoneCheckDisabled{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);opacity:0.5}label.iPhoneCheckLabelOn{color:#fff;background:url(/assets/ios-checkboxes/on-c1710e0553b5cb2ba6b41a59ace60662.png) no-repeat;text-shadow:0px 0px 2px rgba(0,0,0,0.6);left:0;padding-top:5px}label.iPhoneCheckLabelOn span{padding-left:8px}label.iPhoneCheckLabelOff{color:#8b8b8b;background:url(/assets/ios-checkboxes/off-32586c60c5c48b7002326fdff55cd42e.png) no-repeat right 0;text-shadow:0px 0px 2px rgba(255,255,255,0.6);text-align:right;right:0}label.iPhoneCheckLabelOff span{padding-right:8px}.iPhoneCheckHandle{display:block;height:27px;cursor:pointer;position:absolute;top:0;left:0;width:0;background:url(/assets/ios-checkboxes/slider_left-e6930b387dd9c0a424e7c1aedd0b0aea.png) no-repeat;padding-left:3px}.iPhoneCheckHandleRight{height:100%;width:100%;padding-right:3px;background:url(/assets/ios-checkboxes/slider_right-e8654b2a69377361211e57422446c703.png) no-repeat right 0}.iPhoneCheckHandleCenter{height:100%;width:100%;background:url(/assets/ios-checkboxes/slider_center-137b6fa2802dc0a9be192b66c5a76815.png)}

data/build/output/assets/ios-checkboxes/ios-checkboxes-767fc292f6a04316d3a54b18f4637b57.js

@@ -0,0 +1 @@
+((function(){var a,b=Array.prototype.slice;a=function(){function a(b,c){var d,e,f;this.elem=$(b),e=$.extend({},a.defaults,c);for(d in e)f=e[d],this[d]=f;this.elem.data(this.dataName,this),this.wrapCheckboxWithDivs(),this.attachEvents(),this.disableTextSelection(),this.resizeHandle&&this.optionallyResize("handle"),this.resizeContainer&&this.optionallyResize("container"),this.initialPosition()}return a.prototype.isDisabled=function(){return this.elem.is(":disabled")},a.prototype.wrapCheckboxWithDivs=function(){return this.elem.wrap("<div class='"+this.containerClass+"' />"),this.container=this.elem.parent(),this.offLabel=$("<label class='"+this.labelOffClass+"'>\n  <span>"+this.uncheckedLabel+"</span>\n</label>").appendTo(this.container),this.offSpan=this.offLabel.children("span"),this.onLabel=$("<label class='"+this.labelOnClass+"'>\n  <span>"+this.checkedLabel+"</span>\n</label>").appendTo(this.container),this.onSpan=this.onLabel.children("span"),this.handle=$("<div class='"+this.handleClass+"'>\n  <div class='"+this.handleRightClass+"'>\n    <div class='"+this.handleCenterClass+"' />\n  </div>\n</div>").appendTo(this.container)},a.prototype.disableTextSelection=function(){if($.browser.msie)return $([this.handle,this.offLabel,this.onLabel,this.container]).attr("unselectable","on")},a.prototype._getDimension=function(a,b){return $.fn.actual!=null?a.actual(b):a[b]()},a.prototype.optionallyResize=function(a){var b,c,d;return d=this._getDimension(this.onLabel,"width"),c=this._getDimension(this.offLabel,"width"),a==="container"?(b=d>c?d:c,b+=this._getDimension(this.handle,"width")+this.handleMargin,this.container.css({width:b})):(b=d>c?d:c,this.handle.css({width:b}))},a.prototype.onMouseDown=function(b){var c;b.preventDefault();if(this.isDisabled())return;return c=b.pageX||b.originalEvent.changedTouches[0].pageX,a.currentlyClicking=this.handle,a.dragStartPosition=c,a.handleLeftOffset=parseInt(this.handle.css("left"),10)||0},a.prototype.onDragMove=function(b,c){var d,e;if(a.currentlyClicking!==this.handle)return;return e=(c+a.handleLeftOffset-a.dragStartPosition)/this.rightSide,e<0&&(e=0),e>1&&(e=1),d=e*this.rightSide,this.handle.css({left:d}),this.onLabel.css({width:d+this.handleRadius}),this.offSpan.css({marginRight:-d}),this.onSpan.css({marginLeft:-(1-e)*this.rightSide})},a.prototype.onDragEnd=function(b,c){var d;if(a.currentlyClicking!==this.handle)return;if(this.isDisabled())return;return a.dragging?(d=(c-a.dragStartPosition)/this.rightSide,this.elem.prop("checked",d>=.5)):this.elem.prop("checked",!this.elem.prop("checked")),a.currentlyClicking=null,a.dragging=null,this.didChange()},a.prototype.refresh=function(){return this.didChange()},a.prototype.didChange=function(){var a;return typeof this.onChange=="function"&&this.onChange(this.elem,this.elem.prop("checked")),this.isDisabled()?(this.container.addClass(this.disabledClass),!1):(this.container.removeClass(this.disabledClass),a=this.elem.prop("checked")?this.rightSide:0,this.handle.animate({left:a},this.duration),this.onLabel.animate({width:a+this.handleRadius},this.duration),this.offSpan.animate({marginRight:-a},this.duration),this.onSpan.animate({marginLeft:a-this.rightSide},this.duration))},a.prototype.attachEvents=function(){var a,b,c;return c=this,a=function(a){return c.onGlobalMove.apply(c,arguments)},b=function(d){return c.onGlobalUp.apply(c,arguments),$(document).unbind("mousemove touchmove",a),$(document).unbind("mouseup touchend",b)},this.elem.change(function(){return c.refresh()}),this.container.bind("mousedown touchstart",function(d){return c.onMouseDown.apply(c,arguments),$(document).bind("mousemove touchmove",a),$(document).bind("mouseup touchend",b)})},a.prototype.initialPosition=function(){var a,b;a=this._getDimension(this.container,"width"),this.offLabel.css({width:a-this.containerRadius}),b=this.containerRadius+1,$.browser.msie&&$.browser.version<7&&(b-=3),this.rightSide=a-this._getDimension(this.handle,"width")-b,this.elem.is(":checked")?(this.handle.css({left:this.rightSide}),this.onLabel.css({width:this.rightSide+this.handleRadius}),this.offSpan.css({marginRight:-this.rightSide})):(this.onLabel.css({width:0}),this.onSpan.css({marginLeft:-this.rightSide}));if(this.isDisabled())return this.container.addClass(this.disabledClass)},a.prototype.onGlobalMove=function(b){var c;if(!!this.isDisabled()||!a.currentlyClicking)return;return b.preventDefault(),c=b.pageX||b.originalEvent.changedTouches[0].pageX,!a.dragging&&Math.abs(a.dragStartPosition-c)>this.dragThreshold&&(a.dragging=!0),this.onDragMove(b,c)},a.prototype.onGlobalUp=function(b){var c;if(!a.currentlyClicking)return;return b.preventDefault(),c=b.pageX||b.originalEvent.changedTouches[0].pageX,this.onDragEnd(b,c),!1},a.defaults={duration:200,checkedLabel:"ON",uncheckedLabel:"OFF",resizeHandle:!0,resizeContainer:!0,disabledClass:"iPhoneCheckDisabled",containerClass:"iPhoneCheckContainer",labelOnClass:"iPhoneCheckLabelOn",labelOffClass:"iPhoneCheckLabelOff",handleClass:"iPhoneCheckHandle",handleCenterClass:"iPhoneCheckHandleCenter",handleRightClass:"iPhoneCheckHandleRight",dragThreshold:5,handleMargin:15,handleRadius:4,containerRadius:5,dataName:"iphoneStyle",onChange:function(){}},a}(),$.iphoneStyle=this.iOSCheckbox=a,$.fn.iphoneStyle=function(){var c,d,e,f,g,h,i,j,k,l,m,n;c=1<=arguments.length?b.call(arguments,0):[],e=(k=(l=c[0])!=null?l.dataName:void 0)!=null?k:a.defaults.dataName,m=this.filter(":checkbox");for(i=0,j=m.length;i<j;i++)d=m[i],f=$(d).data(e),f!=null?(g=c[0],h=2<=c.length?b.call(c,1):[],(n=f[g])!=null&&n.apply(f,h)):new a(d,c[0]);return this},$.fn.iOSCheckbox=function(a){var b;return a==null&&(a={}),b=$.extend({},a,{resizeHandle:!1,disabledClass:"iOSCheckDisabled",containerClass:"iOSCheckContainer",labelOnClass:"iOSCheckLabelOn",labelOffClass:"iOSCheckLabelOff",handleClass:"iOSCheckHandle",handleCenterClass:"iOSCheckHandleCenter",handleRightClass:"iOSCheckHandleRight",dataName:"iOSCheckbox"}),this.iphoneStyle(b)}})).call(this)

data/ios-checkboxes.gemspec

@@ -1,19 +1,25 @@
-# -*- encoding: utf-8 -*-
-require File.expand_path('../lib/ios-checkboxes/version', __FILE__)
+$:.push File.expand_path("../lib", __FILE__)
 
+# Maintain your gem's version:
+require "ios-checkboxes/version"
+
+# Describe your gem and declare its dependencies:
 Gem::Specification.new do |s|
   s.name        = "ios-checkboxes"
-  s.version     = IOSCheckboxes::VERSION
-  s.authors     = ["Thomas Reynolds"]
-  s.email       = ["me@tdreyno.com"]
-  s.homepage    = "https://github.com/tdreyno/iphone-style-checkboxes"
-  s.summary     = %q{iOS-style Checkboxes}
-  s.description = %q{iOS-style Checkboxes for Rails asset pipeline.}
+  s.version     = IosCheckboxes::VERSION
+  s.authors     = ["Dmytrii Nagirniak, Thomas Reynolds"]
+  s.email       = ["dnagir@gmail.com"]
+  s.homepage    = "https://github.com/dnagir/ios-checkboxes"
+  s.summary     = "iOS checkboxes for Rails"
+  s.description = "Easily convert your checkboxes into iPhone style On/Off buttons. Use with Rails 3.1 Assets Pipeline."
 
-  s.rubyforge_project = "ios-checkboxes"
-  s.add_dependency "railties", "~> 3.1"
+  s.files         = `git ls-files`.split("\n")
+  s.test_files    = `git ls-files -- {test,spec,features,build}/*`.split("\n")
+  s.require_paths = ["lib"]
 
-  s.files = `git ls-files`.split("\n")
+  s.add_dependency "rails", "~> 3.1.2"
+  s.add_dependency "sass-rails"
+  s.add_dependency "compass", ">= 0.12.alpha.1"
 
-  s.require_paths = ["lib"]
+  s.add_development_dependency "rspec-rails"
 end

data/lib/assets/javascripts/ios-checkboxes.js.coffee

@@ -0,0 +1,2 @@
+#= require jquery
+#= require ios-checkboxes/ios-checkboxes

data/lib/assets/javascripts/ios-checkboxes/ios-checkboxes.js.coffee

@@ -0,0 +1,269 @@
+# iPhone-style Checkboxes Coffee plugin
+# Copyright Thomas Reynolds, licensed GPL & MIT
+
+class iOSCheckbox
+  constructor: (elem, options) ->
+    @elem = $(elem)
+  
+    opts = $.extend({}, iOSCheckbox.defaults, options)
+    
+    # Import options into instance variables
+    for key, value of opts
+      @[key] = value
+
+    @elem.data(@dataName, this)
+
+    # Initialize the control
+    @wrapCheckboxWithDivs()
+    @attachEvents()
+    @disableTextSelection()
+  
+    @optionallyResize('handle') if @resizeHandle
+    @optionallyResize('container') if @resizeContainer
+  
+    @initialPosition()
+
+  isDisabled: -> @elem.is(':disabled')
+
+  # Wrap the existing input[type=checkbox] with divs for styling and grab 
+  # DOM references to the created nodes
+  wrapCheckboxWithDivs: ->
+    @elem.wrap("<div class='#{@containerClass}' />")
+  
+    @container = @elem.parent()
+  
+    @offLabel  = $("""<label class='#{@labelOffClass}'>
+                        <span>#{@uncheckedLabel}</span>
+                      </label>""").appendTo(@container)
+                     
+    @offSpan   = @offLabel.children('span')
+  
+    @onLabel   = $("""<label class='#{@labelOnClass}'>
+                        <span>#{@checkedLabel}</span>
+                      </label>""").appendTo(@container)
+                     
+    @onSpan    = @onLabel.children('span')
+  
+    @handle    = $("""<div class='#{@handleClass}'>
+                        <div class='#{@handleRightClass}'>
+                          <div class='#{@handleCenterClass}' />
+                        </div>
+                      </div>""").appendTo(this.container)
+  
+  # Disable IE text selection, other browsers are handled in CSS
+  disableTextSelection: ->
+    # Elements containing text should be unselectable
+    if $.browser.msie
+      $([@handle, @offLabel, @onLabel, @container]).attr("unselectable", "on")
+
+  _getDimension: (elem, dimension) ->
+    if $.fn.actual?
+      elem.actual(dimension)
+    else
+      elem[dimension]()
+      
+  # Automatically resize the handle or container
+  optionallyResize: (mode) -> 
+    onLabelWidth  = @_getDimension(@onLabel, "width")
+    offLabelWidth = @_getDimension(@offLabel, "width")
+
+    if mode == "container"
+      newWidth = if (onLabelWidth > offLabelWidth)
+        onLabelWidth
+      else 
+        offLabelWidth
+
+      newWidth += @_getDimension(@handle, "width") + @handleMargin
+      @container.css(width: newWidth)
+    else
+      newWidth = if (onLabelWidth > offLabelWidth)
+        onLabelWidth
+      else 
+        offLabelWidth
+      @handle.css(width: newWidth)
+
+  onMouseDown: (event) ->
+    event.preventDefault()
+
+    return if @isDisabled()
+
+    x = event.pageX || event.originalEvent.changedTouches[0].pageX
+    iOSCheckbox.currentlyClicking = @handle
+    iOSCheckbox.dragStartPosition = x
+    iOSCheckbox.handleLeftOffset  = parseInt(@handle.css('left'), 10) || 0
+
+  onDragMove: (event, x) ->
+    return unless iOSCheckbox.currentlyClicking == @handle
+    
+    p = (x + iOSCheckbox.handleLeftOffset - iOSCheckbox.dragStartPosition) / @rightSide
+    p = 0 if p < 0
+    p = 1 if p > 1
+
+    newWidth = p * @rightSide
+    @handle.css(left: newWidth)
+    @onLabel.css(width: newWidth + @handleRadius)
+    @offSpan.css(marginRight: -newWidth)
+    @onSpan.css(marginLeft: -(1 - p) * @rightSide)
+
+  onDragEnd: (event, x) ->
+    return unless iOSCheckbox.currentlyClicking == @handle
+    return if @isDisabled()
+  
+    if iOSCheckbox.dragging
+      p = (x - iOSCheckbox.dragStartPosition) / @rightSide
+      @elem.prop('checked', (p >= 0.5))
+    else
+      @elem.prop('checked', !@elem.prop('checked'))
+
+    iOSCheckbox.currentlyClicking = null
+    iOSCheckbox.dragging          = null
+    @didChange()
+
+  refresh: -> @didChange() #TODO: Verify - this might fire event unnecessarily
+    
+  didChange: ->
+    @onChange?(@elem, @elem.prop('checked'))
+    
+    if @isDisabled()
+      @container.addClass(@disabledClass)
+      return false
+    else
+      @container.removeClass(@disabledClass)
+  
+    new_left = if @elem.prop('checked') then @rightSide else 0
+
+    @handle.animate(left: new_left, @duration)
+    @onLabel.animate(width: new_left + @handleRadius, @duration)
+    @offSpan.animate(marginRight: -new_left, @duration)
+    @onSpan.animate(marginLeft: new_left - @rightSide, @duration)
+  
+  attachEvents: ->
+    self = this
+    
+    localMouseMove = (event) ->
+      self.onGlobalMove.apply(self, arguments)
+      
+    localMouseUp = (event) ->
+      self.onGlobalUp.apply(self, arguments)
+      $(document).unbind 'mousemove touchmove', localMouseMove
+      $(document).unbind 'mouseup touchend', localMouseUp
+      
+    # The original checkbox value might be changed by clickig on the associated label or other means
+    # To make sure we are in sync:
+    @elem.change -> self.refresh()
+
+    # A mousedown anywhere in the control will start tracking for dragging
+    @container.bind 'mousedown touchstart', (event) ->
+      self.onMouseDown.apply(self, arguments)
+  
+      # As the mouse moves on the page, animate if we are in a drag state
+      $(document).bind 'mousemove touchmove', localMouseMove
+
+      # When the mouse comes up, leave drag state
+      $(document).bind 'mouseup touchend', localMouseUp
+    
+  # Setup the control's inital position
+  initialPosition: ->
+    containerWidth = @_getDimension(@container, "width")
+    @offLabel.css(width: containerWidth - @containerRadius)
+
+    offset     = @containerRadius + 1
+    offset     -= 3 if $.browser.msie and $.browser.version < 7
+    @rightSide = containerWidth - @_getDimension(@handle, "width") - offset
+
+    if @elem.is(':checked')
+      @handle.css(left: @rightSide)
+      @onLabel.css(width: @rightSide + @handleRadius)
+      @offSpan.css(marginRight: -@rightSide)
+    else
+      @onLabel.css(width: 0)
+      @onSpan.css(marginLeft: -@rightSide)
+    
+    @container.addClass(@disabledClass) if @isDisabled()
+
+  onGlobalMove: (event) ->
+    return unless !@isDisabled() && iOSCheckbox.currentlyClicking
+    event.preventDefault()
+
+    x = event.pageX || event.originalEvent.changedTouches[0].pageX
+
+    if (!iOSCheckbox.dragging &&
+        (Math.abs(iOSCheckbox.dragStartPosition - x) > @dragThreshold))
+      iOSCheckbox.dragging = true
+    
+    @onDragMove(event, x)
+    
+  onGlobalUp: (event) ->
+    return unless iOSCheckbox.currentlyClicking
+    event.preventDefault()
+
+    x = event.pageX || event.originalEvent.changedTouches[0].pageX
+    
+    @onDragEnd(event, x)
+    false
+
+  @defaults: 
+    # Time spent during slide animation
+    duration:          200
+  
+    # Text content of "on" state
+    checkedLabel:      'ON'
+  
+    # Text content of "off" state
+    uncheckedLabel:    'OFF'
+  
+    # Automatically resize the handle to cover either label
+    resizeHandle:      true
+  
+    # Automatically resize the widget to contain the labels
+    resizeContainer:   true
+  
+    disabledClass:     'iPhoneCheckDisabled'
+    containerClass:    'iPhoneCheckContainer'
+    labelOnClass:      'iPhoneCheckLabelOn'
+    labelOffClass:     'iPhoneCheckLabelOff'
+    handleClass:       'iPhoneCheckHandle'
+    handleCenterClass: 'iPhoneCheckHandleCenter'
+    handleRightClass:  'iPhoneCheckHandleRight'
+  
+    # Pixels that must be dragged for a click to be ignored
+    dragThreshold:     5
+    
+    handleMargin:      15
+    handleRadius:      4
+    containerRadius:   5
+    
+    dataName:          "iphoneStyle"
+    
+    onChange: ->
+
+$.iphoneStyle = @iOSCheckbox = iOSCheckbox
+
+$.fn.iphoneStyle = (args...) ->
+  dataName = args[0]?.dataName ? iOSCheckbox.defaults.dataName
+
+  for checkbox in @filter(':checkbox')
+    existingControl = $(checkbox).data(dataName)
+    if existingControl?
+      [method, params...] = args
+      existingControl[method]?.apply(existingControl, params)
+    else
+      new iOSCheckbox(checkbox, args[0])
+
+  this
+  
+$.fn.iOSCheckbox = (options={}) ->
+  # iOS5 style only supports circular handle
+  opts = $.extend({}, options, {
+    resizeHandle:      false
+    disabledClass:     'iOSCheckDisabled'
+    containerClass:    'iOSCheckContainer'
+    labelOnClass:      'iOSCheckLabelOn'
+    labelOffClass:     'iOSCheckLabelOff'
+    handleClass:       'iOSCheckHandle'
+    handleCenterClass: 'iOSCheckHandleCenter'
+    handleRightClass:  'iOSCheckHandleRight'
+    dataName:          'iOSCheckbox'
+  })
+  
+  this.iphoneStyle(opts)