• Meta

  Added 4 months ago

• Categories

  • Form
  • Ajax
  • Parallax
  • Scrolling
  • Media

• Links of interest

  1. Original Source
  2. At Twitter: @rtraction
  3. scrollTo jQuery Plugin

/* Author: @gavinblair @rtraction
 */
var scroll;
var scroller;
var loaded = 0;
var images;
var loading;
var done = 0;
var pageTracker;
var preloadtimeout;

function preload(source) {
  var i = new Image();
  i.onload = function() {
    loaded++;
    if (loaded >= images.length) {
      if (done) {
        doneloading();
      } else {
        setInterval(function() {
          if (done || $("#preloader .current").length == 0) {
            doneloading();
            clearInterval(this);
          }
        }, 100);
      }
    }
  }
  i.src = source;
}

function doneloading() {
  clearInterval(loading);
  clearInterval(preloadtimeout);
  $("#preloader .current").removeClass("current").hide();
  $("#preloader .first").html('happy clients').show().addClass('animated').addClass('pulse').addClass("current");
  setTimeout(function() {
    $("#preloader").fadeOut('slow', function() {
      $('.scroll-arrow').delay(200).fadeIn(800).delay(1200).fadeOut(800);
    });
  }, 500);
}
$(document).ready(function() {

  //ios? bb? android? go to old site
  var ua = navigator.userAgent.toLowerCase();
  var mob = ua.indexOf("android") > -1 || ua.indexOf("mobile") > -1 || ua.indexOf("ipod") > -1 || ua.indexOf("iphone") > -1 || ua.indexOf("ipad") > -1;
  if (mob) {
    window.location = 'http://v4.rtraction.com';
  } else {

    setTimeout(function() {
      pageTracker = _gat._getTracker(UA);
    }, 2000);

    //preloader
    $("#preloader span").each(function() {
      var num = Math.floor(Math.random() * 4);
      var color;
      switch (num) {
      case 0:
        color = 'red';
        break;
      case 1:
        color = 'green';
        break;
      case 2:
        color = 'blue';
        break;
      case 3:
        color = 'orange';
        break;
      }
      $(this).addClass(color);
      if ($(this).hasClass('first')) {
        $(this).addClass('current').show();
      }
    });

    images = new Array();

    //important
    images.push("img/bg.jpg");

    if ($('html').hasClass('multiplebgs')) {
      images.push("img/notext-black-robot-1.jpg");
      images.push("img/notext-black-robot-2.jpg");
      images.push("img/notext-black-robot-3.jpg");
      images.push("img/notext-black-robot-4.jpg");
      images.push("img/notext-white-robot-1.jpg");
      images.push("img/notext-white-robot-2.jpg");
      images.push("img/notext-white-robot-3.jpg");
      images.push("img/notext-white-robot-4.jpg");
      images.push("img/step1.png");
      images.push("img/step2.png");
      images.push("img/step3.png");
      images.push("img/step4.png");
      images.push("img/step5.png");
      images.push("img/step6.png");
      images.push("img/step7.png");
    } else {
      images.push("img/black-robot-1.jpg");
      images.push("img/black-robot-2.jpg");
      images.push("img/black-robot-3.jpg");
      images.push("img/black-robot-4.jpg");
      images.push("img/white-robot-1.jpg");
      images.push("img/white-robot-2.jpg");
      images.push("img/white-robot-3.jpg");
      images.push("img/white-robot-4.jpg");
    }
    images.push("img/feature-foodbank.jpg");
    images.push("img/feature-harrisonpensa.gif");
    images.push("img/feature-rtractionecard.jpg");
    images.push("img/hr.png");
    images.push("img/menubg.jpg");
    images.push("img/radial.png");
    images.push("img/twitter.png");
    images.push("img/menurtr.jpg");
    images.push("img/icons/tab1-icon.png");
    images.push("img/icons/tab2-icon.png");
    images.push("img/icons/tab3-icon.png");
    images.push("img/whitebg.jpg");
    images.push("img/workleft.jpg");
    images.push("img/logos/1000acts.png");
    images.push("img/logos/aeolian.png");
    images.push("img/logos/cdrake.png");
    images.push("img/logos/laschicas.png");
    images.push("img/logos/milliontrees.png");
    images.push("img/logos/skyjack.png");
    images.push("img/icons/binoculars-icon.png");
    images.push("img/icons/email-icon.png");
    images.push("img/icons/facebook-icon.png");
    images.push("img/icons/phone-icon.png");
    images.push("img/icons/twitter-icon.png");

    for (i = 0; i <= images.length - 1; i++) {
      preload(images[i]);
    }

    //start a timeout in case the preloader takes too long
    preloadtimeout = setTimeout(function() {
      doneloading();
    }, 20000); //20 seconds

    setTimeout(function() {
      var oldpercent = 0;
      var speed = 500;
      loading = setInterval(function() {
        var percent = loaded / images.length * 100;
        if (percent != oldpercent || percent > 90) {
          $("#preloader .current").removeClass("current").hide().next("span").addClass("current").show().addClass("animated").addClass("pulse");
        }
        if ($("#preloader .current").length == 0 && percent < 90) {
          done = 1;
          $("#preloader span").removeClass("animated").removeClass("pulse");
          $("#preloader .first").addClass("current").show().addClass('animated').addClass('pulse');
        }
      }, 150);
    }, 3050);

    //create the dialog
    $("#container").append("<div id='greyscreen'></div><div id='dialog'></div>");

    //Home
    if (BrowserDetect.OS != "Mac") {
      $("a").live({
        mouseenter: function() {
          if (!$(this).parent().hasClass("current") && !$(this).hasClass("noanimate")) {
            $(this).addClass("pulse animated hover");
          }
        },
        mouseleave: function() {
          $(this).removeClass("pulse animated hover");
        }
      });
    }

    $(".work.current .right img").live("click", function() {
      if (!$(this).hasClass("thumb")) {
        $(this).parent('.right').parent('.work').children('.left').children('p').children('a').click();
      }
    });
    $(".work a").click(function() {
      if ($(this).attr("rel")) {
        pageTracker._trackEvent("explore", $(this).attr("rel"));
        //console.log("explore: "+$(this).attr("rel"));
        $("#greyscreen").show();
        $("#dialog").html($(this).parent("p").parent(".left").next(".right").next(".hidden").html()).show();
        $("#left, #right, #close").remove();
        $("#dialog").append("<a id='left'></a><a id='right'></a><a id='close'></a>");
      }
    });

    $("#greyscreen, #close").live('click', function() {
      $("#greyscreen").hide();
      $("#dialog").hide();
    });
    $(".thumb").live('click', function() {
      $("#screenshot").remove();
      $("#dialog").append("<img id='screenshot' />");
      var source = $(this).attr("src");
      if (source != "img/screens/1K3.jpg") {
        $("#screenshot").attr("src", source).show();
      } else {
        //video
        psa();
      }
    });
    $("#left, #right").live("click", function() {
      if ($("#screenshot").length && ($("#screenshot").attr("src") || $("#screenshot iframe").length)) {
        var oldsource = $("#screenshot").attr("src");
        if ($("#screenshot iframe").length) {
          //psa
          oldsource = "img/screens/1K3.jpg";
        }
        $("#screenshot").remove();
        $("#dialog").append("<img id='screenshot' />");
        var source = "";
        if ($(this).attr("id") == "left") {
          $("#dialog .thumb").each(function() {
            if ($(this).attr("src") == oldsource) {
              source = $(this).prev(".thumb").attr("src");
            }
          });
        } else { //right
          $("#dialog .thumb").each(function() {
            if ($(this).attr("src") == oldsource) {
              source = $(this).next(".thumb").attr("src");
            }
          });
        }
        if (source != "" && source !== undefined) {
          if (source != "img/screens/1K3.jpg") {
            $("#screenshot").attr("src", source).show();
          } else {
            //video
            psa();
          }
        } else {
          $("#screenshot").remove();
        }
      } else {
        if ($(this).attr("id") == "left") {
          $("#dialog .right .thumb:last").click();
        } else { //right
          $("#dialog .right .thumb:first").click();
        }
      }
    });
    $(document).keydown(function(e) {
      if (e.keyCode == 27) { //escape key
        $("#greyscreen").click();
      }
    });

    //menu
    var menuclone = $("#menu").clone();
    menuclone.attr("id", "menuclone").css("position", "fixed").css("top", "0").css("display", "none").appendTo("#container");

    $("#menuclone a, #menu a").live("click", function() {
      pageTracker._trackEvent("menu", $(this).attr("href"));
      //console.log("menu: "+$(this).attr("href"));
      $(window).scrollTo($(this).attr("href"), 800);
      return false;
    });

    //Process
    if ((BrowserDetect.OS != "Mac" && !$("html").hasClass("ie8")) || (BrowserDetect.OS == "Mac" && BrowserDetect.browser != "Safari")) {
      var introclone = $("#intro").clone();
      var introclone2 = $("#intro").clone();
      introclone.attr("id", "introclone").css("position", "fixed").css("top", "0").css("display", "none").appendTo("#process");
      introclone2.attr("id", "introclone2").css("position", "fixed").css("top", "0").css("display", "none").appendTo("#process");
    }
    $(".count span").live("click", function() {
      if ($(this).attr("rel").length > 0) {
        var rel = $(this).attr("rel");
        if (rel % 2 == 0) {
          //even
          rel -= 1;
          $(window).scrollTo($('#step' + rel)[0], 800, {
            axis: 'y',
            offset: 764
          });
        } else {
          //odd
          $(window).scrollTo($('#step' + $(this).attr("rel"))[0], 800);
        }

      }
    });

    //Contact
    initGoogleMaps();

    $("#contact_details input[name=website]").css({
      left: "-9999em",
      position: "absolute"
    });
    $('#contact_form').submit(submitContactForm);

    //team face clicks - why not?
    $("#team .headshot-wrapper .headshot img").click(function() {
      pageTracker._trackEvent("clicked on face", $(this).attr("alt"));
      //console.log("clicked on face: "+$(this).attr("alt"));
    });

    $(document).scroll(function() {
      scroll = $(window).scrollTop();

      clearTimeout(scroller);

      //Menu
      if (scroll >= $("#menu").offset().top) {
        $("#menuclone").show();
      } else {
        $("#menuclone").hide();
      }
      $("#menu a").each(function() {
        if (!$(this).parent().hasClass("center") && $($(this).attr("href")).length > 0 && scroll >= $($(this).attr("href")).offset().top - 10) {
          $("#menu .current").removeClass("current");
          $(this).parent().addClass("current");
          if ($(this).attr("href") == "#process" && $("#team").offset().top - scroll > 200 && $("html").hasClass("notmacsafari")) {
            $(".count").show();
          } else {
            $(".count").hide();
          }
        }
      });
      var oldsection = $("#menuclone .current a").attr("href");
      $("#menuclone a").each(function() {
        if (!$(this).parent().hasClass("center") && $($(this).attr("href")).length > 0 && scroll >= $($(this).attr("href")).offset().top - 10) {
          $("#menuclone .current").removeClass("current");
          $(this).parent().addClass("current");
        }
      });
      if (oldsection != $("#menuclone .current a").attr("href")) {
        if (pageTracker) {
          pageTracker._trackEvent("scroll", $("#menuclone .current a").attr("href"));
          //console.log("scroll: "+$("#menuclone .current a").attr("href"));
        }
      }

      //work
      var theone = null
      $(".work").each(function() {
        if (!$(this).hasClass("current") && scroll >= $(this).offset().top - 500 && scroll < $(this).offset().top) {
          theone = $(this);
        }
      });
      if (theone != null && $("#process").offset().top - scroll > 200) {
        openwork(theone);
      }

      // Process
      if ((BrowserDetect.OS != "Mac" && !$("html").hasClass("ie8")) || (BrowserDetect.OS == "Mac" && BrowserDetect.browser != "Safari")) {
        $("html").addClass("notmacsafari");
        if (scroll >= $("#intro").offset().top) {
          $("#introclone").show();
          $("#introclone2").show();
          $("#intro").css("background-attachment", "fixed");
        } else {
          $("#introclone").hide();
          $("#introclone2").hide();
          $("#intro").css("background-attachment", "scroll");
        }

        if ($("#step1").offset().top - scroll > 0) {
          $("#introclone").html($("#intro").html()).css("background-image", $("#intro").css("background-image")).css("background-position", $("#intro").css("background-position")).css("z-index", "1").css("height", "100%");
          $("#introclone2").html($("#step2").html()).css("background-image", $("#step2").css("background-image")).css("background-position", $("#step2").css("background-position")).css("z-index", "0").css("height", "100%");
        }
        if ($("#step1").offset().top - scroll < ($(window).height() + 200 - $("#step1").height()) && $("#step1").offset().top - scroll > 0) {
          $("#introclone").css("z-index", "1").css("height", "50%");
          $("#introclone2").html($("#step2").html()).css("background-image", $("#step2").css("background-image")).css("background-position", $("#step2").css("background-position")).css("z-index", "0");
        } else if ($("#step1").offset().top - scroll <= 0) {
          $("#introclone").css("z-index", "0").css("height", "100%");
          $("#introclone2").css("z-index", "1");
        }

        if ($("#step1").offset().top - scroll <= 0) {
          $("#introclone2").html($("#step2").html()).css("background-image", $("#step2").css("background-image")).css("background-position", $("#step2").css("background-position")).css("z-index", "1").css("height", "100%");
          $("#introclone").html($("#step4").html()).css("background-image", $("#step4").css("background-image")).css("background-position", $("#step4").css("background-position")).css("z-index", "0").css("height", "100%");
        }
        if ($("#step3").offset().top - scroll < ($(window).height() + 200 - $("#step3").height()) && $("#step3").offset().top - scroll > 0) {
          $("#introclone2").css("z-index", "1").css("height", "50%");
          $("#introclone").html($("#step4").html()).css("background-image", $("#step4").css("background-image")).css("background-position", $("#step4").css("background-position")).css("z-index", "0");
        } else if ($("#step3").offset().top - scroll <= 0) {
          $("#introclone2").css("z-index", "0").css("height", "100%");
          $("#introclone").css("z-index", "1");
        }

        if ($("#step3").offset().top - scroll <= 0) {
          $("#introclone").html($("#step4").html()).css("background-image", $("#step4").css("background-image")).css("background-position", $("#step4").css("background-position")).css("z-index", "1").css("height", "100%");
          $("#introclone2").html($("#step6").html()).css("background-image", $("#step6").css("background-image")).css("background-position", $("#step6").css("background-position")).css("z-index", "0").css("height", "100%");
        }
        if ($("#step5").offset().top - scroll < ($(window).height() + 200 - $("#step5").height()) && $("#step5").offset().top - scroll > 0) {
          $("#introclone").css("z-index", "1").css("height", "50%");
          $("#introclone2").html($("#step6").html()).css("background-image", $("#step6").css("background-image")).css("background-position", $("#step6").css("background-position")).css("z-index", "0");
        } else if ($("#step5").offset().top - scroll <= 0) {
          $("#introclone").css("z-index", "0").css("height", "100%");
          $("#introclone2").css("z-index", "1");
        }

        if ($("#step7").offset().top - scroll < ($(window).height() + 200 - $("#step7").height()) && $("#step7").offset().top - scroll > 0) {
          $("#introclone").css("height", "50%");
          $("#introclone2").css("height", "50%");
        } else if ($("#step7").offset().top - scroll <= 0) {
          $("#introclone").css("height", "100%");
          $("#introclone2").css("height", "100%");
        }
        if ($("#step7").offset().top - scroll < 0) {
          $("#introclone").css("height", "0%");
          $("#introclone2").css("height", "0%");
        }
      } else {
        //ie8 and mac safari
/*$("#process .step").each(function(){
					if($(this).offset().top - scroll <= 0) {
						$(this).css("position", "fixed");
					} else{
						$(this).css("position", "static");
					}
				});*/
      }

    }).scroll();

    if ((BrowserDetect.OS == "Mac" && BrowserDetect.browser == "Safari") || $("html").hasClass("ie8")) {
      $(".step").removeClass("hidden").css("margin-top", "0");
      $("html").addClass("macsafari");

      $(".step .content").html("");
    }
    //work
    $(".work:first-child .left .button").click(function() {
      setTimeout(function() {
        scrolltowork($(".work:nth-child(2)"));
      }, 100);
      return false;
    });

    $(".work").click(function() {
      if (!$(this).hasClass("current")) {
        var work = $(this);
        scrolltowork(work);
        openwork(work);
      }
    });



  }
});

