$(window).resize(function(){
  makeup();
});

$( window.location ).bind(
 "change",
 function( objEvent, objData ){
   if (window.location.hash == "#examples") {
     navigate("step-2","lnk-2",0);
   }
   if (window.location.hash == "#thingies") {
     navigate("step-3","lnk-3",0);
   }
   if (window.location.hash == "#clients") {
     navigate("step-4","lnk-4",0);
   }
   if (window.location.hash == "#contacts") {
     navigate("step-5","lnk-5",0);
   }
   
 }
);

$(window).scroll(function(){
  
  changeHash();
    
});

$(document).ready(function(){
  
  $("input").focus(function(){
    $(this).css("color","#000").attr("value","");
  });
  
  $("textarea").focus(function(){
    $(this).css("color","#000").attr("value","");
  });
  
  $("#tint").click(function(){
      if ($("#team-gallery").css("display") == "block") {
        closeTeam();
      }
      
      if ($("#examples-1-gallery").css("display") == "block") {
        closeExamples1();
      }
      
      if ($("#examples-2-gallery").css("display") == "block") {
        closeExamples2();
      }
      
      if ($("#examples-3-gallery").css("display") == "block") {
        closeExamples3();
      }
      
      if ($("#examples-4-gallery").css("display") == "block") {
        closeExamples4();
      }
      
      if ($("#feedback-gallery").css("display") == "block") {
        closeForm();
      }
  });
  
  $(document).keydown(function(e){
    if (e == null) { // ie
      keycode = event.keyCode;
    } else { // mozilla
      keycode = e.which;
    }
    
    if(keycode == 27){ // escape, close box
      
      if ($("#team-gallery").css("display") == "block") {
        closeTeam();
      }
      
      if ($("#examples-1-gallery").css("display") == "block") {
        closeExamples1();
      }
      
      if ($("#examples-2-gallery").css("display") == "block") {
        closeExamples2();
      }
      
      if ($("#examples-3-gallery").css("display") == "block") {
        closeExamples3();
      }
      
      if ($("#examples-4-gallery").css("display") == "block") {
        closeExamples4();
      }
      
      if ($("#feedback-gallery").css("display") == "block") {
        closeForm();
      }
      
    }
    
  });
  
  
  var stepsWidth = 0;
  
  $(".step").each(function(i){
    stepsWidth = stepsWidth + $(this).width();
  });
  
  $(".steps-wrapper").css("width",stepsWidth + "px");
  
  $("body").css("width",$(document).width() + "px");
  
  var pageUrl = location.href;
  
  var urlArray = pageUrl.split("#");
  
  var anchor = urlArray[1];
  
  if (anchor && anchor!="examples" && anchor!="thingies" && anchor!="clients" && anchor != "contacts") {
    var gallery = $(".slide[anchor='" + anchor + "']").parents(".gallery");
    var galId = gallery.attr("id");
    var slideIndex = $(".slide[anchor='" + anchor + "']").attr("slideindex");
    galleryControls(galId,slideIndex);
    if (galId.indexOf("team-gallery") >= 0) {
      openTeam();
    }
    if (galId.indexOf("examples-1-gallery") >= 0) {
      openExamples1();
    }
    if (galId.indexOf("examples-2-gallery") >= 0) {
      openExamples2();
    }
    if (galId.indexOf("examples-3-gallery") >= 0) {
      openExamples3();
    }
    if (galId.indexOf("examples-4-gallery") >= 0) {
      openExamples4();
    }
  }
  
  
  if (anchor=="examples") {
    navigate("step-2","lnk-2",1);
  }
  
  if (anchor=="thingies") {
    navigate("step-3","lnk-3",1);
  }
  
  if (anchor=="clients") {
    navigate("step-4","lnk-4",1);
  }
  
  if (anchor=="contacts") {
    navigate("step-5","lnk-5",1);
  }
  
  $("#step-1 .close").click(function(){
    closeTeam();
  });
  
  $("#s-col-1 .close").click(function(){
    closeExamples1();
  });
  
  $("#s-col-2 .close").click(function(){
    closeExamples2();
  });
  
  $("#s-col-3 .close").click(function(){
    closeExamples3();
  });
  
  $("#step-3 .close").click(function(){
    closeExamples4();
  });
  
  $("#step-5 .close").click(function(){
    closeForm();
  });
  
  $(".team-button").click(function(){
    if ($("#step-1 .gallery").css("display") != "block") {
      galleryControls("team-gallery",1);
      openTeam();
      
    } else {
      
      closeTeam();
      
    }
  });
  
  $(".examples-1-button").click(function(){
    if ($("#examples-1-gallery").css("display") != "block") {
      galleryControls("examples-1-gallery",1);
      openExamples1();
      
    } else {
      closeExamples1();
    }
  });
  
  $(".examples-2-button").click(function(){
    if ($("#examples-2-gallery").css("display") != "block") {
      galleryControls("examples-2-gallery",1);
      openExamples2();
      
    } else {
      closeExamples2();
    }
  });
  
  $(".examples-3-button").click(function(){
    if ($("#examples-3-gallery").css("display") != "block") {
      galleryControls("examples-3-gallery",1);
      openExamples3();
      
    } else {
      closeExamples3();
    }
  });
  
  $(".examples-4-button").click(function(){
    if ($("#examples-4-gallery").css("display") != "block") {
      galleryControls("examples-4-gallery",1);
      openExamples4();
      
    } else {
      closeExamples4();
    }
  });
  
  makeup();
  
});

