' + mainTitle;
// Current brands
for( var brand_key in brand_results ){
delay++;
html += buildResult(brand_results[brand_key].brand,brand_results[brand_key].name,brand_results[brand_key].distance,brand_results[brand_key].slug,true);
}
// Only do the next part if we have alternatives
if( other_results != 'all' ){
// Increase the delay for the title
delay++;
// Title
html += '
' + secondaryTitle;
// Other brands
for( var other_key in other_results ){
delay++;
html += buildResult(other_results[other_key].brand,other_results[other_key].name,other_results[other_key].distance,other_results[other_key].slug,true);
}
}
// We now add in the closing div's for all those open flip divs.
for( i = 0; i <= delay; i++ ){
html += '
';
}
total = delay;
}else{
//////////////////////////
// NON 3D VERSION
// Create the first line
var html = '
' + mainTitle;
for( var brand_key in brand_results ){
html += buildResult(brand_results[brand_key].brand,brand_results[brand_key].name,brand_results[brand_key].distance,brand_results[brand_key].slug,false);
}
// Only do the next part if we have alternatives
if( other_results != 'all' ){
// Title
html += secondaryTitle;
// Other brands
for( var other_key in other_results ){
html += buildResult(other_results[other_key].brand,other_results[other_key].name,other_results[other_key].distance,other_results[other_key].slug,false);
}
}
// Close the wrapper
html += '
';
}
// Build the individual results
function buildResult(sBrand,lBrand,dist,slug,threeD){
threeD = threeD ? '
' : '';
var brandType = o.brand == sBrand ? '' : '
(' + eab(sBrand) + ')';
function eab(b){
if( b == 'barandgrill' ) b = 'Bar & Grill';
else if( b == 'classic' ) b = 'Classic';
else if( b == 'burgers' ) b = 'Burgers';
else if( b == 'cafe' ) b = 'Café';
else if( b == 'stop' ) b = 'Stop';
return 'Giraffe ' + b;
}
return threeD + '
';
}
// Show the results container
$results.show();
// Do we need to do the bar?
if( !bar ){
// Start the ANIMATING!
$bar.css({
'width': $form.outerWidth(),
'height': 0
}).animate({
'height': 4
},50,'easeInOutExpo',function(){
$bar.animate({
'width': 960
},400,'easeInOutExpo',function(){
buildResults();
});
});
}else{
buildResults();
}
function buildResults(){
// Hide any messages
if( error ){
message('hide');
}
if( result ){
hideResults(function(){
beginBuild();
});
}else{
beginBuild();
}
function beginBuild(){
// Remove any existing results, if there are any by accident, bug.
$results.find('.flip:first').remove();
$results.find('#results_wrapper').remove();
// Add in the new results
$results.prepend(html);
if( fancy3d ){
//////////////////////////
// 3D VERSION
// Find the last flip
var $last = $results.children('.flip');
while( $last.length ){
$last = $last.children('.flip');
}
$last.end().bind({
'webkitAnimationEnd': function(){
// Remove this listener
$(this).unbind('webkitAnimationEnd');
// Remove the flipDown animation class, and use the static active class
$results.removeClass('flipdown').addClass('active');
endBuild();
}
}).find('.result').addClass('last');
$results.addClass('flipdown');
}else{
//////////////////////////
// NON 3D VERSION
$wrapper = $('#results_wrapper');
// Add the class of last
$results.find('.result:last-child').addClass('last');
// Animate this sucka!
var wHeight = $wrapper.height();
$wrapper.css({
'height': 0
}).animate({
'height': wHeight
},600,'easeInOutExpo',function(){
// Clean stuff up for later
$wrapper.removeAttr('style');
// End the build
endBuild();
});
}
// Activate the full clickable link thingy
$results.find('.result').click(function(){
window.location = $(this).find('.white_link').attr('href');
});
}
// Show the close toggle, set some classes and re-enable the search
function endBuild(){
// Show the close tag
$close = $('
',{
'id': 'search_close',
'href': '#',
'title': 'Click here to close',
'html': '
Close'
}).appendTo($results).click(function(e){
$overlay.click();
e.preventDefault();
});
cHeight = $close.innerHeight();
$results.css({
'padding-bottom': cHeight + 10
});
$close.css({
'bottom': cHeight + 10,
'margin-left': Math.round( 0 - $close.width() / 2 )
}).animate({
'bottom': 20
},600,'easeInOutExpo').hover(function(){
if( !searchBan ){
$(this).stop([]).animate({
'bottom': 10
},400,'easeInOutExpo');
}
},function(){
if( !searchBan ){
$(this).stop([]).animate({
'bottom': 20
},400,'easeInOutExpo');
}
});
// Allow another search
searchBan = false;
// We have a result
result = true;
error = false;
// And a bar
bar = true;
}
}
}
});
}
e.preventDefault();
});
// Set up the overlay to hide everything if clicked
$overlay.click(function(){
if( !searchBan ){
searchBan = true;
if( result ){
hideResults(function(){
cleanup();
});
}else if( error ){
message('hide',function(){
cleanup();
});
}
}
});
//////////////////////////
// HIDE THE RESULTS
function hideResults(callback){
if( fancy3d ){
//////////////////////////
// 3D VERSION
// Set up a count
var i = 0;
// Invert the delays
$results.find('.flip').each(function(){
$(this).css({
'-webkit-animation-delay': ( ( total - i ) * o.delayOut ) + 's'
});
i++;
if( i == total ){
i = 0;
$results.find('.flip:first-child').bind({
'webkitAnimationEnd': function(){
// The listener detects all child animations as well, so we have to wait till the end
i++;
// The end?
if( i == total ){
// Unbind the listener and get rid of it
$(this).unbind('webkitAnimationEnd').remove();
// All gone
$results.removeClass('rollup');
// No more results
result = false;
// Fire the callback! BOOM!
if( callback ) callback.apply($results);
}
}
});
removeClose(function(){
// Start animation
$results.removeClass('active').addClass('rollup');
});
}
});
}else{
//////////////////////////
// NON 3D VERSION
removeClose(function(){
$wrapper.animate({
'height': 0
},600,'easeInOutExpo',function(){
$wrapper.remove();
// No more results
result = false;
// Fire the callback! BOOM!
if( callback ) callback.apply($results);
});
});
}
function removeClose(callback){
// Hide the close tag
$close.stop([]).animate({
'bottom': cHeight + 10
},400,'easeInBack',function(){
$close.remove();
if( callback ) callback.apply($close);
});
}
}
//////////////////////////
// MESSAGES
function message(title,content,eg,callback){
// Hide the loading spinner
$loading.fadeOut(200);
// If there is a message, we need to hide it first
if( error ){
// Remove any existing messages
$message.animate({
'margin-top': 0 - $message.outerHeight(),
'opacity': 0
},300,'easeInExpo',function(){
// Get rid
$message.remove();
if( title != 'hide' ){
build();
}else{
// No more errors
error = false;
// Callback
if( content ) content.apply($message);
}
});
}else if( result ){
hideResults(function(){
if( title != 'hide' ) build();
// Hide the bar if needed
if( bar ) hideBar();
});
}else{
if( title != 'hide' ) build();
}
// Hide the bar if needed
if( bar && !result ) hideBar();
function build(){
// Build the HTML
var html = '';
// If the content exists, add it to the HTML
if( title ) html += '
' + title + '
Close';
if( content ) html += '
' + content.replace('!','!
') + '
';
// Do we need the eg list?
if( eg ) html += '
- A full UK postcode
- A town, city or village in the UK
- A famous landmark (e.g: Nelsons Column)
';
// Build the message and show it
$message = $('
',{
'id': 'search_message',
'class': 'paper shadow',
'html': html
}).appendTo('body').show().css({
'opacity': 0
});
// Close button
$message.find('.button').click(function(){
$overlay.click();
return false;
});
// Now show it (can't do it all in one go as we can't get metrics from an object unless it's been created!
$message.animate({
'margin-top': 0 - Math.round( $message.outerHeight() / 2 ),
'opacity': 1
},600,'easeOutExpo',function(){
// Allow another search
searchBan = false;
// We have error!
error = true;
result = false;
// Callback
if( callback ) callback.apply($message);
});
}
}
//////////////////////////
// HIDE THE BAR
function hideBar(callback){
$bar.animate({
'width': $form.outerWidth()
},400,'easeInOutExpo',function(){
$bar.animate({
'height': 0
},50,'easeInOutExpo',function(){
// Reset the bar
$bar.removeAttr('style');
// No more bar
bar = false;
if( callback ) callback.apply($bar);
});
});
}
//////////////////////////
// CLEANUP TIME
function cleanup(){
$form.removeClass('active');
$input.val('');
// Hide the decorative bar thingy if needed
if( bar ){
hideBar(function(){
// Hide the results div
$results.hide();
hideOverlay();
});
}else{
hideOverlay();
}
function hideOverlay(){
// Fade out the overlay
$overlay.fadeOut(200,function(){
// Allow another search
searchBan = false;
});
}
}
}
activateSearch();
});
//////////////////////////
// CHECK FOR 3D
// Thanks to http://www.modernizr.com/
function supports3d() {
// borrowed from modernizr
var div = document.createElement('div'),
ret = false,
properties = ['perspectiveProperty', 'WebkitPerspective'];
for (var i = properties.length - 1; i >= 0; i--){
ret = ret ? ret : div.style[properties[i]] != undefined;
};
// webkit has 3d transforms disabled for chrome, though
// it works fine in safari on leopard and snow leopard
// as a result, it 'recognizes' the syntax and throws a false positive
// thus we must do a more thorough check:
if (ret){
var st = document.createElement('style');
// webkit allows this media query to succeed only if the feature is enabled.
// "@media (transform-3d),(-o-transform-3d),(-moz-transform-3d),(-ms-transform-3d),(-webkit-transform-3d),(modernizr){#modernizr{height:3px}}"
st.textContent = '@media (-webkit-transform-3d){#test3d{height:3px}}';
document.getElementsByTagName('head')[0].appendChild(st);
div.id = 'test3d';
document.body.appendChild(div);
ret = div.offsetHeight === 3;
st.parentNode.removeChild(st);
div.parentNode.removeChild(div);
}
return ret;
}
}
})(jQuery);