function psa() {
  $("#screenshot").after('<div class="video" id="sc"><iframe width="994" height="535" src="http://www.youtube.com/embed/ytC2pl_GBKY" frameborder="0" allowfullscreen></iframe></div>').remove();
  $("#sc").attr("id", "screenshot").show();
}

function closework() {
  if (!$("html").hasClass("ie8")) {
    $(".work.current").css({
      height: "15.6875em",
      opacity: ".5"
    }).removeClass("current");
    $(".work.current .right img").css({
      marginTop: "-8.875em"
    });
    $(".work .thumb").css("margin-top", "1em");
    $(".work>.left p").hide();
    $(".work .hidden .left p").css("opacity", "1");
  }
}

function openwork(work) {
  closework();

  work.css({
    height: "31.25em",
    opacity: "1"
  }).addClass("current");

  work.children(".left").css({
    height: "31.25em",
  });
  work.children(".right").css({
    height: "31.25em",
  });
  work.children(".right").children("img").css({
    marginTop: "0"
  });
  work.children(".left").children("p").show();
}

function scrolltowork(work) {
  var offset = 0;
  if (work.index() > $(".work.current").index()) {
    offset = -400;
  } else {
    offset = -150;
  }
  $(window).scrollTo(work, 100, {
    offset: offset
  });
}

