var $ = sf.$;

var test;

​

sf.model('cards', function(My){

  // For you to play around on the console :)

  test = My;

​

  My.list = [

    'https://upload.wikimedia.org/wikipedia/en/f/f5/RWS_Tarot_08_Strength.jpg',

    'https://upload.wikimedia.org/wikipedia/en/5/53/RWS_Tarot_16_Tower.jpg',

    'https://upload.wikimedia.org/wikipedia/en/9/9b/RWS_Tarot_07_Chariot.jpg',

    'https://upload.wikimedia.org/wikipedia/en/d/db/RWS_Tarot_06_Lovers.jpg',

    'https://upload.wikimedia.org/wikipedia/en/thumb/8/88/RWS_Tarot_02_High_Priestess.jpg/690px-RWS_Tarot_02_High_Priestess.jpg',

    'https://upload.wikimedia.org/wikipedia/en/d/de/RWS_Tarot_01_Magician.jpg'

  ];

  // Lets convert above list into array of object

  for(var i=0; i < My.list.length; i++){

    My.list[i] = {

      background:My.list[i],

      perspective: 1500,

      rotateX:30,

      rotateY:0,

      rotateZ:Math.ceil(Math.random()*20) - 10,

      scale:1,

      x:0,

      y:i * -4,

      z:0,

      throwed:false // true = disable interaction on card

    };

  }

  // Mouse click start

  My.mouseDown = function(ev, item){

    item.scale = 1.15;

    item.rotateZ = 0;

    // Save reference of clicked item

    clicked = item;

    // Add event listener after user clicking the card

    $(document)

      .on('mousemove', My.mouseMove)

      .once('mouseup', My.mouseUp);

    // Add dragging class into the clicked item

    $(My.list.getElement(item)).addClass('dragging');

  }

  // Return every card back after some delay

  function collectCard(){

    for(let i=0; i < My.list.length; i++){

      setTimeout(function(){

        var item = My.list[i];

        item.x = 0;

        item.throwed = false;

        item.rotateZ = Math.ceil(Math.random()*20) - 10;

      }, i * 200);

    }

  }

  // Throw current clicked card on a direction

  function throwCard(isLeft){

    clicked.x = isLeft ? -750 : 750;

    clicked.throwed = true;

    // Collect cards back if this the last card

    if(clicked === My.list[0])

      setTimeout(collectCard, 1000);

  }

  // Mouse click ended

  My.mouseUp = function(ev){

    clicked.scale = 1;

​

    // Throw if user move little fast

    if(Math.abs(speedX) >= 3)

      throwCard(speedX < 0 ? true : false);

    // Reset card position if not throwed

    else clicked.x = 0;

​

    // Remove event listener and the dragging class

    $(document).off('mousemove', My.mouseMove);

    $(My.list.getElement(clicked)).removeClass('dragging');

​

    // Reset mouse speed detection and remove reference of clicked item

    speedX = 0;

    clicked = null;

  }

  var speedX = 0;

  My.mouseMove = function(ev){

    // Move card with this

    clicked.x += ev.movementX;

    speedX = ev.movementX;

  }

});