$(document).ready(function(){

  $(".deftitle").hide();
  $("#pgtitle").hide();
  $(".subcontent").hide();
  var curOpen = 0;
  var pos1 = "6px";
  var pos2 = "131px";
  var pos3 = "256px";
  
  $("#sn1").mouseover(function(){
      $("#onebit").attr("src","images/sn1.png");
    }).mouseout(function(){
      $("#onebit").attr("src","images/onebit.gif");
    });
    
  $("#sn2").mouseover(function(){
      $("#onebit").attr("src","images/sn2.png");
    }).mouseout(function(){
      $("#onebit").attr("src","images/onebit.gif");
    });
    
  $("#sn3").mouseover(function(){
      $("#onebit").attr("src","images/sn3.png");
    }).mouseout(function(){
      $("#onebit").attr("src","images/onebit.gif");
    });



  function fadeOthersOut(desBox) {
     for(var i=0; i<5; i++) {
       if((i+1) != desBox) {
         var thisID = "#bx"+(i+1);
         $(thisID).fadeOut("slow");
       }
     }

  }

  // to go home
  function fadeOthersInH(chosen) {
     $("#pgtitle").fadeOut("slow");
     for(var i=0; i<5; i++) {
       if((i+1) != chosen) {
         var thisID = "#bx"+(i+1);
         $(thisID).fadeIn("slow");
       }
     }
  }

  // when a page is open
  function fadeOthersIn(chosen) {

    // fade all boxes in fade out all except 'chosen' on callback
    for(var i=0; i<5; i++) {
       if((i+1) != curOpen) {
         var thisID = "#bx"+(i+1);
         $(thisID).fadeIn("slow", function(){fadeOthersOut(chosen);});
       }
     }

     var boxID = "#bx"+chosen;
     var pagetitle = "";

     switch(chosen) {
       case 1: pagetitle = "About Me"; break;
       case 2: pagetitle = "Follow Me"; break;
       case 3: pagetitle = "Contact Me"; break;
       default: break;
     }
     
     // move chosen to the right and fade in page header on callback
     $(boxID).animate( { left: "506px" }, 1500, function(){$("#pgtitle").html(pagetitle).fadeIn("slow");});
     
     curOpen = chosen;

  }


  function putEmBack() {
    switch(curOpen) {

      case 1:   // about is open
        $("#bx1").animate( { left: pos1 }, 1500, function(){fadeOthersIn(1);});
        curOpen = 0;
      break;

      case 2:  // follow is open
        $("#bx2").animate( { left: pos2 }, 1500, function(){fadeOthersIn(2);});
        curOpen = 0;
      break;

      case 3:  // contact is open
        $("#bx3").animate( { left: pos3 }, 1500, function(){fadeOthersIn(3);});
        curOpen = 0;
      break;

      default: break;
      
    }
  }

  // reset to the homepage
  function putEmBackH() {
    switch(curOpen) {

      case 1:
        $("#bx1").animate( { left: pos1 }, 1500, function(){fadeOthersInH(1);});
        $("#about").fadeOut(444, function(){$("#home").fadeIn("slow");});
        curOpen = 0;
      break;

      case 2:
        $("#bx2").animate( { left: pos2 }, 1500, function(){fadeOthersInH(2);});
        $("#follow").fadeOut(444, function(){$("#home").fadeIn("slow");});
        curOpen = 0;
      break;

      case 3:
        $("#bx3").animate( { left: pos3 }, 1500, function(){fadeOthersInH(3);});
        $("#contact").fadeOut(444, function(){$("#home").fadeIn("slow");});
        curOpen = 0;
      break;

      default: break;
      
    }
  }
  
  $(".home").click(function(){
     $("#pgtitle").fadeOut("slow");
     putEmBackH();
     return false;
  });


  
  $(".t1").click(function(){

     if(curOpen > 0) {  // if there is an active box

       var thisBox = 1;

       if(curOpen != thisBox) {
       
         $("#pgtitle").fadeOut("slow");
       
         var openID = "#bx"+curOpen;
         if(curOpen == 2) {
           var topos = pos2; var tohide = "#follow";
         } else {
           var topos = pos3; var tohide = "#contact";
         }
         
         // move the open box back into place, then animate the other boxes
         $(openID).animate( { left: topos }, 1500, function(){fadeOthersIn(thisBox);});
         
         // handle the content and page header in box animation area
         $(tohide).fadeOut(444, function(){$("#about").fadeIn("slow");});

       }

     } else {

       fadeOthersOut(1);
       $("#bx1").animate( { left: "506px" }, 1500)
       $("#home").fadeOut("slow", function(){$("#about").fadeIn("slow"); $("#pgtitle").html("About Me").fadeIn("slow"); });
       curOpen = 1;
       
     }
     return false;

  });


  $(".t2").click(function(){

     if(curOpen > 0) {

       var thisBox = 2;
       
       if(curOpen != thisBox) {
       
         $("#pgtitle").fadeOut("slow");

         var openID = "#bx"+curOpen;
         if(curOpen == 1) { 
           var topos = pos1; var tohide = "#about";
         } else { 
           var topos = pos3; var tohide = "#contact";
         }
         $(openID).animate( { left: topos }, 1500, function(){fadeOthersIn(thisBox);});
         $(tohide).fadeOut(444, function(){$("#follow").fadeIn("slow"); });
        
       }

     } else {

       fadeOthersOut(2);
       $("#bx2").animate( { left: "506px" }, 1500);
       $("#home").fadeOut("slow", function(){$("#follow").fadeIn("slow"); $("#pgtitle").html("Follow Me").fadeIn("slow"); });
       curOpen = 2

     }
     return false;

  });
  
  $(".t3").click(function(){

     if(curOpen > 0) {
     
       var thisBox = 3;

       if(curOpen != thisBox) {
       
         $("#pgtitle").fadeOut("slow");

         var openID = "#bx"+curOpen;
         if(curOpen == 2) { 
           var topos = pos2;
           var tohide = "#follow";
         } else { 
           var topos = pos1; 
           var tohide = "#about";
         }
         $(openID).animate( { left: topos }, 1500, function(){fadeOthersIn(thisBox);});
         $(tohide).fadeOut(444, function(){$("#contact").fadeIn("slow"); });
        
       }

     } else {

       fadeOthersOut(3);
       $("#bx3").animate( { left: "506px" }, 1500);
       $("#home").fadeOut("slow", function(){$("#contact").fadeIn("slow"); $("#pgtitle").html("Contact Me").fadeIn("slow"); });
       curOpen = 3;

     }
     return false;

  });


});