function initGoogleMaps() {
  var mapLatlng = new google.maps.LatLng(42.987, -81.256);
  var markerLatlng = new google.maps.LatLng(42.98693, -81.25126)

  var myOptions = {
    zoom: 15,
    center: mapLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true,
    disableDoubleClickZoom: true,
    draggable: true,
    keyboardShortcuts: false,
    scrollwheel: false
  };
  var map = new google.maps.Map(document.getElementById('contact_map'), myOptions);

  var rtractionMarker = new google.maps.Marker({
    position: markerLatlng,
    map: map,
    title: 'rtraction'
  });

  var infowindow = new google.maps.InfoWindow({
    content: "150 Dufferin Ave #600<br>London, ON N6A 5N6<br>(519) 438-9064"
  });
  infowindow.open(map, rtractionMarker);

  google.maps.event.addListener(rtractionMarker, 'click', function() {
    infowindow.open(map, rtractionMarker);
  })
}

function activateTab(tabDiv) {
  $(window).scrollTo(tabDiv, 200, {
    offset: -45
  });

  $('.tab').removeClass('active');
  $(tabDiv).addClass('active');

  $('.tabs').removeClass('tab1-active');
  $('.tabs').removeClass('tab2-active');
  $('.tabs').removeClass('tab3-active');

  $('.tabs').addClass(tabDiv.id + '-active');

  $('.tab-content').hide();
  $('.tab-content').hide();
  $('.tab-content').hide();

  $('#' + tabDiv.id + '-content').fadeIn('fast');

  $('.scroll-arrow').delay(200).fadeIn(800).delay(1200).fadeOut(800);
}

