var ScrollerEngine = function(element, options) {
  this.$element = $(element);
  this.itemContainer = this.$element.find('.scroller-items');
  this.items = this.itemContainer.find('.scroller-item');
  this.options = options;
}

ScrollerEngine.prototype = {
  next: function(callback) {
    var self = this;
    this.items.eq(0).animate({
      marginLeft: '-=302px'
    }, this.options.transitionSpeed, function(){
      self.shiftElement('back');
      if (callback != undefined) {
        callback();
      }
    });
  },
  
  prev: function(callback) {
    this.shiftElement('front');
    this.items.eq(0).animate({
      marginLeft: '+=302px'
    }, this.options.transitionSpeed, function(){
      if (callback != undefined) {
        callback();
      }
    });
  },
  
  shiftElement: function(position) {
    switch (position) {
      case 'back':
        var originalEl = this.items.eq(0); 
        var shiftEl = originalEl.clone();
        shiftEl.removeAttr('style');
        this.itemContainer.append(shiftEl);
        break;
      case 'front':
        var originalEl = this.items.eq(this.items.length - 1); 
        var shiftEl = originalEl.clone();
        shiftEl.css('margin-left', '-302px');
        this.itemContainer.prepend(shiftEl);
        break;
    }
    originalEl.remove();
    this.items = this.itemContainer.find('.scroller-item');
  },
  
  init: function() {
    this.itemContainer.css('width', (302 * this.items.length));
  }
}

function bindScroller (selector, options) {
  //Define the base
  var defaults = {
    timeout: 10,
    transitionSpeed: 1000,
    autoPlay: true
  }
  options = $.extend(defaults, options);
  
  var se = new ScrollerEngine(selector, options);
  
  se.init();
  
  se.$element.find('.next-item').click(function(e){
    e.preventDefault();
    se.next(function() { angle = 0; });
  });
  
  se.$element.find('.previous-item').click(function(e){
    e.preventDefault();
    se.prev(function() { angle = 0; });
  });
  
  var t = null;
  
  var canvas = $('#draw-area')[0];
  if ($.browser.msie && parseInt($.browser.version) <= 8) {
    canvas = G_vmlCanvasManager.initElement(canvas);
  }
  var ctx = canvas.getContext('2d');
  var angle = 0;
  function drawLoader (theangle) {
    if (ctx != undefined) {
      ctx.clearRect(0,0,20,20);
      //background Circle
      ctx.lineWidth = 5;
      ctx.strokeStyle = '#E5ECF2';
      ctx.fillStyle = '#fff';
      ctx.beginPath();
      ctx.arc(10, 10, 6.5, 0, (Math.PI * 2), true);
      ctx.stroke();
      ctx.fill();
      
      //Loader Circle
      var rads = theangle * (Math.PI / 180);
      ctx.lineWidth = 2.3;
      ctx.strokeStyle = '#DEB738';
      ctx.beginPath();
      ctx.arc(10, 10, 7.5, 0, rads, false);
      ctx.stroke();
    }
  }
  var step = (se.options.timeout * 1000) / 360;
  
  function checkInterval() {
    if (angle <= 360) {
      drawLoader(angle);
      angle += 1;
    } else {
      clearInterval(t);
      angle = 1;
      se.next(function(){
        t = setInterval(function() {
          checkInterval();
        }, step);
      });
    }
  }
  
  function turnBack() {
    if (angle == 0) {
      clearInterval(t);
      drawLoader(angle);
    } else {
      drawLoader(angle);
      angle -= 1;
    }
  }
  
  if (se.options.autoPlay) {
    t = setInterval(function() {
      checkInterval();
    }, step);
    se.$element.find('.play-pause').addClass('pause');
  } else {
    se.$element.find('.play-pause').addClass('play');
  }
  
  se.$element.find('.play-pause').click(function(e){
    var $this = $(this);
    if ($this.hasClass('pause')) {
      $this.addClass('play').removeClass('pause');
      clearInterval(t);
      var runBack = 500 / angle;
      t = setInterval(function() {
        turnBack();
      }, runBack);
    } else {
      t = setInterval(function() {
        checkInterval();
      }, step);
      se.$element.find('.play-pause').addClass('pause').removeClass('play');
    }
  });
}