function pageTint() {
  
  var xScroll, yScroll;
  
  if (window.innerHeight && window.scrollMaxY) {
    xScroll = window.innerWidth + window.scrollMaxX;
    yScroll = window.innerHeight + window.scrollMaxY;
  } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
    xScroll = document.body.scrollWidth;
    yScroll = document.body.scrollHeight;
  } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
    xScroll = document.body.offsetWidth;
    yScroll = document.body.offsetHeight;
  }

  var windowWidth, windowHeight;

  if (self.innerHeight) {	// all except Explorer
    if(document.documentElement.clientWidth){
      windowWidth = document.documentElement.clientWidth;
    } else {
      windowWidth = self.innerWidth;
    }
    windowHeight = self.innerHeight;
  } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
    windowWidth = document.documentElement.clientWidth;
    windowHeight = document.documentElement.clientHeight;
    
  } else if (document.body) { // other Explorers
    windowWidth = document.body.clientWidth;
    windowHeight = document.body.clientHeight;
  }
  
  // for small pages with total height less then height of the viewport
  if(yScroll < windowHeight){
    pageHeight = windowHeight;
  } else {
    pageHeight = yScroll;
  }

  // for small pages with total width less then width of the viewport
  if(xScroll < windowWidth){
    pageWidth = xScroll;
  } else {
    pageWidth = windowWidth;
  }
  
  $("#tint").css("height", pageHeight - 20 + "px");
  $("#tint").css("width", $(document).width() + "px");
	if ($.browser.msie) {
    $("#tint").show();
  } else {
    $("#tint").fadeIn();
  }
}


function makeup() {
  $("#bottom-bg").css("top","0");
  if ($.browser.msie || $.browser.opera) {
    $("#bottom-bg").css("top",$(document).height() - 150 + "px");
  } else {
    $("#bottom-bg").css("top",$(document).height() - 128 + "px");
  }
  
}