function submitContactForm(e) {
  var form = $(e.target);

  // make sure default text is not in there


  $.ajax({
    url: form.attr('action'),
    data: form.serialize(),
    type: 'post',

    success: function(data, textStatus) {
      if (data.success == true) {
        var button = form.find('button');
        button.hide();
        button.addClass('green_button').html('sent!!');
        button.fadeIn(200, function() {
          button.delay(2000).fadeOut(400, function() {
            button.removeClass('green_button').html('send it!').fadeIn(200);
          });
        });
      } else {
        if (data.errors != undefined) {
          // TODO: would be nice to trigger html validation instead of custom
          $(data.errors).each(function(index) {
            $('#error_' + index).html(data.errors[index]).show();
          });
        }
      }
    },
    error: function() {
      alert('There was a problem sending your message.  Please try again later.');
    }
  });

  return false;
}

/* Author: @gavinblair @rtraction

*/
var scroll;
var scroller;
var loaded = 0;
var images;
var loading;
var done = 0;
var pageTracker;
var preloadtimeout;
function preload(source) {
	var i = new Image();
	i.onload = function(){
		loaded ++;
		if(loaded >= images.length) {
			if(done) {
				doneloading();
			} else {
				setInterval(function(){
					if(done || $("#preloader .current").length == 0) {
						doneloading();
						clearInterval(this);
					}
				}, 100);
			}
		}
	}
	i.src = source;
}
function doneloading(){
	clearInterval(loading);
	clearInterval(preloadtimeout);
	$("#preloader .current").removeClass("current").hide();
	$("#preloader .first").html('happy clients').show().addClass('animated').addClass('pulse').addClass("current");
	setTimeout(function(){
		$("#preloader").fadeOut('slow', function() {
			$('.scroll-arrow').delay(200).fadeIn(800).delay(1200).fadeOut(800);
		});
	}, 500);
}
$(document).ready(function(){
	
	//ios? bb? android? go to old site
	var ua = navigator.userAgent.toLowerCase();
	var mob = ua.indexOf("android") > -1 || ua.indexOf("mobile") > -1 || ua.indexOf("ipod") > -1 || ua.indexOf("iphone") > -1 || ua.indexOf("ipad") > -1;
	if(mob) {
		window.location = 'http://v4.rtraction.com';
	} else {
		
		setTimeout(function(){
			pageTracker =  _gat._getTracker(UA);
		}, 2000);
		
		//preloader
		$("#preloader span").each(function(){
			var num = Math.floor(Math.random()*4);
			var color;
			switch(num){
				case 0:
					color = 'red';
					break;
				case 1:
					color = 'green';
					break;
				case 2:
					color = 'blue';
					break;
				case 3:
					color = 'orange';
					break;
			}
			$(this).addClass(color);
			if($(this).hasClass('first')){
				$(this).addClass('current').show();
			}
		});
		
		images = new Array();
			
		//important
		images.push("img/bg.jpg");
		
		if($('html').hasClass('multiplebgs')) {
			images.push("img/notext-black-robot-1.jpg");
			images.push("img/notext-black-robot-2.jpg");
			images.push("img/notext-black-robot-3.jpg");
			images.push("img/notext-black-robot-4.jpg");
			images.push("img/notext-white-robot-1.jpg");
			images.push("img/notext-white-robot-2.jpg");
			images.push("img/notext-white-robot-3.jpg");
			images.push("img/notext-white-robot-4.jpg");
			images.push("img/step1.png");
			images.push("img/step2.png");
			images.push("img/step3.png");
			images.push("img/step4.png");
			images.push("img/step5.png");
			images.push("img/step6.png");
			images.push("img/step7.png");
		} else {
			images.push("img/black-robot-1.jpg");
			images.push("img/black-robot-2.jpg");
			images.push("img/black-robot-3.jpg");
			images.push("img/black-robot-4.jpg");
			images.push("img/white-robot-1.jpg");
			images.push("img/white-robot-2.jpg");
			images.push("img/white-robot-3.jpg");
			images.push("img/white-robot-4.jpg");
		}
		images.push("img/feature-foodbank.jpg");
		images.push("img/feature-harrisonpensa.gif");
		images.push("img/feature-rtractionecard.jpg");
		images.push("img/hr.png");
		images.push("img/menubg.jpg");
		images.push("img/radial.png");
		images.push("img/twitter.png");
		images.push("img/menurtr.jpg");
		images.push("img/icons/tab1-icon.png");
		images.push("img/icons/tab2-icon.png");
		images.push("img/icons/tab3-icon.png");
		images.push("img/whitebg.jpg");
		images.push("img/workleft.jpg");
		images.push("img/logos/1000acts.png");
		images.push("img/logos/aeolian.png");
		images.push("img/logos/cdrake.png");
		images.push("img/logos/laschicas.png");
		images.push("img/logos/milliontrees.png");
		images.push("img/logos/skyjack.png");
		images.push("img/icons/binoculars-icon.png");
		images.push("img/icons/email-icon.png");
		images.push("img/icons/facebook-icon.png");
		images.push("img/icons/phone-icon.png");
		images.push("img/icons/twitter-icon.png");
		
		for(i=0; i<=images.length-1; i++) {
			preload(images[i]);
		}
		
		//start a timeout in case the preloader takes too long
		preloadtimeout = setTimeout(function(){
			doneloading();
		}, 20000); //20 seconds
		
		setTimeout(function(){
			var oldpercent = 0;
			var speed = 500;
			loading = setInterval(function(){
				var percent = loaded / images.length * 100;
				if(percent != oldpercent || percent > 90) {
					$("#preloader .current").removeClass("current").hide().next("span").addClass("current").show().addClass("animated").addClass("pulse");
				}
				if($("#preloader .current").length == 0 && percent < 90) {
					done = 1;
					$("#preloader span").removeClass("animated").removeClass("pulse");
					$("#preloader .first").addClass("current").show().addClass('animated').addClass('pulse');
				}
			}, 150);
		}, 3050);
		
		//create the dialog
		$("#container").append("<div id='greyscreen'></div><div id='dialog'></div>");
		
		//Home
		if(BrowserDetect.OS != "Mac"){
			$("a").live({
				mouseenter: function(){
					if(!$(this).parent().hasClass("current") && !$(this).hasClass("noanimate")) {
						$(this).addClass("pulse animated hover");
					}
				},
				mouseleave: function(){
					$(this).removeClass("pulse animated hover");
				}
			});
		}
		
		$(".work.current .right img").live("click", function(){
			if(!$(this).hasClass("thumb")) {
				$(this).parent('.right').parent('.work').children('.left').children('p').children('a').click();
			}
		});
		$(".work a").click(function(){
			if($(this).attr("rel")) {
				pageTracker._trackEvent("explore", $(this).attr("rel"));
				//console.log("explore: "+$(this).attr("rel"));
				$("#greyscreen").show();
				$("#dialog").html($(this).parent("p").parent(".left").next(".right").next(".hidden").html()).show();
				$("#left, #right, #close").remove();
				$("#dialog").append("<a id='left'></a><a id='right'></a><a id='close'></a>");
			}
		});
		
		$("#greyscreen, #close").live('click', function(){
			$("#greyscreen").hide();
			$("#dialog").hide();
		});
		$(".thumb").live('click', function(){
			$("#screenshot").remove();
			$("#dialog").append("<img id='screenshot' />");
			var source = $(this).attr("src");
			if(source != "img/screens/1K3.jpg") {
				$("#screenshot").attr("src", source).show();
			} else {
				//video
				psa();
			}
		});
		$("#left, #right").live("click", function(){
			if($("#screenshot").length && ($("#screenshot").attr("src") || $("#screenshot iframe").length)) {
				var oldsource = $("#screenshot").attr("src");
				if($("#screenshot iframe").length) {
					//psa
					oldsource = "img/screens/1K3.jpg";
				}
				$("#screenshot").remove();
				$("#dialog").append("<img id='screenshot' />");
				var source = "";
				if($(this).attr("id") == "left") {
					$("#dialog .thumb").each(function(){
						if($(this).attr("src") == oldsource){
							source = $(this).prev(".thumb").attr("src");
						}
					});
				} else { //right
					$("#dialog .thumb").each(function(){
						if($(this).attr("src") == oldsource){
							source = $(this).next(".thumb").attr("src");
						}
					});
				}
				if(source != "" && source !== undefined) {
					if(source != "img/screens/1K3.jpg") {
						$("#screenshot").attr("src", source).show();
					} else {
						//video
						psa();
					}
				} else {
					$("#screenshot").remove();
				}
			} else {
				if($(this).attr("id") == "left") {
					$("#dialog .right .thumb:last").click();
				} else { //right
					$("#dialog .right .thumb:first").click();
				}
			}
		});
		$(document).keydown(function(e){
			if(e.keyCode == 27) { //escape key
				$("#greyscreen").click();
			}
		});
		
		//menu
		var menuclone = $("#menu").clone();
		menuclone.attr("id", "menuclone").css("position", "fixed").css("top", "0").css("display", "none").appendTo("#container");
		
		$("#menuclone a, #menu a").live("click", function(){
			pageTracker._trackEvent("menu", $(this).attr("href"));
			//console.log("menu: "+$(this).attr("href"));
			$(window).scrollTo($(this).attr("href"), 800);
			return false;
		});
	
		//Process
		if((BrowserDetect.OS != "Mac" && !$("html").hasClass("ie8")) || (BrowserDetect.OS == "Mac" && BrowserDetect.browser != "Safari")){
			var introclone = $("#intro").clone();
			var introclone2 = $("#intro").clone();
			introclone.attr("id", "introclone").css("position", "fixed").css("top", "0").css("display", "none").appendTo("#process");
			introclone2.attr("id", "introclone2").css("position", "fixed").css("top", "0").css("display", "none").appendTo("#process");
		}
		$(".count span").live("click", function(){
			if($(this).attr("rel").length > 0) {
				var rel = $(this).attr("rel");
				if(rel%2 == 0) {
					//even
					rel-= 1;
					$(window).scrollTo( $('#step'+rel)[0], 800, {axis:'y', offset: 764} );
				} else {
					//odd
					$(window).scrollTo( $('#step'+$(this).attr("rel"))[0], 800 );
				}
				
			}
		});
	
		//Contact
		initGoogleMaps();
		
		$("#contact_details input[name=website]").css({
			left: "-9999em",
			position: "absolute"
		});
		$('#contact_form').submit(submitContactForm);
		
		//team face clicks - why not?
		$("#team .headshot-wrapper .headshot img").click(function(){
			pageTracker._trackEvent("clicked on face", $(this).attr("alt"));
			//console.log("clicked on face: "+$(this).attr("alt"));
		});
		
		$(document).scroll(function(){
			scroll = $(window).scrollTop();
			
			clearTimeout(scroller);
			
			//Menu
			if(scroll >= $("#menu").offset().top) {
				$("#menuclone").show();
			} else {
				$("#menuclone").hide();
			}
			$("#menu a").each(function(){
				if(!$(this).parent().hasClass("center") && $($(this).attr("href")).length > 0 && scroll >= $($(this).attr("href")).offset().top-10) {
					$("#menu .current").removeClass("current");
					$(this).parent().addClass("current");
					if($(this).attr("href") == "#process" && $("#team").offset().top - scroll > 200 && $("html").hasClass("notmacsafari")) {
						$(".count").show();
					} else {
						$(".count").hide();
					}
				}
			});
			var oldsection = $("#menuclone .current a").attr("href");
			$("#menuclone a").each(function(){
				if(!$(this).parent().hasClass("center") && $($(this).attr("href")).length > 0 && scroll >= $($(this).attr("href")).offset().top-10) {
					$("#menuclone .current").removeClass("current");
					$(this).parent().addClass("current");
				}
			});
			if(oldsection != $("#menuclone .current a").attr("href")) {
				if(pageTracker) {
					pageTracker._trackEvent("scroll", $("#menuclone .current a").attr("href"));
					//console.log("scroll: "+$("#menuclone .current a").attr("href"));
				}
			}
			
			//work
			var theone = null
			$(".work").each(function(){
				if(!$(this).hasClass("current") && scroll >= $(this).offset().top-500 && scroll < $(this).offset().top) {
					theone = $(this);
				}
			});
			if(theone != null && $("#process").offset().top - scroll > 200){
				openwork(theone);
			}
			
			// Process
			if((BrowserDetect.OS != "Mac" && !$("html").hasClass("ie8")) || (BrowserDetect.OS == "Mac" && BrowserDetect.browser != "Safari")){
				$("html").addClass("notmacsafari");
				if(scroll >= $("#intro").offset().top) {
					$("#introclone").show();
					$("#introclone2").show();
					$("#intro").css("background-attachment", "fixed");
				} else {
					$("#introclone").hide();
					$("#introclone2").hide();
					$("#intro").css("background-attachment", "scroll");
				}
				
				if($("#step1").offset().top - scroll > 0) {
					$("#introclone")
						.html($("#intro").html())
						.css("background-image", $("#intro").css("background-image"))
						.css("background-position", $("#intro").css("background-position"))
						.css("z-index", "1")
						.css("height", "100%");
					$("#introclone2")
						.html($("#step2").html())
						.css("background-image", $("#step2").css("background-image"))
						.css("background-position", $("#step2").css("background-position"))
						.css("z-index", "0")
						.css("height", "100%");
				}
				if($("#step1").offset().top - scroll < ($(window).height()+200 - $("#step1").height()) && $("#step1").offset().top - scroll > 0){
					$("#introclone")
						.css("z-index", "1")
						.css("height", "50%");
					$("#introclone2")
						.html($("#step2").html())
						.css("background-image", $("#step2").css("background-image"))
						.css("background-position", $("#step2").css("background-position"))
						.css("z-index", "0");
				} else if($("#step1").offset().top - scroll <= 0){
					$("#introclone")
						.css("z-index", "0")
						.css("height", "100%");
					$("#introclone2")
						.css("z-index", "1");
				}
				
				if($("#step1").offset().top - scroll <= 0) {
					$("#introclone2")
						.html($("#step2").html())
						.css("background-image", $("#step2").css("background-image"))
						.css("background-position", $("#step2").css("background-position"))
						.css("z-index", "1")
						.css("height", "100%");
					$("#introclone")
						.html($("#step4").html())
						.css("background-image", $("#step4").css("background-image"))
						.css("background-position", $("#step4").css("background-position"))
						.css("z-index", "0")
						.css("height", "100%");
				}
				if($("#step3").offset().top - scroll < ($(window).height()+200 - $("#step3").height()) && $("#step3").offset().top - scroll > 0) {
					$("#introclone2")
						.css("z-index", "1")
						.css("height", "50%");
					$("#introclone")
						.html($("#step4").html())
						.css("background-image", $("#step4").css("background-image"))
						.css("background-position", $("#step4").css("background-position"))
						.css("z-index", "0");
				} else if($("#step3").offset().top - scroll <= 0) {
					$("#introclone2")
						.css("z-index", "0")
						.css("height", "100%");
					$("#introclone")
						.css("z-index", "1");
				}
				
				if($("#step3").offset().top - scroll <= 0) {
					$("#introclone")
						.html($("#step4").html())
						.css("background-image", $("#step4").css("background-image"))
						.css("background-position", $("#step4").css("background-position"))
						.css("z-index", "1")
						.css("height", "100%");
					$("#introclone2")
						.html($("#step6").html())
						.css("background-image", $("#step6").css("background-image"))
						.css("background-position", $("#step6").css("background-position"))
						.css("z-index", "0")
						.css("height", "100%");
				}
				if($("#step5").offset().top - scroll < ($(window).height()+200 - $("#step5").height()) && $("#step5").offset().top - scroll > 0) {
					$("#introclone")
						.css("z-index", "1")
						.css("height", "50%");
					$("#introclone2")
						.html($("#step6").html())
						.css("background-image", $("#step6").css("background-image"))
						.css("background-position", $("#step6").css("background-position"))
						.css("z-index", "0");
				} else if($("#step5").offset().top - scroll <= 0) {
					$("#introclone")
						.css("z-index", "0")
						.css("height", "100%");
					$("#introclone2")
						.css("z-index", "1");
				}
				
				if($("#step7").offset().top - scroll < ($(window).height()+200 - $("#step7").height()) && $("#step7").offset().top - scroll > 0) {
					$("#introclone").css("height", "50%");
					$("#introclone2").css("height", "50%");
				} else if($("#step7").offset().top - scroll <= 0){
					$("#introclone").css("height", "100%");
					$("#introclone2").css("height", "100%");
				}
				if($("#step7").offset().top - scroll < 0) {
					$("#introclone").css("height", "0%");
					$("#introclone2").css("height", "0%");
				}
			} else {
				//ie8 and mac safari
				/*$("#process .step").each(function(){
					if($(this).offset().top - scroll <= 0) {
						$(this).css("position", "fixed");
					} else{
						$(this).css("position", "static");
					}
				});*/
			}
			
		}).scroll();
		
		if((BrowserDetect.OS == "Mac" && BrowserDetect.browser == "Safari") || $("html").hasClass("ie8")){
			$(".step").removeClass("hidden").css("margin-top", "0");
			$("html").addClass("macsafari");
			
			$(".step .content").html("");
		}
		//work
		$(".work:first-child .left .button").click(function(){
			setTimeout(function(){
				scrolltowork($(".work:nth-child(2)"));
			}, 100);
			return false;
		});
		
		$(".work").click(function(){
			if(!$(this).hasClass("current")) {
				var work = $(this);
				scrolltowork(work);
				openwork(work);
			}
		});
		
		
		
	}
});

