$(document).ready(function(){
//standards-compliant way of opening links in new windows
$('a[rel=external]').attr('target','_blank');
$("#pageflip").hover(function() { //On hover...
$("#pageflip img , .msg_block").stop()
.animate({ //Animate and expand the image and the msg_block (Width + height)
width: '417px',
height: '429px'
}, 500);
} , function() {
$("#pageflip img").stop() //On hover out, go back to original size 50x52
.animate({
width: '128px',
height: '134px'
}, 220);
$(".msg_block").stop() //On hover out, go back to original size 50x50
.animate({
width: '128px',
height: '128px'
}, 200); //Note this one retracts a bit faster (to prevent glitching in IE)
});
//back to top link
$('#backtotop').click(function(e){
e.preventDefault();
$.scrollTo('#wrapper',500);
});
//start image banner
$('#showcase').nivoSlider({
effect: 'fade',
slices: 25,
animSpeed:500,
pauseTime:6000,
controlNav:false,
captionOpacity:0
});
//start work carousel
$('#carousel').jcarousel({
scroll:1,
auto:30,
wrap:'both'
});
//client logos
if($('#logos').length == 1){
$('#logos').cycle({
fx:'fade',
timeout:5000,
speed:500,
pause: 1
});
}
//Any fancybox links, fancybox-ify them
if($('.fancybox, [rel=fancybox]').length >= 1){
$('.fancybox, [rel=fancybox]').fancybox({
'zoomOpacity': true,
'zoomSpeedIn': 500,
'zoomSpeedOut': 500,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'cache': false,
'hideOnContentClick': false
});
}
$('.pov li a.fancybox, .news li a.fancybox').fancybox({
'cache': false,
'hideOnContentClick': false,
'width':800,
'height':350,
'type':'iframe'
});
$('.fancyboxflash').fancybox({
'cache': false,
'hideOnContentClick': false,
'width':620,
'height':349,
'type':'swf',
'onClosed': reload
});
//js animations (mainly the top banner) are slowing down the flash movie. So, when we click on the link to the movie, replace 'showcase with just a static image. reload() is called when the fancybox window is closed
$('.fancyboxflash').click(function(){
$('#showcase').replaceWith('
');
});
//Get the hover over things for the case study boxes
$('.cs-box').hover(function(){
var id = $(this).attr('rel');
$('#'+id).delay(300).animate({'margin-top':'0'},300);
},
function(){
var id = $(this).attr('rel');
$('#'+id).delay(300).animate({'margin-top':'170px'},300);
});
//anything that is ajaxed, ajax it! This fades out a div, adds a loader, then loads the #loadme element from whatever URL
$('[rel="ajax"]').each(function(key,value){
$(this).click(function(e){
e.preventDefault();
$('.sub-middle-content').customFadeTo('fast',0.3);
$('#main').append('
');
$('[rel="ajax"]').each(function(key,value){
$(value).removeClass('selected');
});
var href = $(this).attr('href');
$(this).addClass('selected');
$('.sub-middle-content').load(href+' #loadme',{cache:false},function(){
$('.sub-middle-content').customFadeTo('fast',1);
$('.loader').remove();
});
});
});
//when submitting the contact form, we want to stop the form doing its default action, fade / disable the submit button, validate data, submit, then post the response
$('#contact-form').submit(function(e){
e.preventDefault();
var msg = ""
//if there is already an error message, remove it, and get rid of any red borders
$('#errorcode').remove();
$('[rel=req]').each(function(k,v){
$(this).removeClass('error-input');
});
//fade out button and disable. Aesthetics really
$('#btnSubmit').fadeTo('fast',0.5);
$('#btnSubmit').attr('disabled','disabled');
//now to validate the form
//anything that isn't filled in, give a red border
var error = 0;
$('[rel=req]').each(function(k,v){
if($(this).val() == ""){
$(this).addClass('error-input');
error++;
}
});
if(error > 0){
msg += "Please complete any highlighted fields
";
}
//check email is a valid email
var exp = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
if(!exp.test($('#email').val())){
error++;
$('#email').addClass('error-input');
msg += "Please enter a valid email address
";
}
//finally, if there is a phone number, make sure it is only numbers
if($('#phone').val() != ""){
var exp2 = /\d{11}/;
var value = $('#phone').val().split(' ').join('');
if(!exp2.test(value)){
error++;
msg += "Please enter a valid telephone number (Please do not include area codes, brackets or dashes)";
$('#phone').addClass('error-input');
}
}
//if there are no errors, submit the form, else display an error message
if(error == 0){
$('#result').html(';
$.ajax({
url: 'contact.php',
type: 'POST',
data: ({name: $('#name').val(),email: $('#email').val(), telno: $('#phone').val(), message: $('#message').val(),mode: )
Oops! There was an error submitting this form
"+msg+"");
}
//All done, return the button to normal
$('#btnSubmit').fadeTo('fast',1);
$('#btnSubmit').attr('disabled','');
});
//Basically a combination of jCarousel and jSquares - we want jCarousel to scroll between the list items - but fade in/out between animations. We then want jSquares to do it's magic and display descriptions on hover
//start work carousel
$('#carousel-careers').css({'visibility':'visible'});
$('#carousel-careers').jcarousel({
visible: 1,
scroll:1,
auto:30,
wrap: 'both',
buttonNextHTML:null,
buttonPrevHTML:null,
initCallback: display,
//uncomment this when we get more staff pics
itemLastOutCallback: {
onBeforeAnimation: fadeOut,
onAfterAnimation: fadeIn
}
});
if($('#accordion').length > 0){
$('#accordion').accordion();
}
jsquares();
});
function jsquares(){
if($('#js-container').length == 1){
$('#js-container').jsquares({
caption_slide_down: false,
caption_width: 330
});
}
}
//fade out carousel-careers
function fadeOut(a,b,c,d){
$('#carousel-careers').fadeOut("slow");
}
//make sure carousel-careers displays on start
function display(a,b){
$('#carousel-careers').css({'display':'block','opacity':1});
a.clip.hover(function() {
a.stopAuto();
}, function() {
a.startAuto();
});
}
//fade in carousel-careers and initiate jsquares
function fadeIn(a,b,c,d){
$('#carousel-careers').fadeTo("fast",1);
jsquares();
}
//This is the function called on .fancybox frame. Basically it just resets #banner to be the ul and reinstates the nivoSlider effect
function reload(){
var base_href = location.host+location.pathname;
$('#banner').replaceWith('');
$('#showcase').nivoSlider({
effect: 'random',
slices: 25,
animSpeed:500,
pauseTime:10000,
controlNav:false,
captionOpacity:0
});
}
