var aImageCache = [
  "http://static.jawstats.com/images/header/search_go_on.gif",
  "http://static.jawstats.com/images/header/search_bg_on.gif",
];
var bSearchFocus = false;

$(document).ready(function() {
  // image cache
  $.CacheImage(aImageCache.join(","));
  // $.CacheImage.Audit();

  // search box
  $("#search input").blur(function() {
    bSearchFocus = false;
    Search(false);
  });
  $("#search input").focus(function() {
    bSearchFocus = true;
    Search(true);
  });
  $("#search input").mouseover(function() {
    $("#search").css("backgroundImage", "url(http://static.jawstats.com/images/header/search_bg_on.gif)");
    $("#search input").css("background", "#ffffff");
  });
  $("#search input").mouseout(function() {
    if (bSearchFocus != true) {
      Search(false);
    }
  });
});

function Search(bActive) {
  if (bActive == true) {
    $("#search").css("backgroundImage", "url(http://static.jawstats.com/images/header/search_bg_on.gif)");
    $("#search input").css("background", "#ffffff").val("");
  } else {
    $("#search").css("backgroundImage", "url(http://static.jawstats.com/images/header/search_bg_off.gif)");
    $("#search input").css("background", "#71716c");
    if ($.trim($("#search input").val()) == "") {
      $("#search input").val("Search...");
    }
  }
}

// Image Caching plugin
(function($) {
  var aImage = [];

  // add an image to the cache
  $.CacheImage = function(sFilenames) {
    var aFilename = sFilenames.split(",");
    $.each(aFilename, function() {
      aImage.push(new Image());
      aImage[aImage.length - 1].src = $.trim(this);
    });
  }

  // debugging tool (i.e. check the correct image urls have been passed)
  $.CacheImage.Audit = function() {
    var sStyle, sDimensions, iLoadedCount = 0;
    var aAuditHTML = [ "<table style=\"margin: 20px auto;\">" ];
    var sStylePass = " style=\"background: #fff; border: 1px solid #999; color: #000; padding: 6px; vertical-align: middle;\"";
    var sStyleFail = " style=\"background: #ff0; border: 1px solid #999; color: #f00; padding: 6px; vertical-align: middle; font-weight: bold; \"";

		// loop through each image, creating the audit html
    $.each(aImage, function(iIndex) {
			// set style
      if (this.width > 0) {
        iLoadedCount++;
        sStyle = sStylePass;
        sDimensions = (this.width + " x " + this.height);
      } else {
        sStyle = sStyleFail;
        sDimensions = "n/a";
      }

			// add table row
      aAuditHTML.push("<tr>" +
                      "<td" + sStyle + " align=\"center\">" + (iIndex + 1) + "</td>" +
                      "<td" + sStyle + ">" + this.src + "</td>" +
                      "<td" + sStyle + "><img src=\"" + this.src + "\" height=\"40\" width=\"40\" /></td>" +
                      "<td" + sStyle + " align=\"center\">" + sDimensions + "</td>" +
                      "</tr>");
    });

		// write html
    aAuditHTML.push("<tr><td" + ((iLoadedCount == aImage.length) ? sStylePass : sStyleFail) + " align=\"center\" colspan=\"4\">" +
										iLoadedCount + " of " + aImage.length + " image" + ((aImage.length == 1) ? "" : "s") + " loaded successfully.</td></tr></table>");
    $("body").css({ background:"#ddd"}).html(aAuditHTML.join(""));

		// apply onload event to each image
    $.each(aImage, function() {
      $(this).load(function() {
        var iLoadedCount = 0;
        var sImageURL = this.src;
        $("table tr").each(function() {
          if ($(this).find("img").attr("src") == sImageURL) {
            $(this).find("td").css({ backgroundColor:"#fff", color:"#000", fontWeight:"normal" });
          }
          if ($(this).find("td:eq(0)").css("fontWeight") == "normal") {
            iLoadedCount++;
          }
        });
        if (iLoadedCount == aImage.length) {
          $("table tr:last td").css({ backgroundColor:"white", color:"#000", fontWeight:"normal" })
            .text(iLoadedCount + " of " + aImage.length + " images loaded successfully.");
        } else {
          $("table tr:last td").text(iLoadedCount + " of " + aImage.length + " images loaded successfully.");
        }
      });
    });
  }
})(jQuery);