function psa(){
	$("#screenshot").after('<div class="video" id="sc"><iframe width="994" height="535" src="http://www.youtube.com/embed/ytC2pl_GBKY" frameborder="0" allowfullscreen></iframe></div>').remove();
	$("#sc").attr("id", "screenshot").show();
}
function closework(){
	if(!$("html").hasClass("ie8")) {
		$(".work.current").css({
			height: "15.6875em",
			opacity: ".5"
		}).removeClass("current");
		$(".work.current .right img").css({
			marginTop: "-8.875em"
		});
		$(".work .thumb").css("margin-top", "1em");
		$(".work>.left p").hide();
		$(".work .hidden .left p").css("opacity", "1");
	}
}
function openwork(work) {
	closework();
	
	work.css({
		height: "31.25em",
		opacity: "1"
	}).addClass("current");
	
	work.children(".left").css({
		height: "31.25em",
	});
	work.children(".right").css({
		height: "31.25em",
	});
	work.children(".right").children("img").css({
		marginTop: "0"
	});
	work.children(".left").children("p").show();
}
function scrolltowork(work){
	var offset = 0;
	if(work.index() > $(".work.current").index()){
		offset = -400;
	} else {
		offset = -150;
	}
	$(window).scrollTo(work, 100, {offset: offset});
}
function initGoogleMaps() {
	var mapLatlng = new google.maps.LatLng(42.987, -81.256);
	var markerLatlng = new google.maps.LatLng(42.98693, -81.25126)
	
	var myOptions = {
		zoom: 15,
		center: mapLatlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		disableDefaultUI: true,
		disableDoubleClickZoom: true,
		draggable: true,
		keyboardShortcuts: false,
		scrollwheel: false
	};
	var map = new google.maps.Map(document.getElementById('contact_map'),
        myOptions);
        
	var rtractionMarker = new google.maps.Marker({
		position: markerLatlng,
		map: map,
		title: 'rtraction'
	});
	
	var infowindow = new google.maps.InfoWindow({
		content: "150 Dufferin Ave #600<br>London, ON N6A 5N6<br>(519) 438-9064"
	});
	infowindow.open(map, rtractionMarker);

	google.maps.event.addListener(rtractionMarker, 'click', function() {
		infowindow.open(map, rtractionMarker);
	})
}

