$(document).ready(function(){

     // array of objects for each page item
     window.itemArray = new Array;

     // hide the registered itesm
     $(".registered").css("visibility", "hidden");


     // figure out the window size and adjust
     applySizing();
     $(window).bind("resize", applySizing);


     // register all the page items
     $(".registered").each(function() {
          registerItem("#" + $(this).attr("id"));
     });


     // start on page 1
     showPage(1);

     // bind the clicks for the the navigation
     $("#others-said").bind("click", showNextPage);
     $("#more-quotes").bind("click", showNextPage);
     $("#outofhere").bind("click", showNextPage);

     $("#logo").bind("click", function() {
          if (window.currPage != 1) {
               showPage(1);
          }
     });


     // hover animation for the pocket
     $("#pocket").hover(function() {
          $(this).animate({
               height: "110px"
          }, 450, "easeOutQuint");
     }, function() {
          $(this).animate({
               height: "100px"
          }, 450, "easeOutQuint");
     });


     // hover animation for the logo
     $("#logo").hover(function() {
          $(this).animate({
               top: "0px"
          }, 450, "easeOutQuint");
     }, function() {
          $(this).animate({
               top: "-5px"
          }, 450, "easeOutQuint");
     });
     

});



function applySizing() {
     $("#wrapper").css("height", $(window).height() + "px");
}


function registerItem(domRef) {
     // if this item exists in the DOM
     if ($(domRef).length) {
          var itemObj = new Object;
          var fixedLeft = parseFloat($(domRef).css("left"));
          var fixedRight = parseFloat($(domRef).css("right"));
          var fixedTop = parseFloat($(domRef).css("top"));
          var fixedBottom = parseFloat($(domRef).css("bottom"));

          var windowWidth = $(window).width();
          var windowHeight = $(window).height();

          // calculate the percentages
          var percentLeft = Math.round((fixedLeft / windowWidth) * 100);
          var percentRight = Math.round((fixedRight / windowWidth) * 100);
          var percentTop = Math.round((fixedTop / windowHeight) * 100);
          var percentBottom = Math.round((fixedBottom / windowHeight) * 100);

          // figure out which page it's on
          var pageDomRef = "#";
          if ($(domRef).closest(".page").length) {
               pageDomRef += $(domRef).closest(".page").attr("id");
          } else {
               pageDomRef = "body";
          }

          // build the object
          itemObj.domRef = domRef;
          itemObj.pageDomRef = pageDomRef;
          itemObj.myLeft = percentLeft + "%";
          itemObj.myRight = percentRight + "%";
          itemObj.myTop = percentTop + "%";
          itemObj.myBottom = percentBottom + "%";

          // stick it in the array
          window.itemArray.push(itemObj);

          // prepare it to be animated
          $(domRef).css("opacity", "0");
          $(domRef).css("visibility", "visible");
     }
}


// find the index of an ID in the array
function getIndex(theID) {
     var j = 0;
     for (j=0; j<window.itemArray.length; j++) {
          if (window.itemArray[j].domRef == "#" + theID) {
               return(j);
          }
     }
     
     // couldn't find it
     return(-1);
}


// show a give page
function showPage(thePage) {
     var nextPage = "#page-" + thePage;
     var mySpeed = 1000;


     // hide the visible itesm
     $(".registered:visible").animate({
          opacity: 0
     }, 500, function() {
          // move out of view
          if ($(this).hasClass("left")) {
               $(this).css("left", "100%");
          } else if ($(this).hasClass("right")) {
               $(this).css("right", "-100%");
          }
     });


     // prepare the next page items to animage in
     $(nextPage + " .registered").each(function() {
          if ($(this).hasClass("left")) {
               $(this).css("left", "100%");
          } else if ($(this).hasClass("right")) {
               $(this).css("right", "-100%");
          }
     });


     // look through each item on the next page
     // animate each item in
     $(nextPage + " .registered").each(function() {
          var i = getIndex($(this).attr("id"));
          
          if (i>=0) {
               if ($(this).hasClass("left")) {
                    $(this).animate({
                         left: window.itemArray[i].myLeft,
                         opacity: 1
                    }, mySpeed, 'easeOutQuint');
               } else if ($(this).hasClass("right")) {
                    $(this).animate({
                         right: window.itemArray[i].myRight,
                         opacity: 1
                    }, mySpeed, 'easeOutQuint');
               }
          }
          
          mySpeed += 200;
     });

     // update the current page
     window.currPage = thePage;
}



// show the next page
function showNextPage() {
     var nextPage = window.currPage + 1;
     var numPages = $(".page").length;

     if (nextPage > numPages) {
          nextPage = 1;
     }
     
     showPage(nextPage);
}


// re-show the page when someone with an iPhone or iPad changes orientation
window.onorientationchange = function() {
     showPage(window.currPage);
}