',
'class': 'bubble dev ' + squeak,
'css': {
'top': 10,
'left': 10,
'background-image': 'url(/assets/giraffe/images/generic/bubbles/' + squeak + '.png)'
}
}).appendTo($b);
}
}
if( dev ){
// Show max lines
$('',{
'css': {
'position': 'fixed',
'top': 0,
'left': '50%',
'right': 0,
'bottom': 0,
'z-index': 0,
'width': 1260,
'height': '100%',
'margin-left': -630,
'border-left': 'dotted 1px red',
'border-right': 'dotted 1px red'
}
}).appendTo('body');
// Once the image is loaded up, get the dimensions and remove the image
$('.bubble img').load(function(){
$(this).parent('.bubble').css({
'width': $(this).width(),
'height': $(this).height()
}).find('img').remove();
});
// On mouse down, start drag
$('.bubble.dev').bind('mousedown',function(e){
// Get some stuff we need for positioning
var $bubble = $(this); // The bubble
var cStartX = e.pageX; // The start mouse x
var cStartY = e.pageY; // The start mouse y
var bStart = $bubble.position(); // The start bubble x&y
// Bind mouse move and up to the entire window
$d.bind({
mousemove: function(e){
// Set the position
$bubble.css({
'top': e.pageY - cStartY + bStart.top,
'left': e.pageX - cStartX + bStart.left
});
e.preventDefault();
},
mouseup: function(){
// Unbind the mousemove
$d.unbind('mousemove mouseup');
}
});
}).click(function(e){
e.preventDefault();
}).dblclick(function(e){
// On double click, show this alert for copying
alert('Copy this (triple click):\n[' + $(this).position().top + ',' + ( 0 - ( ( $b.width() / 2 ) - $(this).position().left ) ) + ',' + $(this).width() + ',' + $(this).height() + ']');
e.preventDefault();
});
}
};
//////////////////////////
// TOOLTIP
// This is basic, to be filled with individual content/styling each time
$.fn.tooltip = function(settings){
// Settings
var defaults = {
margin: 20,
fixed: false,
style: false,
html: '',
before: function(){},
ready: function(){},
click: function(){}
};
// o variable for settings
var o = $.extend(defaults, settings);
// The global window object
var $w = $(window);
// To global tooltip and arrow objects - there is only ever one at a time
var $t;
var $a;
// Margin offset for animations
var m;
// For each target
return this.each(function(){
var $this = $(this); // The hovered object
$this.mouseenter(function(e){
// Build tooltip
$t = $('',{
'id': 'tooltip',
'class': o.style,
'html': o.html
});
// And the arrow
$a = $('',{
'class': 'arrow'
}).appendTo($t);
// Before callback
o.before($this,$t);
// Add it to page with coordinates
$t.appendTo('body').css(coords(e));
// Ready callback
o.ready($this,$t);
// Animate it a little
$t.css({
marginTop: m,
'opacity': 0
}).animate({
'margin-top': 0
},{
'queue': false,
'duration': 400,
'specialEasing': {
marginTop: 'easeOutBounce'
}
});
$t.animate({
'opacity': 1
},{
'queue': false,
'duration': 200
});
// Bind actions to target
$this.bind({
'mousemove': function(e){
// Move with mouse
if( !o.fixed ) $t.css(coords(e));
},
'mouseleave': function(){
// Remove tooltip and unbind events from target
$t.remove();
$this.unbind('mousemove mouseleave');
},
'click': function(e){
if( o.click == false ){
return false;
}else{
o.click($this,$t);
}
}
});
// If page scrolls, remove tooltip
$w.scroll(function(){
$t.remove();
});
});
// Get coordinates
function coords(e){
// Get window metrics
var scrT = $w.scrollTop();
var scrL = $w.scrollLeft()
var win = $w.width();
// Get tooltip metrics
var w = $t.getHiddenDimensions().outerWidth;
var h = $t.getHiddenDimensions().outerHeight;
// Get X
if( o.fixed ){
var xp = $this.offset().left + Math.round( $this.outerWidth() / 2 );
var yp = $this.offset().top;
}else{
var xp = e.pageX;
var yp = e.pageY;
}
var x = xp < win + scrL - Math.round( w / 2 ) - o.margin ? xp - Math.round( w / 2 ) : win + scrL - ( w + o.margin );
// Top or bottom
if( yp < scrT + h + ( o.margin * 3 ) ){
// Adjust the y point if fixed, as we need to account for the target height
if( o.fixed ) yp += $this.outerHeight();
// Set arrow to up
$a.removeClass('down').addClass('up');
// Figure out y
var y = yp + o.margin;
// Set margin offset
m = o.margin;
}else{
// Set arrow to down
$a.addClass('down').removeClass('up');
// Figure out y
var y = yp - h - o.margin;
// Set margin offset
m = 0 - o.margin / 2;
}
// Final off the screen check
if( x < scrL + o.margin ){
x = scrL + o.margin;
}
//console.log('x: ' + x + ' y: ' + y);
// Send back the x and y for the css
return {top:y,left:x};
}
});
};
//////////////////////////
// HIDDEN DIMENSIONS
$.fn.getHiddenDimensions = function(includeMargin){
var $item = this;
props = {
position: 'absolute',
visibility: 'hidden',
display: 'block'
};
dim = {
width: 0,
height: 0,
innerWidth: 0,
innerHeight: 0,
outerWidth: 0,
outerHeight: 0
};
$hiddenParents = $item.parents().andSelf().not(':visible');
includeMargin = ( includeMargin == null ) ? false : includeMargin;
var oldProps = [];
$hiddenParents.each(function(){
var old = {};
for ( var name in props ) {
old[ name ] = this.style[ name ];
this.style[ name ] = props[ name ];
}
oldProps.push(old);
});
dim.width = $item.width();
dim.outerWidth = $item.outerWidth(includeMargin);
dim.innerWidth = $item.innerWidth();
dim.height = $item.height();
dim.innerHeight = $item.innerHeight();
dim.outerHeight = $item.outerHeight(includeMargin);
$hiddenParents.each(function(i) {
var old = oldProps[i];
for ( var name in props ) {
this.style[ name ] = old[ name ];
}
});
return dim;
}
//////////////////////////
// SCROLL TO
$.fn.scrollTo = function (settings){
return this.click(function(e){
$.scrollTo(settings,$(this))
e.preventDefault();
});
}
$.scrollTo = function(settings,$this){
// Settings
var defaults = {
target: 'href', // If left, it will assume that the target is an href. If you set the target, it must be either: top, bottom, or an object
speed: 600, // Speed of scroll
offset: 0, // Add or subtract from the final position
easing: 'easeInOutExpo', // Easing to use
before: function(){}, // Callback before scrolling
after: function(){} // Callback after scrolling
};
var o = $.extend(defaults, settings);
// The scrolling element
var $element = $('html').hasClass('webkit') ? $('body') : $('html');
// Before callback
o.before.apply($this);
// Just creating it for now
var y = 0;
// The max scroll (to stop sudden stops)
var max = $(document).height() - $(window).height();
// Target detection
if( o.target == 'href' ){
y = $($this.attr('href')).offset().top;
}else{
if( o.target == 'top' ){
y = 0;
}else if( o.target == 'bottom' ){
y = max;
}else{
y = o.target.offset().top;
}
}
// Add the offset
y = y + o.offset;
// If the page isn't long enough just go as far as possible
if( y > max ){
y = max;
}
// If we're not going anywhere, don't bother with the animation
if( y == $element.scrollTop() || y == max ){
o.after.apply($this);
}else{
// Animate! - Put body back in if anything breaks, or do an if statement for the tag on certain browsers. I think it's just ie that has an issue.
$element.animate({
'scrollTop': y
},o.speed,o.easing,function(){
o.after.apply($this);
});
}
};
//////////////////////////
// SLIDE THAT PLUGIN
$.fn.slideThat = function(settings){
// Settings
var defaults = {
'arrows': true, // Show the arrows
'nav': true, // Show the nav dots
'infinite': true, // Will cycle through slides and then go back to zero automatically
'auto': true, // Will automatically cycle through slides
'pause': 5, // The pause between slides in seconds - can be set using data-pause
'setSize': true, // For customised sliders, this often breaks things, so can be set to false
'ready': function(){} // Ready callback
};
// o variable for settings
var o = $.extend(defaults, settings);
// For each target
return this.each(function(){
// Objects
var $this = $(this); // The slider div
var $swin = $this.find('.slider_window'); // The slider window
var $nav; // The nav
var $next; // Next arrow
var $prev // Previous arrow
var $slide = new Array(); // An array of the slides
// Variables
var total = $swin.children('.slider_content').length + 1; // How many slides are there? Add 1 for the initial slide that is outside the window to start!
var c = 1; // Current slide
var timer; // For the pause
var mooseBan = false; // Bad moose!
var w; // The width of the whole thing
var h; // The height of the whole thing
var sw; // The width of the slider window (for homepage mainly)
var sh; // The height of the slider window (for homepage mainly)
// Don't go any further if there is only 1 slide (or none!)
if( total > 1 ){
// Set width and height for going forward
w = $this.width();
h = $this.height();
if( o.setSize ){
$swin.css({
'width': w,
'height': h
});
}
// Build an array of each slide
for( i = 0; i <= total; i++ ){
// The first slide is not in the window, so treat that one differently
if( i == 0 ){
$slide[i] = $this.children('.slider_content');
}else{
// Find the slide in the window
$slide[i] = $swin.children('.slider_content:eq(' + ( i - 1 ) + ')');
}
}
// Now that's done, show the slider window
sw = parseFloat( $swin.css('width') );
sh = parseFloat( $swin.css('height') );
$swin.empty().show();
// and remove the contents and move the first slide into it!
$slide[0].prependTo($swin);
// Is there nav of any type?
if( o.nav || o.arrows ){
// Build nav container
$nav = $('',{
'class': 'slider_nav'
});
// If there are nav dots
if( o.nav ){
var navHTML = '';
// Build the list
for( i = 1; i <= total; i++ ){
// For each slide, add a nav dot. If it's the first one, add class of on.
navHTML += 'It looks like we’re missing a few details! Please fill in any marked fields and try again.
', 'ajax': false }; // o variable for settings var o = $.extend(defaults, settings); // For each form (not that there will ever be more than one...) return this.each(function(){ // Objects var $form = $(this); var $error; var fresh = true; // Variables var error = false; // SIMPLE TEXT FIELD $form.find('input, textarea').blur(function(){ var $t = $(this); // Is this a fresh form? if( !fresh && $t.required() ){ var val = $(this).val(); var len = val.length; if( len < 3 || val == $(this).attr('placeholder') ){ $t.error(); }else{ $t.valid(); } } }); // FULL NAME $form.find('#giraffe_name').unbind('blur').blur(function(){ var $t = $(this); // Is this a fresh form? if( !fresh && $t.required() ){ var val = $t.val(); var name = val.search(/^([a-zA-Z'-]+\s+){1,4}[a-zA-z'-]+$/); if( name < 0 ){ $t.error(); }else{ $t.valid(); } } }); // SIMPLE SELECTS - Making sure to still target ie6 $form.find('.field > .select select, .field > select').live('change blur',function(){ var $s = $(this); // Is this a fresh form? if( !fresh && $(this).required() ){ if( $s.checkSelect() ){ $s.error(); }else{ $s.valid(); } } }); // JOINED SELECTS $form.find('.field > .join_select select[data-required]').live('change blur',function(){ // Is this a fresh form? if( !fresh ){ var $s = $(this); var required = $s.required(); if( $s.checkSelect() && required ){ $s.error(); }else{ if( $s.closest('.join_select').find('select').checkSelect() && required ){ $s.error(); }else{ $s.valid(); } } } }); // CHECK SELECT $.fn.checkSelect = function(){ var error = 0; this.each(function(){ var $this = $(this); var val = $this.val(); error += val == $this.children('option:first').val() || val == $this.children('option[disabled]').val() ? 1 : 0; }); error = error > 0; return error; } // EMAIL $form.find('input[type=email]').blur(function(){ // Is this a fresh form? if( !fresh ){ var $i = $(this); var val = $i.val(); var required = $i.required(); var email = checkemail( $i.val() ) ? true : false; if( !email && required || ( val.length > 0 && !email ) ){ $i.error(); }else if( email || ( val.length == 0 && !required ) ){ $i.valid(); } } }); // PHONE NUMBER $form.find('input[type=tel]').blur(function(){ // Is this a fresh form? if( !fresh ){ var $i = $(this); var ph = $i.attr('placeholder'); var val = $(this).val(); var pn = checkphone( val ); var mn = checkMphone( val ); if( ( val != ph && val != '' ) && ( ( pn == false || pn == null ) && ( mn == false || mn == null ) ) ){ $i.error(); }else if( val != ph ){ $i.valid(); }else if( ( val == ph || val == '' ) && !$i.required() ){ $i.parent('.field').removeClass('valid error').find('.error').remove(); } } }); // POST CODE $form.find('#giraffe_postcode').unbind('blur').blur(function(){ // Is this a fresh form? if( !fresh ){ var $i = $(this); var r = $i.required(); var ph = $i.attr('placeholder'); var val = $(this).val(); var emp = val == '' || val == ph; var pc = checkPost( val ); if( ( r && emp ) || ( !r && !emp && !pc ) ){ $i.error(); }else if( ( !r && emp ) || pc ){ $i.valid(); } } }); // CHECK REQUIRED $.fn.required = function(){ return $(this).data('required') == ''; } ////////////////////////// // SUBMIT $form.submit(function(e){ // No longer fresh as a daisy, so live error checking time! fresh = false; // Go through and validate the required fields $form.find('input:visible, textarea:visible, select:visible').blur(); // Find visible errors (the ones hidden can be presumed uninteresting) if( $form.find('.error:visible').length != 0 ){ if(!o.ajax){ // Scroll to the top of the form $.scrollTo({ 'target': $form, 'offset': -20, 'after': function(){ // Only do this bit if there is no error currently if( !error ){ // Error is now true error = true; // Error message $error = $('',{ 'class': 'error_message', 'html': o.errorMsg, 'css': { 'display': 'none', 'opacity': 0 } }).insertAfter($form.find('.intro:first')).slideDown(600,'easeInOutExpo').animate({ 'opacity': 1 }); }else{ var s = 50; var e = 'easeInOutExpo'; $error.animate({ 'left': -2 },s,e).animate({ 'left': 2 },s,e).animate({ 'left': -2 },s,e).animate({ 'left': 2 },s,e).animate({ 'left': -2 },s,e).animate({ 'left': 2 },s,e).animate({ 'left': -2 },s,e).animate({ 'left': 0 },s,e); } } }); } // STOP RIGHT THERE! e.preventDefault(); }else if(o.ajax){ e.preventDefault(); o.ajax.call(); } }); }); ////////////////////////// // REGEX'S function checkemail(email_address) { return email_address.length > 5 && email_address.match(/^((([A-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([A-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([A-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([A-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([A-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([A-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([A-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([A-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([A-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([A-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/); } function checkphone(phone_number) { return phone_number.length > 9 && phone_number.match(/^(\(?(0|\+44)[1-9]{1}\d{1,4}?\)?\s?\d{3,4}\s?\d{3,4})$/); } function checkMphone(phone_number) { return phone_number.length > 9 && phone_number.match(/^((0|\+44)7(5|6|7|8|9){1}\d{2}\s?\d{6})$/); } function checkPost(post_code) { var postcodeRegEx = /[A-Z]{1,2}[0-9]{1,2} ?[0-9][A-Z]{2}/i; return postcodeRegEx.test(post_code); } }; ////////////////////////// // ERROR AND VALID // Used on various forms $.fn.error = function() { var $this = $(this); var $f = $this.closest('.field'); if( !$f.hasClass('error') ){ var error = $f.data('error'); if( error == undefined ) error = 'Please complete this field'; $f.addClass('error').removeClass('valid'); var $error = $('',{ 'class': 'error', 'html': error }).appendTo($f); $f.bind({ 'mouseenter': function(){ $f.addClass('hover'); $error.css({ 'display': 'block', 'margin-top': 18, 'opacity': 0 }).animate({ 'margin-top': 12 },{ 'queue': false, 'duration': 400, 'specialEasing': { marginTop: 'easeOutBounce' } }); $error.animate({ 'opacity': 1 },{ 'queue': false, 'duration': 200 }); }, 'mouseleave': function(){ $f.removeClass('hover'); $error.css({ 'margin-top': 18, 'opacity': 0 }).hide(); } }); } }; $.fn.valid = function() { var $f = $(this).closest('.field'); $f.addClass('valid').unbind('mouseenter mouseleave').removeClass('error').find('.error').remove(); }; })(jQuery); ////////////////////////// // EASING jQuery.extend( jQuery.easing,{ easeInOutExpo: function (x, t, b, c, d){ if (t==0) return b; if (t==d) return b+c; if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; }, easeInExpo: function (x, t, b, c, d) { return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; }, easeOutExpo: function (x, t, b, c, d) { return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; }, easeInBack: function (x, t, b, c, d, s) { if (s == undefined) s = 1.70158; return c*(t/=d)*t*((s+1)*t - s) + b; }, easeOutBack: function (x, t, b, c, d, s) { if (s == undefined) s = 1.70158; return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; }, easeOutBounce: function (x, t, b, c, d) { if ((t/=d) < (1/2.75)) { return c*(7.5625*t*t) + b; } else if (t < (2/2.75)) { return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; } else if (t < (2.5/2.75)) { return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; } else { return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; } }, easeOutQuad: function (x, t, b, c, d) { return -c *(t/=d)*(t-2) + b; }, easeInOutQuad: function (x, t, b, c, d) { if ((t/=d/2) < 1) return c/2*t*t + b; return -c/2 * ((--t)*(t-2) - 1) + b; } }); ////////////////////////// // GOOGLE STUFF var _gaq = _gaq || []; _gaq.push( ['analytics1._setAccount', 'UA-3530095-62'], ['analytics1._trackPageview'] ); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); ////////////////////////// // TWITTER WEB INTENTS (function(){ if( window.__twitterIntentHandler ) return; var intentRegex = /twitter\.com(\:\d{2,4})?\/intent\/(\w+)/, windowOptions = 'scrollbars=yes,resizable=yes,toolbar=no,location=yes', width = 550, height = 420, winHeight = screen.height, winWidth = screen.width; function handleIntent(e) { e = e || window.event; var target = e.target || e.srcElement, m, left, top; while (target && target.nodeName.toLowerCase() !== 'a') { target = target.parentNode; } if (target && target.nodeName.toLowerCase() === 'a' && target.href) { m = target.href.match(intentRegex); if (m) { left = Math.round((winWidth / 2) - (width / 2)); top = 0; if (winHeight > height) { top = Math.round((winHeight / 2) - (height / 2)); } window.open(target.href, 'intent', windowOptions + ',width=' + width + ',height=' + height + ',left=' + left + ',top=' + top); e.returnValue = false; e.preventDefault && e.preventDefault(); } } } if (document.addEventListener) { document.addEventListener('click', handleIntent, false); } else if (document.attachEvent) { document.attachEvent('onclick', handleIntent); } window.__twitterIntentHandler = true; }());