function navigate(stepId,lnk,scrollBody) {
  
  if (!$("." + lnk).hasClass("act") && !$(".navigation").hasClass("moving")) {
    
    $(".nav-links li").removeClass("act").removeClass("lnk-2-act").removeClass("lnk-3-act").removeClass("lnk-4-act");
    
    $(".navigation").addClass("moving");
    
    $("." + lnk).addClass("act").addClass(lnk + "-act");
    
    var navDelta = $(".navigation li.act").offset().left - $(".navigation").offset().left;
    
    if (scrollBody) {
      $("html, body").animate({
        scrollLeft: $("#" + stepId).offset().left - 30 - navDelta
      }, 900);
      $(".navigation").animate({
        left: $("#" + stepId).offset().left + 10 - navDelta + "px"
      }, 1000, function(){$(".navigation").removeClass("moving");});
      
      $(".navigation .brd").animate({
          left: navDelta + "px"
      }, 1000);
    } else {
      $(".navigation").animate({
        left: $("#" + stepId).offset().left + 10 - navDelta + "px"
      }, 100, function(){
        $(".navigation").removeClass("moving");
      });
      
      $(".navigation .brd").animate({
          left: navDelta + "px"
      }, 100);
    }
    
    
  }
}

function moveNavigation(stepId,lnk) {
  if (!$(".navigation").hasClass("moving")) {
    
    /*if (!$(".gallery-toggler").hasClass("above")) {
      if (stepId == "step-2") {
        window.location.hash = "examples";
      }
      if (stepId == "step-3") {
        window.location.hash = "thingies";
      }
      if (stepId == "step-4") {
        window.location.hash = "clients";
      }
      if (stepId == "step-5") {
        window.location.hash = "contacts";
      }
    }*/
    
    $(".nav-links li").removeClass("act").removeClass("lnk-2-act").removeClass("lnk-3-act").removeClass("lnk-4-act");
    
    $("." + lnk).addClass("act").addClass(lnk + "-act");
    
    var navDelta = $(".navigation li.act").offset().left - $(".navigation").offset().left;
    
    
    
    $(".navigation").animate({
      left: $("#" + stepId).offset().left + 10 - navDelta + "px"
    }, 100, function(){$(".navigation").removeClass("moving")});
    
    $(".navigation .brd").animate({
        left: navDelta + "px"
    }, 100);
  }
}

function navigateHome() {
  if (!$(".navigation").hasClass("moving")) {
    
    window.location.hash = "home";
    
    $(".navigation").addClass("moving");
    
    $(".nav-links li").removeClass("act").removeClass("lnk-2-act").removeClass("lnk-3-act").removeClass("lnk-4-act");
    
    $(".lnk-2").addClass("act").addClass("lnk-2-act");
    
    var navDelta = $(".navigation li.act").offset().left - $(".navigation").offset().left;
    
    $("html, body").animate({
      scrollLeft: 0
    }, 900);
    
    $(".navigation").animate({
      left: $("#step-2").offset().left + 10 - navDelta + "px"
    }, 1000, function(){$(".navigation").removeClass("moving")});
    
    $(".navigation .brd").animate({
        left: navDelta + "px"
    }, 1000);
  }
}

function galleryControls(galId, slideNum) {
  
  var gallery = $("#" + galId);
  
  var curSlide = gallery.find(".slide[slideindex=" + slideNum + "]");
  
  window.location.hash = curSlide.attr("anchor");
  
  gallery.find(".slide").hide().removeClass("slide-act");
  curSlide.show().addClass("slide-act");
  
  gallery.find(".prev").hide();
  gallery.find(".next").hide();
  
  var gallerySize = gallery.find(".slide").size();
  if (slideNum < gallerySize) {
    gallery.find(".next").show();
  }
  
  if (slideNum > 1) {
    gallery.find(".prev").show();
  }
  
  gallery.find(".next").click(function(){
    if (parseInt(curSlide.attr("slideindex")) < gallerySize) {
      gallery.find(".prev").show();
      gallery.find(".next").show();
      gallery.find(".slide").fadeOut().removeClass("slide-act");
      curSlide = curSlide.next(".slide");
      curSlide.fadeIn().addClass("slide-act");
      window.location.hash = curSlide.attr("anchor");
      if (gallery.find(".slide-act").attr("slideindex") == gallerySize) {
        gallery.find(".next").hide();
      }
    }
  });
  
  gallery.find(".prev").click(function(){
    if (parseInt(curSlide.attr("slideindex")) > 1) {
      gallery.find(".next").show();
      gallery.find(".prev").show();
      gallery.find(".slide").fadeOut().removeClass("slide-act");
      curSlide = curSlide.prev(".slide");
      curSlide.fadeIn().addClass("slide-act");
      window.location.hash = curSlide.attr("anchor");
      if (gallery.find(".slide-act").attr("slideindex") == 1) {
        gallery.find(".prev").hide();
      }
    }
  });
  
}

