function getRow(index) {
  return index <= 3 ? 1 : index <= 6 ? 2 : 3;
}

function stitch(face1, face2) {
  
}

$(document).ready(function () {
  // I was trying to write code that detected support for CSS3 3D transforms, 
  // but Safari 4.0.2 kept saying it had them, which isn't true :-(
  
  var colours = ['white', 'yellow', 'blue', 'green', 'red', 'pink'];
  var colour;
  var $face;
  var $rubiks = $('#rubiks').empty();
  var block = '<div class="block $colour"><!-- $n --></div>';
  for (var i = 0; i < 6; i++) {
    colour = colours.pop();
    $face = $('<div class="face face' + (i+1) + '" />').appendTo($rubiks);
    for (var j = 0; j < 9; j++) {
      $face.append(block.replace(/\$colour/, colour).replace(/\$n/, j+1));
    }
  }
  
  var $blocks = $('.block').click(function () {
    if (moved) {
      return;
    }
    // if already selected, change orientation
    var $block = $(this),
        $face = $block.parent(),
        $faceBlocks = $face.find('div'),
        index = $faceBlocks.index(this) + 1,
        selectColumn = $block.data('columnNext');
        
    // top edge blocks: 0, 1, 2
    var row = getRow(index);
    var col = (index % 3);
    
    $blocks.removeClass('selected');

    if (!$block.is('selected')) {
      // clear previous data
      $blocks.removeData('columnNext')
    }

    // for now I'm ignoring orientation of the device AND the cube
    if (selectColumn) {
      // col select
      $face.find('div:nth-child(3n+' + col + ')').addClass('selected');
    } else {
      // row select, via: http://twitter.com/ronalddevera/status/2840072704
      $face.find('div:nth-child(n+' + ((row * 3) - 2) + '):nth-child(-n' + (row * 3) + ')').addClass('selected');
    }
    $block.data('columnNext', !selectColumn);
  });
  
  var x = 0, y = 0;

  var running = true;
  
  var mouse = { start : {} };
  
  var eventTypes = {
    down : [ 'mousedown', 'touchstart' ],
    up : [ 'mouseup', 'touchend' ],
    move : [ 'mousemove', 'touchmove' ]
  };
  
  // 1 == iphone, 0 == otherwise
  
  // incorrect - doesn't work with full screen apps
  // var regex = new RegExp("Mozilla/5.0 \\((.*)\\) AppleWebKit/(.*) \\(KHTML, like Gecko\\) Version/.* Mobile/(.*) Safari/(.*)");
  
  var iPhone = RegExp(" AppleWebKit/").test(navigator.userAgent) && RegExp(" Mobile/").test(navigator.userAgent);
  
  var type = iPhone ? 1 : 0;
  
  var moving = false, moved = false;
  
  $(document).bind(eventTypes.down[type], function (event) {
    if (type == 1) {
      // jQuery tucks the original event here, because actuall
      // event is a custom object being passed in!
      event = event.originalEvent.touches[0];
    }
    moving = true;
    moved = false;
    $('body').addClass('move');
    mouse.start.x = event.pageX;
    mouse.start.y = event.pageY;
  }).bind(eventTypes.up[type], function (event) {
    $('body').removeClass('move');
    delete mouse.last;
    if (moving) moving = false;
  }).bind(eventTypes.move[type], function (event) {
    if (moving == true) {
      moved = true;
      // cancel text selection, and on iPhone, moving the screen
      event.preventDefault();
      
      if (type == 1) {
        event = event.originalEvent.touches[0];
      }
      
      // work out a direction change
      if (!mouse.last) {
        mouse.last = mouse.start;
      } else {
        // if the direction changed during the drag op, then reset the starting point
        if (forward(mouse.start.x, mouse.last.x) != forward(mouse.last.x, event.pageX)) {
          mouse.start.x = mouse.last.x;
        }

        if (forward(mouse.start.y, mouse.last.y) != forward(mouse.last.y, event.pageY)) {
          mouse.start.y = mouse.last.y;
        }
      }

      // switching around like this makes the drag movement more intuitive
      x += parseInt((mouse.start.y - event.pageY));
      y -= parseInt((mouse.start.x - event.pageX));
      
      // actual move
      $('#rubiks')[0].style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg)";      
      
      
      mouse.last.yforward = forward(mouse.last.y, event.pageY);
      mouse.last.xforward = forward(mouse.last.x, event.pageX);
      mouse.last.x = event.pageX;
      mouse.last.y = event.pageY;
    }
  });
  
  function forward(v1, v2) {
    return v1 >= v2 ? true : false;
  }
});