<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<div id="book">
  <div class="cover"><h1>The Bible</h1></div>
</div>

<div id="controls">
  <label for="page-number">Page:</label> <input type="text" size="3" id="page-number"> of <span id="number-pages"></span>
</div>

<script type="text/javascript">

  // Sample using dynamic pages with turn.js

  var numberOfPages = 1000; 


  // Adds the pages that the book will need
  function addPage(page, book) {
    //  First check if the page is already in the book
    if (!book.turn('hasPage', page)) {
      // Create an element for this page
      var element = $('<div />', {'class': 'page '+((page%2==0) ? 'odd' : 'even'), 'id': 'page-'+page}).html('<i class="loader"></i>');
      // If not then add the page
      book.turn('addPage', element, page);
      // Let's assum that the data is comming from the server and the request takes 1s.
      setTimeout(function(){
          element.html('<div class="data">Data for page '+page+'</div>');
      }, 1000);
    }
  }

  $(window).ready(function(){
    $('#book').turn({acceleration: true,
              pages: numberOfPages,
              elevation: 50,
              gradients: !$.isTouch,
              when: {
                turning: function(e, page, view) {

                  // Gets the range of pages that the book needs right now
                  var range = $(this).turn('range', page);

                  // Check if each page is within the book
                  for (page = range[0]; page<=range[1]; page++) 
                    addPage(page, $(this));

                },

                turned: function(e, page) {
                  $('#page-number').val(page);
                }
              }
            });

    $('#number-pages').html(numberOfPages);

    $('#page-number').keydown(function(e){

      if (e.keyCode==13)
        $('#book').turn('page', $('#page-number').val());
        
    });
  });

  $(window).bind('keydown', function(e){

    if (e.target && e.target.tagName.toLowerCase()!='input')
      if (e.keyCode==37)
        $('#book').turn('previous');
      else if (e.keyCode==39)
        $('#book').turn('next');

  });

</script>
body{
  background:#ccc;
}
#book{
  width:800px;
  height:500px;
}

#book .turn-page{
  background-color:white;
}

#book .cover{
  background:#333;
}

#book .cover h1{
  color:white;
  text-align:center;
  font-size:50px;
  line-height:500px;
  margin:0px;
}

#book .loader{
  background-image:url(loader.gif);
  width:24px;
  height:24px;
  display:block;
  position:absolute;
  top:238px;
  left:188px;
}

#book .data{
  text-align:center;
  font-size:40px;
  color:#999;
  line-height:500px;
}

#controls{
  width:800px;
  text-align:center;
  margin:20px 0px;
  font:30px arial;
}

#controls input, #controls label{
  font:30px arial;
}