function closeTeam() {
  $("#step-1 .gallery-toggler").removeClass("above");
  if ($.browser.msie && $.browser.version == "6.0") {
    $("#step-1 .gallery .prev").hide();
    $("#step-1 .gallery .next").hide();
  }
  $("#step-1 .gallery").fadeOut(function(){
    $("#step-1").animate({
      width: "334px"
    }, 500, function(){
      $(".steps-wrapper").css("width",$(".steps-wrapper").width() - 480 + "px");
      $("#step-1 .gallery-toggler img").attr("src","img/btn-team-off.png");
      if ($.browser.msie) {
        $("#tint").hide();
      } else {
        $("#tint").fadeOut();
      }
    });
    $(".navigation").animate({
      left: $(".navigation").offset().left - 450 + "px"
    }, 500);
  });
}

function closeExamples1() {
  $("#s-col-1 .gallery-toggler").removeClass("above");
  if ($.browser.msie && $.browser.version == "6.0") {
    $("#examples-1-gallery .gallery .prev").hide();
    $("#examples-1-gallery .gallery .next").hide();
  }
  $("#examples-1-gallery").fadeOut(function(){
    
    if (!$(".nav-links li.lnk-2").hasClass("act")) {
      $(".navigation").animate({
        left: $(".navigation").offset().left - 480 + "px"
      }, 500);
    }
    
    $("#s-col-1").animate({
      width: 160 + "px"
    }, 400);
    
    $("#step-2").animate({
      width: 632 + "px"
    }, 500, function(){
      $(".steps-wrapper").css("width",$(".steps-wrapper").width() - 480 + "px");
      $(".examples-1-button img").attr("src","img/btn-examples-green-off.png");
      if ($.browser.msie) {
        $("#tint").hide();
      } else {
        $("#tint").fadeOut();
      }
      $("#step-2").attr("style","");
      changeHash();
    });
  });
}

function closeExamples2() {
  changeHash();
  $("#s-col-2 .gallery-toggler").removeClass("above");
  if ($.browser.msie && $.browser.version == "6.0") {
    $("#examples-2-gallery .gallery .prev").hide();
    $("#examples-2-gallery .gallery .next").hide();
  }
  $("#examples-2-gallery").fadeOut(function(){
    
    if (!$(".nav-links li.lnk-2").hasClass("act")) {
      $(".navigation").animate({
        left: $(".navigation").offset().left - 480 + "px"
      }, 500);
    }
    
    $("#s-col-2").animate({
      width: 188 + "px"
    }, 400);
    
    $("#step-2").animate({
      width: 632 + "px"
    }, 500, function(){
      $(".steps-wrapper").css("width",$(".steps-wrapper").width() - 480 + "px");
      $(".examples-2-button img").attr("src","img/btn-examples-blue-off.png");
      if ($.browser.msie) {
        $("#tint").hide();
      } else {
        $("#tint").fadeOut();
      }
      $("#step-2").attr("style","");
      changeHash();
    });
  });
}

function closeExamples3() {
  $("#s-col-3 .gallery-toggler").removeClass("above");
  if ($.browser.msie && $.browser.version == "6.0") {
    $("#examples-3-gallery .gallery .prev").hide();
    $("#examples-3-gallery .gallery .next").hide();
  }
  $("#examples-3-gallery").fadeOut(function(){
    
    if (!$(".nav-links li.lnk-2").hasClass("act")) {
      $(".navigation").animate({
        left: $(".navigation").offset().left - 450 + "px"
      }, 500);
    }
    
    $("#s-col-3").animate({
      width: 215 + "px"
    }, 400);
    
    $("#step-2").animate({
      width: 632 + "px"
    }, 500, function(){
      $(".steps-wrapper").css("width",$(".steps-wrapper").width() - 480 + "px");
      $(".examples-3-button img").attr("src","img/btn-examples-red-off.png");
      if ($.browser.msie) {
        $("#tint").hide();
      } else {
        $("#tint").fadeOut();
      }
      $("#step-2").attr("style","");
      changeHash();
    });
  });
}

