/// <reference path="JQueryIntellisense.js" />

$(document).ready(function() {

  $("#content").prepend('<div id="homePictureSpinner"><strong>Loading Picture...</strong><img src="Content/images/spinner.gif" alt="..." /><em>Please wait</em></div><div id="homePictureExpand"><a href="javascript:void(null);"><strong><em>Close</em></strong></a></div><div id="homeAboutExpand"><h2><em>About Us</em></h2><a href="javascript:void(null);"><strong><em>Close</em></strong></a><div id="homeAboutBox"><div id="homeAboutText"></div></div></div>');
  $("#homeAboutText").load("../../AboutUs.htm");


  var expand = $("#homePictureExpand");
  var expandClose = expand.children("a");
  var spinner = $("#homePictureSpinner");

  var aboutExpand = $("#homeAboutExpand");


  expand.fadeTo(0, 0);
  spinner.fadeTo(0, 0);

  var spinnerVisible = false;
  var largeVisible = false;

  $("#homePictures a").hover(
    function() { $("#homePictures a").not(this).stop().fadeTo(200, 0.3); },
    function() { $("#homePictures a").not(this).stop().fadeTo(200, 1); }
  );

  var aboutShow = function() {
    aboutExpand.stop().fadeTo(0, 0,
      function() { aboutExpand.center().css("display", "block").fadeTo(300, 1, function() { aboutExpand.removeFilter(); }); }
    );
  };
  var aboutHide = function() {
    aboutExpand.stop().fadeTo(300, 0, function() { aboutExpand.css("display", "none"); });
  };


  var spinnerShow = function() {
    spinner.stop().fadeTo(0, 0,
      function() { spinner.center().css("display", "block").fadeTo(300, 1); spinnerVisible = true; }
    );
  };
  var spinnerHide = function() {
    spinnerVisible = false;
    spinner.stop().fadeTo(300, 0, function() { spinner.css("display", "none"); });
  };

  var largeShow = function(url) {
    spinnerShow();
    largeHide();
    var image = new Image();
    $(image).load(
      function() {
        expandClose.children("img").remove();
        expandClose.append(image);
        expand.center();
        spinnerHide();
        expand.stop().css("display", "block").fadeTo(300, 1);
        largeVisible = true;
      }
    );
    image.src = url;
  };

  var largeHide = function() {
    largeVisible = false;
    expand.stop().fadeTo(200, 0, function() { expand.css("display", "none"); });
  }
  var centerAll = function() {
    expand.center();
    spinner.center();
    aboutExpand.center();
  }

  $("#homePictures a").click(
    function(e) {
      e.preventDefault();
      largeShow($(this).attr("href"));
    }
  );

  expandClose.click(function() { largeHide(); });

  $("#homeAboutButton").click(
    function(e) { e.preventDefault(); spinnerHide(); largeHide(); aboutShow(); }
  );

  $("#homeAboutExpand a").click(
    function(e) { e.preventDefault(); aboutHide(); }
  );


  $(window).resize(function() { centerAll(); if (largeVisible == false) { expand.css("display", "none"); } });
  $(window).scroll(function() { spinnerHide(); largeHide(); if (spinnerVisible == false) { spinner.css("display", "none"); } });

});