var devEnv = '';
if ( document.URL.indexOf('_dev.php/') > -1 ) {
  devEnv = '/frontend_dev.php';
}
var lastPos;
var boardPosX;
 
// Width of the artist images
var imageWidth = 960;

// List of artist image names
//var imageList = ['stuart.jpg', 'alex.jpg', 'luke.jpg'];


var position = null;
// Lets get the width of #stage which is 100% of the screen, ergo, getting the screen width. Then we will divide it by 2 for the center
var screenWidth = ($('#stage').width()/2);

// Just incase we need to know if they are in IE or not
var theyInIE = false;

// Older versions of Drag and Drop don't work for IE9, this will fix that.
(function($){
  var a=$.ui.mouse.prototype._mouseMove;
  $.ui.mouse.prototype._mouseMove=function(b){
    if($.browser.msie&&document.documentMode>=9){
      b.button=1
    }

    a.apply(this,[b]);
  }
}(jQuery));

// backgroundPosition does not work for any IE and therefore we need to use background-position
(function($) {
  jQuery.fn.backgroundPosition = function() {
    // Lets see if we can get the css "background-positon"
    var p = $(this).css('background-position');
    // If we couldn't get the value then we must be in IE
    if(typeof(p) === 'undefined') {
      // Lets sort it out by using IE versions (background-position-x and -y)
      return $(this).css('background-position-x') + ' ' + $(this).css('background-position-y');
      // Oh dear, seeing as they are in IE, we better make sure we know this for future reference
      theyInIE = true;
    }
    else return p;
  };
})(jQuery);