#book .odd{
  background-image:-webkit-linear-gradient(left, #FFF 95%, #ddd 100%);
  background-image:-moz-linear-gradient(left, #FFF 95%, #ddd 100%);
  background-image:-o-linear-gradient(left, #FFF 95%, #ddd 100%);
  background-image:-ms-linear-gradient(left, #FFF 95%, #ddd 100%);
}

#book .even{
  background-image:-webkit-linear-gradient(right, #FFF 95%, #ddd 100%);
  background-image:-moz-linear-gradient(right, #FFF 95%, #ddd 100%);
  background-image:-o-linear-gradient(right, #FFF 95%, #ddd 100%);
  background-image:-ms-linear-gradient(right, #FFF 95%, #ddd 100%);
}
(function($) {

'use strict';

var has3d,

  vendor ='',

  PI = Math.PI,

  A90 = PI/2,

  isTouch = 'ontouchstart' in window,

  events = (isTouch) ? {start: 'touchstart', move: 'touchmove', end: 'touchend'}
      : {start: 'mousedown', move: 'mousemove', end: 'mouseup'},

  // Contansts used for each corner
  // tl * tr
  // *     *
  // bl * br

  corners = {
    backward: ['bl', 'tl'],
    forward: ['br', 'tr'],
    all: ['tl', 'bl', 'tr', 'br']
  },

  displays = ['single', 'double'],

  // Default options

  turnOptions = {

    // First page

    page: 1,
    
    // Enables gradients

    gradients: true,

    // Duration of transition in milliseconds

    duration: 600,

    // Enables hardware acceleration

    acceleration: true,

    // Display

    display: 'double',

    // Events

    when: null
  },

  flipOptions = {

    // Back page
    
    folding: null,

    // Corners
    // backward: Activates both tl and bl corners
    // forward: Activates both tr and br corners
    // all: Activates all the corners

    corners: 'forward',
    
    // Size of the active zone of each corner

    cornerSize: 100,

    // Enables gradients

    gradients: true,

    // Duration of transition in milliseconds

    duration: 600,

    // Enables hardware acceleration

    acceleration: true
  },

  // Number of pages in the DOM, minimum value: 6

  pagesInDOM = 6,
  
  pagePosition = {0: {top: 0, left: 0, right: 'auto', bottom: 'auto'},
          1: {top: 0, right: 0, left: 'auto', bottom: 'auto'}},

  // Gets basic attributes for a layer

  divAtt = function(top, left, zIndex, overf) {
    return {'css': {
          position: 'absolute',
          top: top,
          left: left,
          'overflow': overf || 'hidden',
          'z-index': zIndex || 'auto'
          }
      };
  },

  // Gets a 2D point from a bezier curve of four points

  bezier = function(p1, p2, p3, p4, t) {
    var mum1 = 1 - t,
      mum13 = mum1 * mum1 * mum1,
      mu3 = t * t * t;

    return point2D(Math.round(mum13*p1.x + 3*t*mum1*mum1*p2.x + 3*t*t*mum1*p3.x + mu3*p4.x),
            Math.round(mum13*p1.y + 3*t*mum1*mum1*p2.y + 3*t*t*mum1*p3.y + mu3*p4.y));
  },
  
  // Converts an angle from degrees to radians

  rad = function(degrees) {
    return degrees/180*PI;
  },

  // Converts an angle from radians to degrees

  deg = function(radians) {
    return radians/PI*180;
  },

  // Gets a 2D point

  point2D = function(x, y) {
    return {x: x, y: y};
  },

  // Returns the traslate value

  translate = function(x, y, use3d) {
    return (has3d && use3d) ? ' translate3d(' + x + 'px,' + y + 'px, 0px) ' : ' translate(' + x + 'px, ' + y + 'px) ';
  },

  // Returns the rotation value

  rotate = function(degrees) {
    return ' rotate(' + degrees + 'deg) ';
  },

  // Checks if a property belongs to an object

  has = function(property, object) {
    return Object.prototype.hasOwnProperty.call(object, property);
  },

  // Gets the CSS3 vendor prefix

  getPrefix = function() {
    var vendorPrefixes = ['Moz','Webkit','Khtml','O','ms'],
      len = vendorPrefixes.length,
      vendor = '';

    while (len--)
      if ((vendorPrefixes[len] + 'Transform') in document.body.style)
        vendor='-'+vendorPrefixes[len].toLowerCase()+'-';

    return vendor;
  },

  // Adds gradients

  gradient = function(obj, p0, p1, colors, numColors) {
  
    var j, cols = [];

    if (vendor=='-webkit-') {
    
      for (j = 0; j<numColors; j++)
          cols.push('color-stop('+colors[j][0]+', '+colors[j][1]+')');
      
      obj.css({'background-image': '-webkit-gradient(linear, '+p0.x+'% '+p0.y+'%,  '+p1.x+'% '+p1.y+'%, '+ cols.join(',') +' )'});

    } else {

      // This procedure makes the gradients for non-webkit browsers
      // It will be reduced to one unique way for gradients in next versions
      
      p0 = {x:p0.x/100 * obj.width(), y:p0.y/100 * obj.height()};
      p1 = {x:p1.x/100 * obj.width(), y:p1.y/100 * obj.height()};

      var dx = p1.x-p0.x,
        dy = p1.y-p0.y,
        angle = Math.atan2(dy, dx),
        angle2 = angle - Math.PI/2,
        diagonal = Math.abs(obj.width()*Math.sin(angle2)) + Math.abs(obj.height()*Math.cos(angle2)),
        gradientDiagonal = Math.sqrt(dy*dy + dx*dx),
        corner = point2D((p1.x<p0.x) ? obj.width() : 0, (p1.y<p0.y) ? obj.height() : 0),
        slope = Math.tan(angle),
        inverse = -1/slope,
        x = (inverse*corner.x - corner.y - slope*p0.x + p0.y) / (inverse-slope),
        c = {x: x, y: inverse*x - inverse*corner.x + corner.y},
        segA = (Math.sqrt( Math.pow(c.x-p0.x,2) + Math.pow(c.y-p0.y,2)));

        for (j = 0; j<numColors; j++)
          cols.push(' '+colors[j][1]+' '+(( segA + gradientDiagonal*colors[j][0] )*100/diagonal)+'%');
    
        obj.css({'background-image': vendor+'linear-gradient(' + (-angle) + 'rad,' + cols.join(',') + ')'});
    }
  },

turnMethods = {

  // Singleton constructor
  // $('#selector').turn([options]);

  init: function(opts) {

    // Define constants
    if (has3d===undefined) {
      has3d = 'WebKitCSSMatrix' in window || 'MozPerspective' in document.body.style;
      vendor = getPrefix();
    }

    var i, data = this.data(), ch = this.children();
  
    opts = $.extend({width: this.width(), height: this.height()}, turnOptions, opts);
    data.opts = opts;
    data.pageObjs = {};
    data.pages = {};
    data.pageWrap = {};
    data.pagePlace = {};
    data.pageMv = [];
    data.totalPages = opts.pages || 0;

    if (opts.when)
      for (i in opts.when)
        if (has(i, opts.when))
          this.bind(i, opts.when[i]);


    this.css({position: 'relative', width: opts.width, height: opts.height});

    this.turn('display', opts.display);

    if (has3d && !isTouch && opts.acceleration)
      this.transform(translate(0, 0, true));
  
    for (i = 0; i<ch.length; i++)
      this.turn('addPage', ch[i], i+1);
  
    this.turn('page', opts.page);

        // allow setting active corners as an option
        corners = $.extend({}, corners, opts.corners);

    // Event listeners

    $(this).bind(events.start, function(e) {
      for (var page in data.pages)
        if (has(page, data.pages) && flipMethods._eventStart.call(data.pages[page], e)===false)
          return false;
    });
      
    $(document).bind(events.move, function(e) {
      for (var page in data.pages)
        if (has(page, data.pages))
          flipMethods._eventMove.call(data.pages[page], e);
    }).
    bind(events.end, function(e) {
      for (var page in data.pages)
        if (has(page, data.pages))
          flipMethods._eventEnd.call(data.pages[page], e);

    });

    data.done = true;

    return this;
  },

  // Adds a page from external data

  addPage: function(element, page) {

    var incPages = false,
      data = this.data(),
      lastPage = data.totalPages+1;

    if (page) {
      if (page==lastPage) {
        page = lastPage;
        incPages = true;
      } else if (page>lastPage)
        throw new Error ('It is impossible to add the page "'+page+'", the maximum value is: "'+lastPage+'"');

    } else {
      page = lastPage;
      incPages = true;
    }

    if (page>=1 && page<=lastPage) {

      // Stop animations
      if (data.done) this.turn('stop');

      // Move pages if it's necessary
      if (page in data.pageObjs)
        turnMethods._movePages.call(this, page, 1);

      // Update number of pages
      if (incPages)
        data.totalPages = lastPage;

      // Add element
      data.pageObjs[page] = $(element).addClass('turn-page p' + page);

      // Add page
      turnMethods._addPage.call(this, page);

      // Update view
      if (data.done)
        this.turn('update');

      turnMethods._removeFromDOM.call(this);
    }

    return this;
  },

  // Adds a page from internal data

  _addPage: function(page) {
    
    var data = this.data(),
      element = data.pageObjs[page];

    if (element)
      if (turnMethods._necessPage.call(this, page)) {
        
        if (!data.pageWrap[page]) {

          var pageWidth = (data.display=='double') ? this.width()/2 : this.width(),
            pageHeight = this.height();

          element.css({width:pageWidth, height:pageHeight});

          // Place
          data.pagePlace[page] = page;

          // Wrapper
          data.pageWrap[page] = $('<div/>', {'class': 'turn-page-wrapper',
                          page: page,
                          css: {position: 'absolute',
                          overflow: 'hidden',
                          width: pageWidth,
                          height: pageHeight}}).
                          css(pagePosition[(data.display=='double') ? page%2 : 0]);

          // Append to this
          this.append(data.pageWrap[page]);

          // Move data.pageObjs[page] (element) to wrapper
          data.pageWrap[page].prepend(data.pageObjs[page]);
        }

        // If the page is in the current view, create the flip effect
        if (!page || turnMethods._setPageLoc.call(this, page)==1)
          turnMethods._makeFlip.call(this, page);
        
      } else {

        // Place
        data.pagePlace[page] = 0;

        // Remove element from the DOM
        if (data.pageObjs[page])
          data.pageObjs[page].remove();

      }

  },

  // Checks if a page is in memory
  
  hasPage: function(page) {

    return page in this.data().pageObjs;
  
  },

  // Prepares the flip effect for a page

  _makeFlip: function(page) {

    var data = this.data();

    if (!data.pages[page] && data.pagePlace[page]==page) {

      var single = data.display=='single',
        even = page%2;
      
      data.pages[page] = data.pageObjs[page].
                css({width: (single) ? this.width() : this.width()/2, height: this.height()}).
                flip({page: page,
                  next: (single && page === data.totalPages) ? page -1 : ((even || single) ? page+1 : page-1),
                  turn: this,
                  duration: data.opts.duration,
                  acceleration : data.opts.acceleration,
                  corners: (single) ? 'all' : ((even) ? 'forward' : 'backward'),
                  backGradient: data.opts.gradients,
                  frontGradient: data.opts.gradients
                  }).
                  flip('disable', data.disabled).
                  bind('pressed', turnMethods._pressed).
                  bind('released', turnMethods._released).
                  bind('start', turnMethods._start).
                  bind('end', turnMethods._end).
                  bind('flip', turnMethods._flip);
    }
    return data.pages[page];
  },

  // Makes pages within a range

  _makeRange: function() {

    var page,
      data = this.data(),
      range = this.turn('range');

      for (page = range[0]; page<=range[1]; page++)
        turnMethods._addPage.call(this, page);

  },

  // Returns a range of `pagesInDOM` pages that should be in the DOM
  // Example:
  // - page of the current view, return true
  // * page is in the range, return true
  // 0 page is not in the range, return false
  //
  // 1 2-3 4-5 6-7 8-9 10-11 12-13
  //    **  **  --   **  **

  range: function(page) {

    var remainingPages, left, right,
      data = this.data();
      page = page || data.tpage || data.page;
      var view = turnMethods._view.call(this, page);

      if (page<1 || page>data.totalPages)
        throw new Error ('"'+page+'" is not a page for range');
    
      view[1] = view[1] || view[0];
      
      if (view[0]>=1 && view[1]<=data.totalPages) {

        remainingPages = Math.floor((pagesInDOM-2)/2);

        if (data.totalPages-view[1] > view[0]) {
          left = Math.min(view[0]-1, remainingPages);
          right = 2*remainingPages-left;
        } else {
          right = Math.min(data.totalPages-view[1], remainingPages);
          left = 2*remainingPages-right;
        }

      } else {
        left = pagesInDOM-1;
        right = pagesInDOM-1;
      }

      return [Math.max(1, view[0]-left), Math.min(data.totalPages, view[1]+right)];

  },

  // Detects if a page is within the range of `pagesInDOM` from the current view

  _necessPage: function(page) {
    
    if (page===0)
      return true;

    var range = this.turn('range');

    return page>=range[0] && page<=range[1];
    
  },

  // Releases memory by removing pages from the DOM

  _removeFromDOM: function() {

    var page, data = this.data();

    for (page in data.pageWrap)
      if (has(page, data.pageWrap) && !turnMethods._necessPage.call(this, page))
        turnMethods._removePageFromDOM.call(this, page);
    

  },

  // Removes a page from DOM and its internal references

  _removePageFromDOM: function(page) {

    var data = this.data();

    if (data.pages[page]) {
      var dd = data.pages[page].data();
      if (dd.f && dd.f.fwrapper)
        dd.f.fwrapper.remove();
      data.pages[page].remove();
      delete data.pages[page];
    }

    if (data.pageObjs[page])
      data.pageObjs[page].remove();

    if (data.pageWrap[page]) {
      data.pageWrap[page].remove();
      delete data.pageWrap[page];
    }

    delete data.pagePlace[page];

  },

  // Removes a page

  removePage: function(page) {

    var data = this.data();

    if (data.pageObjs[page]) {
      // Stop animations
      this.turn('stop');

      // Remove `page`
      turnMethods._removePageFromDOM.call(this, page);
      delete data.pageObjs[page];

      // Move the pages behind `page`
      turnMethods._movePages.call(this, page, -1);

      // Resize the size of this magazine
      data.totalPages = data.totalPages-1;
      turnMethods._makeRange.call(this);

      // Check the current view
      if (data.page>data.totalPages)
        this.turn('page', data.totalPages);
    }

    return this;
  
  },

  // Moves pages

  _movePages: function(from, change) {

    var page,
      data = this.data(),
      single = data.display=='single',
      move = function(page) {

        var next = page + change,
          odd = next%2;

        if (data.pageObjs[page])
          data.pageObjs[next] = data.pageObjs[page].removeClass('page' + page).addClass('page' + next);

        if (data.pagePlace[page] && data.pageWrap[page]) {
          data.pagePlace[next] = next;
          data.pageWrap[next] = data.pageWrap[page].css(pagePosition[(single) ? 0 : odd]).attr('page', next);
          
          if (data.pages[page])
            data.pages[next] = data.pages[page].flip('options', {
              page: next,
              next: (single || odd) ? next+1 : next-1,
              corners: (single) ? 'all' : ((odd) ? 'forward' : 'backward')
            });

          if (change) {
            delete data.pages[page];
            delete data.pagePlace[page];
            delete data.pageObjs[page];
            delete data.pageWrap[page];
            delete data.pageObjs[page];
          }
      }
    };

    if (change>0)
      for (page=data.totalPages; page>=from; page--) move(page);
    else
      for (page=from; page<=data.totalPages; page++) move(page);

  },

  // Sets or Gets the display mode

  display: function(display) {

    var data = this.data(),
      currentDisplay = data.display;

    if (display) {

      if ($.inArray(display, displays)==-1)
        throw new Error ('"'+display + '" is not a value for display');
      
      if (display=='single') {
        if (!data.pageObjs[0]) {
          this.turn('stop').
            css({'overflow': 'hidden'});
          data.pageObjs[0] = $('<div />', {'class': 'turn-page p-temporal'}).
                  css({width: this.width(), height: this.height()}).
                    appendTo(this);
        }
      } else {
        if (data.pageObjs[0]) {
          this.turn('stop').
            css({'overflow': ''});
          data.pageObjs[0].remove();
          delete data.pageObjs[0];
        }
      }

      data.display = display;

      if (currentDisplay) {
        var size = this.turn('size');
        turnMethods._movePages.call(this, 1, 0);
        this.turn('size', size.width, size.height).
            turn('update');
      }

      return this;

    } else
      return currentDisplay;
  
  },

  // Detects if the pages are being animated

  animating: function() {

    return this.data().pageMv.length>0;

  },

  // Disables and enables the effect

  disable: function(bool) {

    var page,
      data = this.data(),
      view = this.turn('view');

      data.disabled = bool===undefined || bool===true;

    for (page in data.pages)
      if (has(page, data.pages))
        data.pages[page].flip('disable', bool ? $.inArray(page, view) : false );

    return this;

  },

  // Gets and sets the size

  size: function(width, height) {

    if (width && height) {

      var data = this.data(), pageWidth = (data.display=='double') ? width/2 : width, page;

      this.css({width: width, height: height});

      if (data.pageObjs[0])
        data.pageObjs[0].css({width: pageWidth, height: height});
      
      for (page in data.pageWrap) {
        if (!has(page, data.pageWrap)) continue;
        data.pageObjs[page].css({width: pageWidth, height: height});
        data.pageWrap[page].css({width: pageWidth, height: height});
        if (data.pages[page])
          data.pages[page].css({width: pageWidth, height: height});
      }

      this.turn('resize');

      return this;

    } else {
      
      return {width: this.width(), height: this.height()};

    }
  },

  // Resizes each page

  resize: function() {

    var page, data = this.data();

    if (data.pages[0]) {
      data.pageWrap[0].css({left: -this.width()});
      data.pages[0].flip('resize', true);
    }

    for (page = 1; page <= data.totalPages; page++)
      if (data.pages[page])
        data.pages[page].flip('resize', true);


  },

  // Removes an animation from the cache

  _removeMv: function(page) {

    var i, data = this.data();
      
    for (i=0; i<data.pageMv.length; i++)
      if (data.pageMv[i]==page) {
        data.pageMv.splice(i, 1);
        return true;
      }

    return false;

  },

  // Adds an animation to the cache
  
  _addMv: function(page) {

    var data = this.data();

    turnMethods._removeMv.call(this, page);
    data.pageMv.push(page);

  },

  // Gets indexes for a view

  _view: function(page) {
  
    var data = this.data();
    page = page || data.page;

    if (data.display=='double')
      return (page%2) ? [page-1, page] : [page, page+1];
    else
      return [page];

  },

  // Gets a view

  view: function(page) {

    var data = this.data(), view = turnMethods._view.call(this, page);

    return (data.display=='double') ? [(view[0]>0) ? view[0] : 0, (view[1]<=data.totalPages) ? view[1] : 0]
        : [(view[0]>0 && view[0]<=data.totalPages) ? view[0] : 0];

  },

  // Stops animations

  stop: function(ok) {

    var i, opts, data = this.data(), pages = data.pageMv;

    data.pageMv = [];

    if (data.tpage) {
      data.page = data.tpage;
      delete data['tpage'];
    }

    for (i in pages) {
      if (!has(i, pages)) continue;
      opts = data.pages[pages[i]].data().f.opts;
      flipMethods._moveFoldingPage.call(data.pages[pages[i]], null);
      data.pages[pages[i]].flip('hideFoldedPage');
      data.pagePlace[opts.next] = opts.next;
      
      if (opts.force) {
        opts.next = (opts.page%2===0) ? opts.page-1 : opts.page+1;
        delete opts['force'];
      }

    }

    this.turn('update');

    return this;
  },

  // Gets and sets the number of pages

  pages: function(pages) {

    var data = this.data();

    if (pages) {
      if (pages<data.totalPages) {

        for (var page = pages+1; page<=data.totalPages; page++)
          this.turn('removePage', page);

        if (this.turn('page')>pages)
          this.turn('page', pages);
      }

      data.totalPages = pages;

      return this;
    } else
      return data.totalPages;

  },

  // Sets a page without effect

  _fitPage: function(page, ok) {
    
    var data = this.data(), newView = this.turn('view', page);
    
    if (data.page!=page) {
      this.trigger('turning', [page, newView]);
      if ($.inArray(1, newView)!=-1) this.trigger('first');
      if ($.inArray(data.totalPages, newView)!=-1) this.trigger('last');
    }

    if (!data.pageObjs[page])
      return;

    data.tpage = page;

    this.turn('stop', ok);
    turnMethods._removeFromDOM.call(this);
    turnMethods._makeRange.call(this);
    this.trigger('turned', [page, newView]);

  },
  
  // Turns to a page

  _turnPage: function(page) {

    var current, next,
      data = this.data(),
      view = this.turn('view'),
      newView = this.turn('view', page);
  
    if (data.page!=page) {
      this.trigger('turning', [page, newView]);
      if ($.inArray(1, newView)!=-1) this.trigger('first');
      if ($.inArray(data.totalPages, newView)!=-1) this.trigger('last');
    }

    if (!data.pageObjs[page])
      return;

    data.tpage = page;

    this.turn('stop');

    turnMethods._makeRange.call(this);

    if (data.display=='single') {
      current = view[0];
      next = newView[0];
    } else if (view[1] && page>view[1]) {
      current = view[1];
      next = newView[0];
    } else if (view[0] && page<view[0]) {
      current = view[0];
      next = newView[1];
    }

    if (data.pages[current]) {

      var opts = data.pages[current].data().f.opts;
      data.tpage = next;
      
      if (opts.next!=next) {
        opts.next = next;
        data.pagePlace[next] = opts.page;
        opts.force = true;
      }

      if (data.display=='single')
        data.pages[current].flip('turnPage', (newView[0] > view[0]) ? 'br' : 'bl');
      else
        data.pages[current].flip('turnPage');
    }

  },

  // Gets and sets a page

  page: function(page) {

    page = parseInt(page, 10);

    var data = this.data();

    if (page>0 && page<=data.totalPages) {
      if (!data.done || $.inArray(page, this.turn('view'))!=-1)
        turnMethods._fitPage.call(this, page);
      else
        turnMethods._turnPage.call(this, page);
    
      return this;

    } else
      return data.page;
  
  },

  // Turns to the next view

  next: function() {

    var data = this.data();
    return this.turn('page', turnMethods._view.call(this, data.page).pop() + 1);
  
  },

  // Turns to the previous view

  previous: function() {
    
    var data = this.data();
    return this.turn('page', turnMethods._view.call(this, data.page).shift() - 1);

  },

  // Adds a motion to the internal list

  _addMotionPage: function() {

    var opts = $(this).data().f.opts,
      turn = opts.turn,
      dd = turn.data();

    opts.pageMv = opts.page;
    turnMethods._addMv.call(turn, opts.pageMv);
    dd.pagePlace[opts.next] = opts.page;
    turn.turn('update');

  },

  // This event is called in context of flip

  _start: function(e, opts, corner) {

      var data = opts.turn.data(),
        event = $.Event('start');

      e.stopPropagation();

      opts.turn.trigger(event, [opts, corner]);

      if (event.isDefaultPrevented()) {
        e.preventDefault();
        return;
      }
    
    if (data.display=='single') {

      var left = corner.charAt(1)=='l';
      if ((opts.page==1 && left) || (opts.page==data.totalPages && !left))
        e.preventDefault();
      else {
        if (left) {
          opts.next = (opts.next<opts.page) ? opts.next : opts.page-1;
          opts.force = true;
        } else
          opts.next = (opts.next>opts.page) ? opts.next : opts.page+1;
      }

    }

    turnMethods._addMotionPage.call(this);
  },

  // This event is called in context of flip

  _end: function(e, turned) {
    
    var that = $(this),
      data = that.data().f,
      opts = data.opts,
      turn = opts.turn,
      dd = turn.data();

    e.stopPropagation();

    if (turned || dd.tpage) {

      if (dd.tpage==opts.next || dd.tpage==opts.page) {
        delete dd['tpage'];
        turnMethods._fitPage.call(turn, dd.tpage || opts.next, true);
      }

    } else {
      turnMethods._removeMv.call(turn, opts.pageMv);
      turn.turn('update');
    }
    
  },
  
  // This event is called in context of flip

  _pressed: function() {

    var page,
      that = $(this),
      data = that.data().f,
      turn = data.opts.turn,
      pages = turn.data().pages;
  
    for (page in pages)
      if (page!=data.opts.page)
        pages[page].flip('disable', true);

    return data.time = new Date().getTime();

  },

  // This event is called in context of flip

  _released: function(e, point) {
    
    var that = $(this),
      data = that.data().f;

      e.stopPropagation();

    if ((new Date().getTime())-data.time<200 || point.x<0 || point.x>$(this).width()) {
      e.preventDefault();
      data.opts.turn.data().tpage = data.opts.next;
      data.opts.turn.turn('update');
      $(that).flip('turnPage');
    }

  },

  // This event is called in context of flip
  
  _flip: function() {

    var opts = $(this).data().f.opts;

    opts.turn.trigger('turn', [opts.next]);

  },

  // Calculate the z-index value for pages during the animation

  calculateZ: function(mv) {

    var i, page, nextPage, placePage, dpage,
      that = this,
      data = this.data(),
      view = this.turn('view'),
      currentPage = view[0] || view[1],
      r = {pageZ: {}, partZ: {}, pageV: {}},

      addView = function(page) {
        var view = that.turn('view', page);
        if (view[0]) r.pageV[view[0]] = true;
        if (view[1]) r.pageV[view[1]] = true;
      };
    
      for (i = 0; i<mv.length; i++) {
        page = mv[i];
        nextPage = data.pages[page].data().f.opts.next;
        placePage = data.pagePlace[page];
        addView(page);
        addView(nextPage);
        dpage = (data.pagePlace[nextPage]==nextPage) ? nextPage : page;
        r.pageZ[dpage] = data.totalPages - Math.abs(currentPage-dpage);
        r.partZ[placePage] = data.totalPages*2 + Math.abs(currentPage-dpage);
      }

    return r;
  },

  // Updates the z-index and display property of every page

  update: function() {

    var page,
      data = this.data();

    if (data.pageMv.length && data.pageMv[0]!==0) {

      // Update motion

      var apage,
        pos = this.turn('calculateZ', data.pageMv),
        view = this.turn('view', data.tpage);
    
      if (data.pagePlace[view[0]]==view[0]) apage = view[0];
      else if (data.pagePlace[view[1]]==view[1]) apage = view[1];
    
      for (page in data.pageWrap) {

        if (!has(page, data.pageWrap)) continue;

        data.pageWrap[page].css({display: (pos.pageV[page]) ? '' : 'none', 'z-index': pos.pageZ[page] || 0});

        if (data.pages[page]) {
          data.pages[page].flip('z', pos.partZ[page] || null);

          if (pos.pageV[page])
            data.pages[page].flip('resize');

          if (data.tpage)
            data.pages[page].flip('disable', true); // data.disabled || page!=apage
        }
      }
        
    } else {

      // Update static pages

      for (page in data.pageWrap) {
        if (!has(page, data.pageWrap)) continue;
          var pageLocation = turnMethods._setPageLoc.call(this, page);
          if (data.pages[page])
            data.pages[page].flip('disable', data.disabled || pageLocation!=1).flip('z', null);
      }
    }
  },

  // Sets the z-index and display property of a page
  // It depends on the current view

  _setPageLoc: function(page) {

    var data = this.data(),
      view = this.turn('view');

    if (page==view[0] || page==view[1]) {
      data.pageWrap[page].css({'z-index': data.totalPages, display: ''});
      return 1;
    } else if ((data.display=='single' && page==view[0]+1) || (data.display=='double' && page==view[0]-2 || page==view[1]+2)) {
      data.pageWrap[page].css({'z-index': data.totalPages-1, display: ''});
      return 2;
    } else {
      data.pageWrap[page].css({'z-index': 0, display: 'none'});
      return 0;
    }
  }
},

// Methods and properties for the flip page effect

flipMethods = {

  // Constructor

  init: function(opts) {

    if (opts.gradients) {
      opts.frontGradient = true;
      opts.backGradient = true;
    }

    this.data({f: {}});
    this.flip('options', opts);

    flipMethods._addPageWrapper.call(this);

    return this;
  },

  setData: function(d) {
    
    var data = this.data();

    data.f = $.extend(data.f, d);

    return this;
  },

  options: function(opts) {
    
    var data = this.data().f;

    if (opts) {
      flipMethods.setData.call(this, {opts: $.extend({}, data.opts || flipOptions, opts) });
      return this;
    } else
      return data.opts;

  },

  z: function(z) {

    var data = this.data().f;
    data.opts['z-index'] = z;
    data.fwrapper.css({'z-index': z || parseInt(data.parent.css('z-index'), 10) || 0});

    return this;
  },

  _cAllowed: function() {

    return corners[this.data().f.opts.corners] || this.data().f.opts.corners;

  },

  _cornerActivated: function(e) {
    if (e.originalEvent === undefined) {
      return false;
    }   

    e = (isTouch) ? e.originalEvent.touches : [e];

    var data = this.data().f,
      pos = data.parent.offset(),
      width = this.width(),
      height = this.height(),
      c = {x: Math.max(0, e[0].pageX-pos.left), y: Math.max(0, e[0].pageY-pos.top)},
      csz = data.opts.cornerSize,
      allowedCorners = flipMethods._cAllowed.call(this);

      if (c.x<=0 || c.y<=0 || c.x>=width || c.y>=height) return false;

      if (c.y<csz) c.corner = 't';
      else if (c.y>=height-csz) c.corner = 'b';
      else return false;
      
      if (c.x<=csz) c.corner+= 'l';
      else if (c.x>=width-csz) c.corner+= 'r';
      else return false;

    return ($.inArray(c.corner, allowedCorners)==-1) ? false : c;

  },

  _c: function(corner, opts) {

    opts = opts || 0;
    return ({tl: point2D(opts, opts),
        tr: point2D(this.width()-opts, opts),
        bl: point2D(opts, this.height()-opts),
        br: point2D(this.width()-opts, this.height()-opts)})[corner];

  },

  _c2: function(corner) {

    return {tl: point2D(this.width()*2, 0),
        tr: point2D(-this.width(), 0),
        bl: point2D(this.width()*2, this.height()),
        br: point2D(-this.width(), this.height())}[corner];

  },

  _foldingPage: function(corner) {

    var opts = this.data().f.opts;
    
    if (opts.folding) return opts.folding;
    else if(opts.turn) {
      var data = opts.turn.data();
      if (data.display == 'single')
        return (data.pageObjs[opts.next]) ? data.pageObjs[0] : null;
      else
        return data.pageObjs[opts.next];
    }

  },

  _backGradient: function() {

    var data =  this.data().f,
      turn = data.opts.turn,
      gradient = data.opts.backGradient &&
            (!turn || turn.data().display=='single' || (data.opts.page!=2 && data.opts.page!=turn.data().totalPages-1) );


    if (gradient && !data.bshadow)
      data.bshadow = $('<div/>', divAtt(0, 0, 1)).
        css({'position': '', width: this.width(), height: this.height()}).
          appendTo(data.parent);

    return gradient;

  },

  resize: function(full) {
    
    var data = this.data().f,
      width = this.width(),
      height = this.height(),
      size = Math.round(Math.sqrt(Math.pow(width, 2)+Math.pow(height, 2)));

    if (full) {
      data.wrapper.css({width: size, height: size});
      data.fwrapper.css({width: size, height: size}).
        children(':first-child').
          css({width: width, height: height});

      data.fpage.css({width: height, height: width});

      if (data.opts.frontGradient)
        data.ashadow.css({width: height, height: width});

      if (flipMethods._backGradient.call(this))
        data.bshadow.css({width: width, height: height});
    }

    if (data.parent.is(':visible')) {
      data.fwrapper.css({top: data.parent.offset().top,
        left: data.parent.offset().left});

      if (data.opts.turn)
        data.fparent.css({top: -data.opts.turn.offset().top, left: -data.opts.turn.offset().left});
    }

    this.flip('z', data.opts['z-index']);

  },

  // Prepares the page by adding a general wrapper and another objects

  _addPageWrapper: function() {

    var att,
      data = this.data().f,
      parent = this.parent();

    if (!data.wrapper) {

      var left = this.css('left'),
        top = this.css('top'),
        width = this.width(),
        height = this.height(),
        size = Math.round(Math.sqrt(Math.pow(width, 2)+Math.pow(height, 2)));
      
      data.parent = parent;
      data.fparent = (data.opts.turn) ? data.opts.turn.data().fparent : $('#turn-fwrappers');

      if (!data.fparent) {
        var fparent = $('<div/>', {css: {'pointer-events': 'none'}}).hide();
          fparent.data().flips = 0;

        if (data.opts.turn) {
          fparent.css(divAtt(-data.opts.turn.offset().top, -data.opts.turn.offset().left, 'auto', 'visible').css).
              appendTo(data.opts.turn);
          
          data.opts.turn.data().fparent = fparent;
        } else {
          fparent.css(divAtt(0, 0, 'auto', 'visible').css).
            attr('id', 'turn-fwrappers').
              appendTo($('body'));
        }

        data.fparent = fparent;
      }

      this.css({position: 'absolute', top: 0, left: 0, bottom: 'auto', right: 'auto'});

      data.wrapper = $('<div/>', divAtt(0, 0, this.css('z-index'))).
                appendTo(parent).
                  prepend(this);

      data.fwrapper = $('<div/>', divAtt(parent.offset().top, parent.offset().left)).
                hide().
                  appendTo(data.fparent);

      data.fpage = $('<div/>', {css: {cursor: 'default'}}).
          appendTo($('<div/>', divAtt(0, 0, 0, 'visible')).
                appendTo(data.fwrapper));

      if (data.opts.frontGradient)
        data.ashadow = $('<div/>', divAtt(0, 0,  1)).
          appendTo(data.fpage);

      // Save data

      flipMethods.setData.call(this, data);

      // Set size
      flipMethods.resize.call(this, true);
    }

  },

  // Takes a 2P point from the screen and applies the transformation

  _fold: function(point) {

    var that = this,
      a = 0,
      alpha = 0,
      beta,
      px,
      gradientEndPointA,
      gradientEndPointB,
      gradientStartV,
      gradientSize,
      gradientOpacity,
      mv = point2D(0, 0),
      df = point2D(0, 0),
      tr = point2D(0, 0),
      width = this.width(),
      height = this.height(),
      folding = flipMethods._foldingPage.call(this),
      tan = Math.tan(alpha),
      data = this.data().f,
      ac = data.opts.acceleration,
      h = data.wrapper.height(),
      o = flipMethods._c.call(this, point.corner),
      top = point.corner.substr(0, 1) == 't',
      left = point.corner.substr(1, 1) == 'l',

      compute = function() {
        var rel = point2D((o.x) ? o.x - point.x : point.x, (o.y) ? o.y - point.y : point.y),
          tan = (Math.atan2(rel.y, rel.x)),
          middle;

        alpha = A90 - tan;
        a = deg(alpha);
        middle = point2D((left) ? width - rel.x/2 : point.x + rel.x/2, rel.y/2);

        var gamma = alpha - Math.atan2(middle.y, middle.x),
          distance =  Math.max(0, Math.sin(gamma) * Math.sqrt(Math.pow(middle.x, 2) + Math.pow(middle.y, 2)));

          tr = point2D(distance * Math.sin(alpha), distance * Math.cos(alpha));

          if (alpha > A90) {
          
            tr.x = tr.x + Math.abs(tr.y * Math.tan(tan));
            tr.y = 0;

            if (Math.round(tr.x*Math.tan(PI-alpha)) < height) {

              point.y = Math.sqrt(Math.pow(height, 2)+2 * middle.x * rel.x);
              if (top) point.y =  height - point.y;
              return compute();

            }
          }
      
        if (alpha>A90) {
          var beta = PI-alpha, dd = h - height/Math.sin(beta);
          mv = point2D(Math.round(dd*Math.cos(beta)), Math.round(dd*Math.sin(beta)));
          if (left) mv.x = - mv.x;
          if (top) mv.y = - mv.y;
        }

        px = Math.round(tr.y/Math.tan(alpha) + tr.x);
      
        var side = width - px,
          sideX = side*Math.cos(alpha*2),
          sideY = side*Math.sin(alpha*2);
          df = point2D(Math.round( (left ? side -sideX : px+sideX)), Math.round((top) ? sideY : height - sideY));
          
        
        // GRADIENTS

          gradientSize = side*Math.sin(alpha);
            var endingPoint = flipMethods._c2.call(that, point.corner),
            far = Math.sqrt(Math.pow(endingPoint.x-point.x, 2)+Math.pow(endingPoint.y-point.y, 2));

          gradientOpacity = (far<width) ? far/width : 1;


        if (data.opts.frontGradient) {

          gradientStartV = gradientSize>100 ? (gradientSize-100)/gradientSize : 0;
          gradientEndPointA = point2D(gradientSize*Math.sin(A90-alpha)/height*100, gradientSize*Math.cos(A90-alpha)/width*100);
        
          if (top) gradientEndPointA.y = 100-gradientEndPointA.y;
          if (left) gradientEndPointA.x = 100-gradientEndPointA.x;
        }

        if (flipMethods._backGradient.call(that)) {

          gradientEndPointB = point2D(gradientSize*Math.sin(alpha)/width*100, gradientSize*Math.cos(alpha)/height*100);
          if (!left) gradientEndPointB.x = 100-gradientEndPointB.x;
          if (!top) gradientEndPointB.y = 100-gradientEndPointB.y;
        }
        //

        tr.x = Math.round(tr.x);
        tr.y = Math.round(tr.y);

        return true;
      },

      transform = function(tr, c, x, a) {
      
        var f = ['0', 'auto'], mvW = (width-h)*x[0]/100, mvH = (height-h)*x[1]/100,
          v = {left: f[c[0]], top: f[c[1]], right: f[c[2]], bottom: f[c[3]]},
          aliasingFk = (a!=90 && a!=-90) ? (left ? -1 : 1) : 0;

          x = x[0] + '% ' + x[1] + '%';

        that.css(v).transform(rotate(a) + translate(tr.x + aliasingFk, tr.y, ac), x);

        data.fpage.parent().css(v);
        data.wrapper.transform(translate(-tr.x + mvW-aliasingFk, -tr.y + mvH, ac) + rotate(-a), x);

        data.fwrapper.transform(translate(-tr.x + mv.x + mvW, -tr.y + mv.y + mvH, ac) + rotate(-a), x);
        data.fpage.parent().transform(rotate(a) + translate(tr.x + df.x - mv.x, tr.y + df.y - mv.y, ac), x);

        if (data.opts.frontGradient)
          gradient(data.ashadow,
              point2D(left?100:0, top?100:0),
              point2D(gradientEndPointA.x, gradientEndPointA.y),
              [[gradientStartV, 'rgba(0,0,0,0)'],
              [((1-gradientStartV)*0.8)+gradientStartV, 'rgba(0,0,0,'+(0.2*gradientOpacity)+')'],
              [1, 'rgba(255,255,255,'+(0.2*gradientOpacity)+')']],
              3,
              alpha);
    
        if (flipMethods._backGradient.call(that))
          gradient(data.bshadow,
              point2D(left?0:100, top?0:100),
              point2D(gradientEndPointB.x, gradientEndPointB.y),
              [[0.8, 'rgba(0,0,0,0)'],
              [1, 'rgba(0,0,0,'+(0.3*gradientOpacity)+')'],
              [1, 'rgba(0,0,0,0)']],
              3);
        
      };

    switch (point.corner) {
      case 'tl' :
        point.x = Math.max(point.x, 1);
        compute();
        transform(tr, [1,0,0,1], [100, 0], a);
        data.fpage.transform(translate(-height, -width, ac) + rotate(90-a*2) , '100% 100%');
        folding.transform(rotate(90) + translate(0, -height, ac), '0% 0%');
      break;
      case 'tr' :
        point.x = Math.min(point.x, width-1);
        compute();
        transform(point2D(-tr.x, tr.y), [0,0,0,1], [0, 0], -a);
        data.fpage.transform(translate(0, -width, ac) + rotate(-90+a*2) , '0% 100%');
        folding.transform(rotate(270) + translate(-width, 0, ac), '0% 0%');
      break;
      case 'bl' :
        point.x = Math.max(point.x, 1);
        compute();
        transform(point2D(tr.x, -tr.y), [1,1,0,0], [100, 100], -a);
        data.fpage.transform(translate(-height, 0, ac) + rotate(-90+a*2), '100% 0%');
        folding.transform(rotate(270) + translate(-width, 0, ac), '0% 0%');
      break;
      case 'br' :
        point.x = Math.min(point.x, width-1);
        compute();
        transform(point2D(-tr.x, -tr.y), [0,1,1,0], [0, 100], a);
        data.fpage.transform(rotate(90-a*2), '0% 0%');
        folding.transform(rotate(90) + translate(0, -height, ac), '0% 0%');

      break;
    }

    data.point = point;
  
  },

  _moveFoldingPage: function(bool) {

    var data = this.data().f,
      folding = flipMethods._foldingPage.call(this);

    if (folding) {
      if (bool) {
        if (!data.fpage.children()[data.ashadow? '1' : '0']) {
          flipMethods.setData.call(this, {backParent: folding.parent()});
          data.fpage.prepend(folding);
        }
      } else {
        if (data.backParent)
          data.backParent.prepend(folding);

      }
    }

  },

  _showFoldedPage: function(c, animate) {

    var folding = flipMethods._foldingPage.call(this),
      dd = this.data(),
      data = dd.f;

    if (!data.point || data.point.corner!=c.corner) {
      var event = $.Event('start');
      this.trigger(event, [data.opts, c.corner]);

      if (event.isDefaultPrevented())
        return false;
    }


    if (folding) {

      if (animate) {

        var that = this, point = (data.point && data.point.corner==c.corner) ? data.point : flipMethods._c.call(this, c.corner, 1);
      
        this.animatef({from: [point.x, point.y], to:[c.x, c.y], duration: 500, frame: function(v) {
          c.x = Math.round(v[0]);
          c.y = Math.round(v[1]);
          flipMethods._fold.call(that, c);
        }});

      } else  {

        flipMethods._fold.call(this, c);
        if (dd.effect && !dd.effect.turning)
          this.animatef(false);

      }

      if (!data.fwrapper.is(':visible')) {
        data.fparent.show().data().flips++;
        flipMethods._moveFoldingPage.call(this, true);
        data.fwrapper.show();

        if (data.bshadow)
          data.bshadow.show();
      }

      return true;
    }

    return false;
  },

  hide: function() {

    var data = this.data().f,
      folding = flipMethods._foldingPage.call(this);

    if ((--data.fparent.data().flips)===0)
      data.fparent.hide();

    this.css({left: 0, top: 0, right: 'auto', bottom: 'auto'}).transform('', '0% 100%');

    data.wrapper.transform('', '0% 100%');

    data.fwrapper.hide();

    if (data.bshadow)
      data.bshadow.hide();

    folding.transform('', '0% 0%');

    return this;
  },

  hideFoldedPage: function(animate) {

    var data = this.data().f;

    if (!data.point) return;

    var that = this,
      p1 = data.point,
      hide = function() {
        data.point = null;
        that.flip('hide');
        that.trigger('end', [false]);
      };

    if (animate) {
      var p4 = flipMethods._c.call(this, p1.corner),
        top = (p1.corner.substr(0,1)=='t'),
        delta = (top) ? Math.min(0, p1.y-p4.y)/2 : Math.max(0, p1.y-p4.y)/2,
        p2 = point2D(p1.x, p1.y+delta),
        p3 = point2D(p4.x, p4.y-delta);
    
      this.animatef({
        from: 0,
        to: 1,
        frame: function(v) {
          var np = bezier(p1, p2, p3, p4, v);
          p1.x = np.x;
          p1.y = np.y;
          flipMethods._fold.call(that, p1);
        },
        complete: hide,
        duration: 800,
        hiding: true
        });

    } else {
      this.animatef(false);
      hide();
    }
  },

  turnPage: function(corner) {

    var that = this,
      data = this.data().f;

    corner = {corner: (data.corner) ? data.corner.corner : corner || flipMethods._cAllowed.call(this)[0]};

    var p1 = data.point || flipMethods._c.call(this, corner.corner, (data.opts.turn) ? data.opts.turn.data().opts.elevation : 0),
      p4 = flipMethods._c2.call(this, corner.corner);

      this.trigger('flip').
        animatef({
          from: 0,
          to: 1,
          frame: function(v) {
            var np = bezier(p1, p1, p4, p4, v);
            corner.x = np.x;
            corner.y = np.y;
            flipMethods._showFoldedPage.call(that, corner);
          },
          
          complete: function() {
            that.trigger('end', [true]);
          },
          duration: data.opts.duration,
          turning: true
        });

      data.corner = null;
  },

  moving: function() {

    return 'effect' in this.data();
  
  },

  isTurning: function() {

    return this.flip('moving') && this.data().effect.turning;
  
  },

  _eventStart: function(e) {

    var data = this.data().f;

    if (!data.disabled && !this.flip('isTurning')) {
      data.corner = flipMethods._cornerActivated.call(this, e);
      if (data.corner && flipMethods._foldingPage.call(this, data.corner)) {
        flipMethods._moveFoldingPage.call(this, true);
        this.trigger('pressed', [data.point]);
        return false;
      } else
        data.corner = null;
    }

  },

  _eventMove: function(e) {

    var data = this.data().f;

    if (!data.disabled) {
      e = (isTouch) ? e.originalEvent.touches : [e];
    
      if (data.corner) {

        var pos = data.parent.offset();

        data.corner.x = e[0].pageX-pos.left;
        data.corner.y = e[0].pageY-pos.top;

        flipMethods._showFoldedPage.call(this, data.corner);
      
      } else if (!this.data().effect && this.is(':visible')) { // roll over
        
        var corner = flipMethods._cornerActivated.call(this, e[0]);
        if (corner) {
          var origin = flipMethods._c.call(this, corner.corner, data.opts.cornerSize/2);
          corner.x = origin.x;
          corner.y = origin.y;
          flipMethods._showFoldedPage.call(this, corner, true);
        } else
          flipMethods.hideFoldedPage.call(this, true);

      }
    }
  },

  _eventEnd: function() {

    var data = this.data().f;

    if (!data.disabled && data.point) {
      var event = $.Event('released');
      this.trigger(event, [data.point]);
      if (!event.isDefaultPrevented())
        flipMethods.hideFoldedPage.call(this, true);
    }

    data.corner = null;

  },

  disable: function(disable) {

    flipMethods.setData.call(this, {'disabled': disable});
    return this;

  }
},

cla = function(that, methods, args) {

  if (!args[0] || typeof(args[0])=='object')
    return methods.init.apply(that, args);
  else if(methods[args[0]] && args[0].toString().substr(0, 1)!='_')
    return methods[args[0]].apply(that, Array.prototype.slice.call(args, 1));
  else
    throw args[0] + ' is an invalid value';
};

$.extend($.fn, {

  flip: function(req, opts) {
    return cla(this, flipMethods, arguments);
  },

  turn: function(req) {
    return cla(this, turnMethods, arguments);
  },

  transform: function(transform, origin) {

    var properties = {};
    
    if (origin)
      properties[vendor+'transform-origin'] = origin;
    
    properties[vendor+'transform'] = transform;
  
    return this.css(properties);

  },

  animatef: function(point) {

    var data = this.data();

    if (data.effect)
      clearInterval(data.effect.handle);

    if (point) {

      if (!point.to.length) point.to = [point.to];
      if (!point.from.length) point.from = [point.from];
      if (!point.easing) point.easing = function (x, t, b, c, data) { return c * Math.sqrt(1 - (t=t/data-1)*t) + b; };

      var j, diff = [],
        len = point.to.length,
        that = this,
        fps = point.fps || 30,
        time = - fps,
        f = function() {
          var j, v = [];
          time = Math.min(point.duration, time + fps);
  
          for (j = 0; j < len; j++)
            v.push(point.easing(1, time, point.from[j], diff[j], point.duration));

          point.frame((len==1) ? v[0] : v);

          if (time==point.duration) {
            clearInterval(data.effect.handle);
            delete data['effect'];
            that.data(data);
            if (point.complete)
              point.complete();
            }
          };

      for (j = 0; j < len; j++)
        diff.push(point.to[j] - point.from[j]);

      data.effect = point;
      data.effect.handle = setInterval(f, fps);
      this.data(data);
      f();
    } else {
      delete data['effect'];
    }
  }
});


$.isTouch = isTouch;

})(jQuery);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.