function activateTab(tabDiv) {
	$(window).scrollTo(tabDiv, 200, {offset: -45});
	
	$('.tab').removeClass('active');
	$(tabDiv).addClass('active');
	
	$('.tabs').removeClass('tab1-active');
	$('.tabs').removeClass('tab2-active');
	$('.tabs').removeClass('tab3-active');
	
	$('.tabs').addClass(tabDiv.id + '-active');
	
	$('.tab-content').hide();
	$('.tab-content').hide();
	$('.tab-content').hide();
	
	$('#' + tabDiv.id + '-content').fadeIn('fast');
	
	$('.scroll-arrow').delay(200).fadeIn(800).delay(1200).fadeOut(800);
}

function submitContactForm(e) {
	var form = $(e.target);
	
	// make sure default text is not in there
	

	$.ajax({
		url: form.attr('action'),
		data: form.serialize(),
		type: 'post',
		
		success: function(data, textStatus) {
			if (data.success == true) {
				var button = form.find('button');
				button.hide();
				button.addClass('green_button').html('sent!!');
				button.fadeIn(200, function() {
					button.delay(2000).fadeOut(400, function() {
						button.removeClass('green_button').html('send it!').fadeIn(200);
					});					
				});
			} else {
				if (data.errors != undefined) {
					// TODO: would be nice to trigger html validation instead of custom
					$(data.errors).each(function(index) {
						$('#error_' + index).html(data.errors[index]).show();
					});
				}
			}
		},
		error: function() {
			alert('There was a problem sending your message.  Please try again later.');
		}
	});
	
	return false;
}