function closeExamples4() {
  
  $("#step-3 .gallery-toggler").removeClass("above");
  if ($.browser.msie && $.browser.version == "6.0") {
    $("#examples-4-gallery .gallery .prev").hide();
    $("#examples-4-gallery .gallery .next").hide();
  }
  $("#examples-4-gallery").fadeOut(function(){
    
    if ($(".nav-links li.lnk-4").hasClass("act") || $(".nav-links li.lnk-5").hasClass("act")) {
      $(".navigation").animate({
        left: $(".navigation").offset().left - 450 + "px"
      }, 500);
    }
    
    $("#step-3").animate({
      width: 302 + "px"
    }, 500, function(){
      $(".steps-wrapper").css("width",$(".steps-wrapper").width() - 480 + "px");
      $(".examples-4-button img").attr("src","img/btn-examples-yellow-off.png");
      if ($.browser.msie) {
        $("#tint").hide();
      } else {
        $("#tint").fadeOut();
      }
      $("#step-3").attr("style","");
      changeHash();
    });
  });
}

function closeForm() {
  //window.location.hash = "contacts";
  $("#feedback-gallery").fadeOut(function(){
    $("#step-5").animate({
      width: "375px"
    }, 500, function(){
      $(".steps-wrapper").css("width",$(".steps-wrapper").width() - 450 + "px");
      if ($.browser.msie) {
        $("#tint").hide();
      } else {
        $("#tint").fadeOut();
      }
    });
  });
}

function openForm() {
  
  if ($("#feedback-gallery").css("display") != "block") {
    
    $(".steps-wrapper").css("width",$(".steps-wrapper").width() + 450 + "px");
    $("#step-5").animate({
      width: 375 + 450 + "px"
    }, 500, function() {
      $("#feedback-gallery").fadeIn(function(){
        pageTint();
        $("html, body").animate({
          scrollLeft: $("#feedback-gallery").offset().left - 334
        }, 500);
      });
    });
    
  }
  
  return false;
  
}

function openTeam() {
  $("#step-1 .gallery-toggler").addClass("above");
  $(".steps-wrapper").css("width",$(".steps-wrapper").width() + 480 + "px");
  $("#step-1").animate({
    width: 334 + 450 + "px"
  }, 500, function() {
    $("#step-1 .gallery").fadeIn(function(){
      $("#step-1 .gallery-toggler img").attr("src","img/btn-team-on.png");
      pageTint();
      $("html, body").animate({
        scrollLeft: $("#step-1 .gallery").offset().left - 334
      }, 500);
    });
  });
  $(".navigation").animate({
    left: $(".navigation").offset().left + 450 + "px"
  }, 500);
}

function openExamples1() {
      
  $("#s-col-1 .gallery-toggler").addClass("above");
  $(".steps-wrapper").css("width",$(".steps-wrapper").width() + 480 + "px");
  $("#step-2").animate({
    width: 632 + 480 + "px"
  }, 400);
  
  if (!$(".nav-links li.lnk-2").hasClass("act")) {
    $(".navigation").animate({
      left: $(".navigation").offset().left + 480 + "px"
    }, 500);
  }
  
  $("#s-col-1").animate({
    width: 160 + 480 + "px"
  }, 500, function(){
    $("#examples-1-gallery").fadeIn(function(){
      $(".examples-1-button img").attr("src","img/btn-examples-green-on.png");
      pageTint();
      $("html, body").animate({
        scrollLeft: $("#examples-1-gallery").offset().left - 230
      }, 500);
    });
  });
}

