var models;
var repeater;
var images = [];
var list = [];

$(document).ready(function() {

  // These events trigger the Pick Me! boxes moving up and down

  $('#promo-c-1').mouseenter(function(){
    $("#link-1").animate({bottom: 6}, "slow", "easeOutCubic");
  }).mouseleave(function() {
    $("#link-1").animate({bottom: -22}, "fast", "easeInCirc");
  });

  $('#promo-c-2').mouseenter(function(){
    $("#link-2").animate({bottom: 6}, "slow", "easeOutCubic");
  }).mouseleave(function() {
    $("#link-2").animate({bottom: -22}, "fast", "easeInCirc");
  });
  
  $('#promo-c-3').mouseenter(function(){
    $("#link-3").animate({bottom: 6}, "slow", "easeOutCubic");
  }).mouseleave(function() {
    $("#link-3").animate({bottom: -22}, "fast", "easeInCirc");
  });

  $('#promo-c-4').mouseenter(function(){
    $("#link-4").animate({bottom: 6}, "slow", "easeOutCubic");
  }).mouseleave(function() {
    $("#link-4").animate({bottom: -22}, "fast", "easeInCirc");
  });

  $('.pick').mouseenter(function(){
    $(this).css('background-image', 'url(/images/buttons/order_now_blue_button.png)');
  }).mouseleave(function() {
    $(this).css('background-image', 'url(/images/buttons/order_now_button.png)');
  });


  // Get the list of all models from the server then call the function to load 4 images

  $.get("/model_images", '', function(json) { loadImages(json); }, "text");

  // Load the initial 4 random & unique images into the header 

  function loadImages(json) {
    models = $.secureEvalJSON(json);
    random_model = 0;
    
    for(var i = 1; i<5; i++) { // Loop through the 4 image positions    
      success = true;
      
      while(success) { // Loop until we pick a model that is not already displayed
        found = false;
        random_model = Math.floor(Math.random() * models.length);
        
        for(var j = 1; j<5; j++) {
          if(list[j] && list[j].id == models[random_model].id) {
            found = true;
          }
        }
        
        if(!found || models.length < 5) {
          list[i] = models[random_model];
          success = false;
        }
      }
      
      image_path = '/uploads/models/' + list[i].id +'/half_shot/small/' + list[i].img;
      //order_link = '/order/framing/' + list[i].id;
      order_link = '/demo/' + list[i].id;
      
      $('#promo-' + i).hide(); // Hide the existing images so we can fade them in
      
      images[i] = new Image;
      images[i].name = order_link;
      images[i].id = i;
      
      images[i].onload = function() {           // When the image has preloaded, show the image
        if($.browser.msie && $.browser.version == '6.0') {
          $('#promo-' + this.id).css('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='crop'")
          $('#promo-' + this.id).css('margin-left', (130 - this.width) / 2)
        } else {
          $('#promo-' + this.id).css('background', "#ffffff url(" + this.src + ") bottom center no-repeat"); // Set the image for our chosen model
        }

        $('#promo-c-' + this.id + ' a').attr('href', this.name); // Set the url for our chosen model
        $('#promo-' + this.id).fadeIn("slow");
      };
      
      images[i].src = image_path; // Preload the image

    }
    
    repeater = jQuery.timer(8000, function(timer) { swapImage(); }); // Set up a timer to load a random image every 8000 milliseconds
  }

  // Swap out an existing image for a new random & unique image

  function swapImage() {
    random_position = Math.floor(Math.random() * 4) + 1;
    random_model = 0;
    success = true;

    while(success) {
      found = false;
      random_model = Math.floor(Math.random() * models.length);
      
      for(var j = 1; j<5; j++) {
        if(list[j].id == models[random_model].id) {
          found = true;
        }
      }
      
      if(!found || models.length < 5) {
        list[random_position] = models[random_model];
        success = false;
      }
    }

    image_path = '/uploads/models/' + list[random_position].id +'/half_shot/small/' + list[random_position].img;
    //order_link = '/order/framing/' + list[random_position].id;
    order_link = '/demo/' + list[random_position].id;
    
    $('#promo-c-' + random_position + ' a').attr('href', order_link);
    
    $('#promo-' + random_position).fadeOut("slow", function() {
      images[random_position] = new Image;
      images[random_position].name = order_link;
      images[random_position].id = random_position;
      
      images[random_position].onload = function() {           // When the image has preloaded, show the image
        if($.browser.msie && $.browser.version == '6.0') {
          $('#promo-' + this.id).css('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='crop'")
          $('#promo-' + this.id).css('margin-left', (130 - this.width) / 2)
        } else {
          $('#promo-' + this.id).css('background', "#ffffff url(" + this.src + ") bottom center no-repeat"); // Set the image for our chosen model
        }

        $('#promo-c-' + this.id + ' a').attr('href', this.name); // Set the url for our chosen model
        $('#promo-' + this.id).fadeIn("slow");
      };
      
      images[random_position].src = image_path;

    });    
    
  }

});