// JavaScript Document
$(function () {
  var imageloc = 'http://www.qualitelecom.co.uk/wp-content/themes/Qualitel/images/';
  $.preloadImages(imageloc+"box_1.gif", imageloc+"box_2.gif",imageloc+"box_3.gif",imageloc+"box_4.gif",imageloc+"box_5.gif");
  
  var imgSrc = 1;
  $(".menu-mid li a").each(function(){
    var img = $('> img', this);
    img.css('opacity',0);
    img.attr('src','http://www.qualitelecom.co.uk/wp-content/themes/Qualitel/images/nav_mid-on'+imgSrc+'.gif');
    imgSrc++;
  });
});


$(function() {

  $('.boxes li').hover(function() {
    // on hovering over find the element we want to fade *up*
    var fade = $('> div', this); // This is the image element
    var redbox = $(this).attr('class');
    redbox = redbox.substr(3,1);
    redbox = $('.img'+redbox+' img'); // This is the icon element
    // if the element is currently being animated (to fadeOut)...
    if (fade.is(':animated') || redbox.is(':animated')) {
      // ...stop the current animation, and fade it to 1 from current position
      fade.stop().fadeTo(250, 1);
      redbox.stop().animate({opacity: 1}, 250);
    } else {
      fade.fadeIn(250);
      redbox.animate({opacity: 1.0}, 250);
    }
  }, function () {
    var fade = $('> div', this);
    var redbox = $(this).attr('class');
    redbox = redbox.substr(3,1);
    redbox = $('.img'+redbox+' img');
    if (fade.is(':animated') || redbox.is(':animated')) {
      fade.stop().fadeTo(250, 0);
      redbox.stop().animate({opacity: 0}, 250);
    } else {
      fade.fadeOut(250);
      redbox.animate({opacity: 0}, 250);
    }
  });
  
  $('.menu-mid li').hover(function() {
    // on hovering over find the element we want to fade *up*
    var fade = $('>a img', this); // This is the icon
    var strapbox = $(this).attr('class');
    strapbox = strapbox.substr(3,1);
    strapbox = $('.box'+strapbox+' div'); // This is the image box
    
    if (fade.is(':animated') || strapbox.is(':animated')) {
      fade.stop().animate({opacity: 1}, 250);
      strapbox.stop().fadeTo(250, 1);
    } else {
      fade.animate({opacity: 1}, 250);
      strapbox.fadeIn(250);
    }
  }, function () {
    var fade = $('>a img', this);
    var strapbox = $(this).attr('class');
    strapbox = strapbox.substr(3,1);
    strapbox = $('.box'+strapbox+' div');
    if (fade.is(':animated') || strapbox.is(':animated')) {
      fade.stop().animate({opacity: 0}, 250);
      strapbox.stop().fadeTo(250, 0);
    } else {
      fade.animate({opacity: 0}, 250);
      strapbox.fadeOut(250);
    }
  });
  
});