function openExamples2() {
      
  $("#s-col-2 .gallery-toggler").addClass("above");
  $(".steps-wrapper").css("width",$(".steps-wrapper").width() + 480 + "px");
  $("#step-2").animate({
    width: 632 + 480 + "px"
  }, 400);
  
  if (!$(".nav-links li.lnk-2").hasClass("act")) {
    $(".navigation").animate({
      left: $(".navigation").offset().left + 480 + "px"
    }, 500);
  }
  
  $("#s-col-2").animate({
    width: 188 + 480 + "px"
  }, 500, function(){
    $("#examples-2-gallery").fadeIn(function(){
      $(".examples-2-button img").attr("src","img/btn-examples-blue-on.png");
      pageTint();
      $("html, body").animate({
        scrollLeft: $("#examples-2-gallery").offset().left - 230
      }, 500);
    });
  });
}

function openExamples3() {
      
  $("#s-col-3 .gallery-toggler").addClass("above");
  $(".steps-wrapper").css("width",$(".steps-wrapper").width() + 480 + "px");
  $("#step-2").animate({
    width: 632 + 450 + "px"
  }, 400);
  
  if (!$(".nav-links li.lnk-2").hasClass("act")) {
    $(".navigation").animate({
      left: $(".navigation").offset().left + 450 + "px"
    }, 500);
  }
  
  $("#s-col-3").animate({
    width: 215 + 450 + "px"
  }, 500, function(){
    $("#examples-3-gallery").fadeIn(function(){
      $(".examples-3-button img").attr("src","img/btn-examples-red-on.png");
      pageTint();
      $("html, body").animate({
        scrollLeft: $("#examples-3-gallery").offset().left - 230
      }, 500);
    });
  });
}

function openExamples4() {
      
  $("#step-3 .gallery-toggler").addClass("above");
  $(".steps-wrapper").css("width",$(".steps-wrapper").width() + 480 + "px");
  $("#step-3").animate({
    width: 302 + 450 + "px"
  }, 400);
  
  if ($(".nav-links li.lnk-4").hasClass("act") || $(".nav-links li.lnk-5").hasClass("act")) {
    $(".navigation").animate({
      left: $(".navigation").offset().left + 450 + "px"
    }, 500);
  }
  
  $("#step-3").animate({
    width: 302 + 450 + "px"
  }, 500, function(){
    $("#examples-4-gallery").fadeIn(function(){
      $(".examples-4-button img").attr("src","img/btn-examples-yellow-on.png");
      pageTint();
      $("html, body").animate({
        scrollLeft: $("#examples-4-gallery").offset().left - 290
      }, 500);
    });
  });
}

function changeHash() {
  var scrollPos = $(window).scrollLeft();
  
  var pos2 = $("#step-2").offset().left - 304;
  var pos3 = $("#step-3").offset().left - 450;
  var pos4 = $("#step-4").offset().left - 400;
  var pos5 = $("#step-5").offset().left - 580;
  if (!$(".gallery-toggler").hasClass("above")) {
    if (scrollPos < pos2) {
      //moveNavigation("step-2","lnk-2");
      window.location.hash = "home"
    }
    
    if (scrollPos > pos2 && scrollPos < pos3) {
      //moveNavigation("step-2","lnk-2");
      window.location.hash = "examples"
    }
    
    if (scrollPos > pos3 && scrollPos < pos4) {
      //moveNavigation("step-3","lnk-3");
      window.location.hash = "thingies"
    }
    
    if (scrollPos > pos4 && scrollPos < pos5) {
      //moveNavigation("step-4","lnk-4");
      window.location.hash = "clients"
    }
    
    if (scrollPos > pos5) {
      //moveNavigation("step-5","lnk-5");
      window.location.hash = "contacts"
    }
  }
}

function checkStep() {
  if ((".lnk-2").hasClass("act")) {
    window.location.hash = "examples"
  }
  if ((".lnk-3").hasClass("act")) {
    window.location.hash = "thingies"
  }
  if ((".lnk-4").hasClass("act")) {
    window.location.hash = "clients"
  }
  if ((".lnk-5").hasClass("act")) {
    window.location.hash = "contacts"
  }
}