/*
 * TODO:
 * - Change var numberOfLevels to be automated (there is already logic in here somewhere
 * that counts how many images there are)
 * - fix reload problem with .load(), I know I read somewhere how to do this right
 * - Clean up all the color stuff (greenAmount etc.)
 */

jQuery.preloadImages = function()
{
  for(var i = 0; i<arguments.length; i++)
  {
    jQuery("<img>").attr("src", arguments[i]);
  }
}

$.preloadImages('dots-white.gif');

$(document).ready(function() {
  var testImageSrc = $('img:eq(21)').attr('src');
  $('img:eq(21)').attr('src', testImageSrc + '#' + Math.random());
  
  
  // make a little play with me sign
  $('<div></div>').addClass('welcome').insertAfter('.image-wrapper').hide().css({'top': 220, 'left': 380}).html('<img src="http://clients.quilted.org/emma/dots-white.gif" />').fadeIn();
  
  // insert spans for testing
  // $('<span></span>').insertAfter('.image-wrapper');
  // $('<span></span>').insertAfter('.image-wrapper');
  
  // for some reason it works fine in IE in emma's site?
  // if ($.browser.msie()) {
  //   var spacing = 606;
  //   var imageStart = {top: 8, left: 193}
  // } else {
    var spacing = 600;
    var imageStart = {top: 8, left: 189}
  // }
  
  
  
  var imageCount = $('.image').length;
  
  $('.image-wrapper').css({
    'width': spacing,
    'height': '450px',
    'overflow': 'hidden',
    'cursor': 'move'
  }).find('.images').css({
    'width': spacing * imageCount
  });
  
  // right after .find('.image')
  // .css({
  //   'float': 'none',
  //   'position': 'absolute',
  //   'left': 1000
  // });
  
  // var $images = $('.image');
  // 
  // $images.eq(0).css('left', 0);
  // $images.eq(1).css('left', spacing);
  // $images.eq(2).css('left', spacing * 2);
  
  
  /*
   * Handling the interaction
   */
  
  
  // var greenAmount = 0;
  // var redAmount = 0;
  
  // actual value for final
  var numberOfLevels = 22;
  
  // test for colors
  // var numberOfLevels = 255;
  
  // var imageWidth = 500;
  // var imageLeftStart = 500;
  // 
  // var imageHeight = 500;
  // var imageTopStart = 10;
  
  // var imageWidth = $('.image-wrapper').width();
  var imageWidth = spacing;
  
  // var imageStart = $('.image-wrapper').offset();
  // var imageStart = {top: 8, left: 107}
  
  // var imageHeight = $('.image-wrapper').height();
  var imageHeight = 450;
  
  
  var pixelsPerLevelHorizontal = imageWidth / numberOfLevels; // 500 / 255 = 1.96
  // var pixelsPerLevelVertical = imageHeight / numberOfLevels;
  
  
  var addScrollingControl = function() {
    // $('.welcome').text('Play with me!').fadeIn();
    $('.welcome').fadeOut('slow');
    
    $('.image-wrapper').mousemove(function(e) {
      
      var mousePositionHorizontal = e.pageX;
      var horizontalCount = Math.ceil((mousePositionHorizontal - imageStart['left']) / pixelsPerLevelHorizontal);

      // var mousePositionVertical = e.pageY;
      // var redAmount = Math.ceil((mousePositionVertical - imageStart['top']) / pixelsPerLevelVertical);
      // 
      // $(this).css('background-color', 'rgb(' + redAmount + ', 0, ' + greenAmount + ')');

      $('.images').css({
        'left': spacing * -1 * (horizontalCount - 1)
      });

      // only useful for colors or vertical calcs
      // $('span:first').text('vertical ' + greenAmount);
      
      // for testing
      // $('span:last').text(' horizonal count: ' + horizontalCount);

    });
  }
  
  
  var startPosition = 12;
  
  var count = 1;
  var timeDelay = 3000;
  
  if (!$.browser.msie()) {
    $('img:eq(21)').load(function() {
      addScrollingControl();
      
      // using setInterval and timout...
      var stepToStartPosition = function() {
        $('.images').animate({left: '-='+spacing}, 1);
      }
      
      
      while (count < startPosition) {
        stepToStartPosition();
        count++;
      }
      
      // a different try
    //   $('.images')
    //     .css('left', spacing * -1 * (1 - 1)).animate({opacity: 1.0}, timeDelay)
    //     .css('left', spacing * -1 * (2 - 1)).animate({opacity: 1.0}, timeDelay)
    //     .css('left', spacing * -1 * (3 - 1)).animate({opacity: 1.0}, timeDelay)
    //     .css('left', spacing * -1 * (4 - 1)).animate({opacity: 1.0}, timeDelay)
    //     .css('left', spacing * -1 * (5 - 1)).animate({opacity: 1.0}, timeDelay)
    //     .css('left', spacing * -1 * (6 - 1)).animate({opacity: 1.0}, timeDelay)
    //     .css('left', spacing * -1 * (7 - 1)).animate({opacity: 1.0}, timeDelay)
    //     .css('left', spacing * -1 * (8 - 1)).animate({opacity: 1.0}, timeDelay)
    //     .css('left', spacing * -1 * (9 - 1)).animate({opacity: 1.0}, timeDelay)
    //     .css('left', spacing * -1 * (10 - 1)).animate({opacity: 1.0}, timeDelay)
    //     .css('left', spacing * -1 * (11 - 1)).animate({opacity: 1.0}, timeDelay)
    //     .css('left', spacing * -1 * (12 - 1)).animate({opacity: 1.0}, timeDelay);
    //   // $('.images').css('left', spacing * -1 * (startPosition - 1));
    
    });

  } else {
    addScrollingControl();
  }
  
  
  // for testing
  // $(document).mousemove(function(e) {
  //   var mousePositionHorizontalPage = e.pageX;
  //   $('span:first').text('page ' + mousePositionHorizontalPage);
  //   
  // });
  
  
});