(function($) {
  $(document).ready(function() {
  
  $('#dragMe.stage').show();
    // LETS LOAD SOME IMAGES, we will load images such as Hover states and the boards. (imgs that are not loaded when the page loads)
    if (document.images) {
      $.each(imageList, function(index, value) {
        index = new Image();
        index.src = "/images/boards/"+value+"";
      });
    }
    
    

    // Function to reset the board to its origional position if the mouse has been moved to the centre
    function resetBoardPos() {

      // Get the boards background position (using that cool function from earlier)
      var bground = $('#board').backgroundPosition();
      // Split it so we can get the X position seperate
      var background = cbSplit(bground, 'px ');

      // if the mouse is in the center of the screen
      if (position.left > screenWidth-50 && position.left < screenWidth+50 ) {
        // Get the chickens position
        var bChikBg = $('#blackChicken').backgroundPosition();

        // Split the chickens position values
        var bChikBgX = cbSplit(bChikBg, 'px ');

        // If the chickens position is left of the screen, lets face him right so he walks in right
        if (bChikBgX[0] < (screenWidth-(imageWidth/2))-100 ) {
          $('#blackChicken').css('background-image','url("/images/blackChickenR.png")');
        }
        // Same thing, but if he is on the right side, lets face him left
        if (bChikBgX[0] > (screenWidth-(imageWidth/2))-100) {
          $('#blackChicken').css('background-image','url("/images/blackChickenL.png")');
        }
        // if the boards background[X] is not where we want it to be
        if (background[0] < 145 || background[0] > 160) {
          // We added this variable so we could know if were using good browser's backgroundPosition or IE's background-position
          
          // Oh dear, someone is in IE... It's cool, were prepared for that, lets animate them all back to the right position
          $('#board').animate({
            backgroundPosition: (screenWidth-(imageWidth/2))+'px 365px'
          }, 400);
          $('#b1').animate({
            backgroundPosition: (screenWidth-(imageWidth/2))+'px 0px'
          }, 400);
          $('#blackChicken').animate({
            backgroundPosition: (screenWidth-(imageWidth/2))-100+'px 100%'
          }, 3000);

          // Cool, lets prevent them from jumping, we need to tell Spritely their new positions
          $._spritely.instances['board']['l'] = screenWidth-(imageWidth/2);
          $._spritely.instances['b1']['l'] = screenWidth-(imageWidth/2);
          $._spritely.instances['blackChicken']['l'] = (screenWidth-(imageWidth/2))-100;
        }
      }
    }

    // Save dragMe's previous position so we know if were going left or right
    lastPos = $('#dragMe').position().left;

    // Lets create the movement for all the sprites
    $('#clouds').pan({
      fps: 30,
      speed: 0.7,
      dir: 'left',
      depth: 10
    });
    $('#hill2').pan({
      fps: 30,
      speed: 1,
      dir: 'left',
      depth: 30
    });
    $('#hill1').pan({
      fps: 30,
      speed: 2,
      dir: 'left',
      depth: 70
    });
    $('#board').pan({
      fps: 30,
      speed: 2,
      dir: 'left',
      depth: 65,
      loop: true,
      loopPauseWidth: 1,
      bgImgWidth: 960
    });
    $('#b1').pan({
      fps: 30,
      speed: 2,
      dir: 'left',
      depth: 65,
      loop: true,
      loopPauseWidth: 1,
      bgImgWidth: 960
    });
    $('#blackChicken').pan({
      fps: 30,
      speed: 2,
      dir: 'left',
      depth: 65
    });

    // Get the screen middle, then get the image middle and then set the image position to it.
    $._spritely.instances['board']['l'] = screenWidth-(imageWidth/2);
    $._spritely.instances['b1']['l'] = screenWidth-(imageWidth/2);
    $._spritely.instances['blackChicken']['l'] = 400;

    // Lets stop movement of some things, were not moving just yet.
    $('#hill1, #hill2, #board, #b1, #blackChicken').spStop();

    $('#dragMe').fadeOut('slow');
    $('#dragMe').fadeIn('slow');
    $('#dragMe').fadeOut('slow');
    $('#dragMe').fadeIn('slow');
    $('#dragMe').fadeOut('slow');
    $('#dragMe').fadeIn('slow');
    
    var speed = 10;
    $('#dragMe').sprite({
      fps: 1,
      no_of_frames: 1
    });
    $('#dragMe').draggable({
      axis: "x",
      containment: "parent"
    });
    $('#dragMe').isDraggable({
      start: function() {
        // Fade sprite out when at the start of the drag
        $('#dragMeText').fadeTo('fast', 0);

        // It's too easy to highlight stuff while dragging the mouse, better stop this from happening
        $('body').css('-webkit-user-select', 'none');
        $('body').css('-khtml-user-select', 'none');
        $('body').css('-moz-user-select', 'none');
        $('body').css('-o-user-select', 'none');
        $('body').css('user-select', 'none');
      },
      stop: function() {
        // The user has stopped dragging, lets reset the board so its in the centre
        resetBoardPos();

        // Now they stopped dragging, lets let them highlight stuff again
        $('body').css('-webkit-user-select', 'text');
        $('body').css('-khtml-user-select', 'text');
        $('body').css('-moz-user-select', 'text');
        $('body').css('-o-user-select', 'text');
        $('body').css('user-select', 'text');
      },
      drag: function() {
        // Lets set position to dragMe's position
        position = $('#dragMe').position();

        // If dragMe's left position is less than the centre of the screen (take 50px)
        if (position.left < screenWidth-50) {
          $('#dragMe').css('opacity', '0.75');
          // Lets start the movement!
          $('#hill1, #hill2, #board, #b1, #blackChicken').spStart();
          // Better send them the right way too
          $('#hill1, #hill2, #board, #b1, #dragMe, #clouds, #blackChicken').spChangeDir('right');
          // If the current position is more than the previous, speed them up a bit.
          if (lastPos > position.left) {
            $('#dragMe').spState(2);
            speed = speed + 1;
          }  // Otherwise, we can slow them down
          else if (lastPos < position.left) {
            $('#dragMe').spState(1);
            speed = speed - 1;
          }
        }

        // Same as last but switched around, right to left, slow to fast. blah blah blah
        if (position.left > screenWidth+50) {
          $('#dragMe').css('opacity', '0.75');
          $('#hill1, #hill2, #board, #b1, #blackChicken').spStart();
          $('#hill1, #hill2, #board, #b1, #clouds, #blackChicken').spChangeDir('left');
          if (lastPos < position.left) {
            $('#dragMe').spState(1);
            speed = speed + 1;
          } else if (lastPos > position.left) {
            $('#dragMe').spState(2);
            speed = speed - 1;
          }
        }
        // if the mouse is in the centre
        if (position.left > screenWidth-50 && position.left < screenWidth+50 ) {
          $('#dragMe').css('opacity', '1');
          // Reset the speed
          speed = 0;
          // Stop the movement (but not the clouds, you see; clouds always move even if a chicken doesnt)
          $('#hill1, #hill2, #board, #b1, #blackChicken').spStop();
          // Turn the clouds back to going left, it'd be weird if they kept going a different way just because the user moved a different way.
          $('#clouds').spChangeDir('left');
        }
        // Cant be letting the speed be less than 0, Thats practically time travel!
        if (speed < 0) {
          speed = 0 - speed;
        }
        // Lets move the speed to the relevent speed of the user
        $('#hill1, #hill2, #board, #b1, #clouds, #blackChicken').spRelSpeed(speed);
        lastPos = position.left;
        // This event will fire constantly whilst the object is being dragged
      }
    })
    .activeOnClick()
    .active();
  });
})(jQuery);