$(document).ready(function() {
  //loadImages();
  //scrollImage();
})

function loadImages() {
  var container = $('.sliderContainer');
  var slider = $('.slider');
  slider.hide();
 // $('<img class="loading" class="loadingImage" src="/images/loading.gif" alt="Loading"/ style=\"margin:150px 420px\">').appendTo(container);
  var interval = setInterval(function() {
    var completed = 0;
    var images = container.find('img.logo');
    images.each(function() {
      if ($(this).attr('complete'));
      completed++;
    });
    if (completed == images.length) {
      alert(completed);
      //alert($('.sliderContainer img:first').attr('complete'));
      clearInterval(interval);
      //$('.loadingImage').hide();
      slider.css('display', 'block');
      scrollImage();
    }
  }, 5000)
}

function scrollImage() {
  var container = $('.sliderContainer');
  var slider = $('.slider');
  var left = container.offset().left;
  var right = left + container.width();
  sliderWidth = slider.width();
  containerWidth = container.width();
  var offset;

  var ratio = (sliderWidth - containerWidth) / containerWidth;

  $(document).mousemove(function(e) {
    if (e.pageX >= left && e.pageX <= right)
      offset = (e.pageX - left) * ratio;
    else if (e.pageX < left)
      offset = 0;
    else
      offset = sliderWidth;
    container.scrollLeft(offset);
  });
}


$(window).load(function() {

  var container = $('.sliderContainer');
  var slider = $('.slider');
  var left = container.offset().left;
  var right = left + container.width();
  sliderWidth = slider.width();
  containerWidth = container.width();
  var offset;
  var ratio = (sliderWidth - containerWidth) / containerWidth;
  $(document).mousemove(function(e) {
    if (e.pageX >= left && e.pageX <= right)
      offset = (e.pageX - left) * ratio;
    else if (e.pageX < left)
      offset = 0;
    else
      offset = sliderWidth;
    container.scrollLeft(offset);
  });
})