/**
 * Short Desc: MoBlast Home - Index JS
 *
 * Long Desc: Caches list of images, rotates them on homepage
 *
 * Author: Mark White (mark@moblast.com)
 * Copyright: 2010 Mo'Blast, Inc
 * Date: 9th April 2010
 * Version: 1.0
 */

var randomBanner;

$(document).ready(function() {

  // Setup L18N messages
  gt = new Gettext({
    'domain' : 'messages'
  });
  
  // Setup clicks for navbar to hide/show page content and icons
  $(".navbar").click(function() {
    var activePage = $(this).attr("id");
    $(".page").hide();
    $(".icon-holder").hide();
    $(".navbar").removeClass("active");
    $(".page." + activePage).show();
    $(".icon-holder." + activePage).show();
    $(this).addClass("active");
  });


});

$(window).load(function() {
  var html = '';
  // Brings all the remaining preloading into JS
  html += '<div id ="poker" class="header-image-holder-inner">';
  html += '<div class="header-image">';
  html += '<img src="images/home_header/header_poker.jpg" width="941" height="318" alt="" />';
  html += '</div>';
  html += '<div class="poker-graphics" id="poker-cards">';
  html += '<img src="images/home_header/poker_cards.png" width="129" height="99" alt="" />';
  html += '</div>';
  html += '<div class="poker-graphics" id="poker-badge1">';
  html += '<img src="images/home_header/poker_badge1.png" width="80" height="80" alt="" />';
  html += '</div>';
  html += '<div class="poker-graphics" id="poker-badge2">';
  html += '<img src="images/home_header/poker_badge2.png" width="80" height="80" alt="" />';
  html += '</div>';
  html += '<div class="poker-graphics" id="poker-badge3">';
  html += '<img src="images/home_header/poker_badge3.png" width="80" height="80" alt="" />';
  html += '</div>';
  html += '<div class="poker-graphics" id="poker-badge4">';
  html += '<img src="images/home_header/poker_badge4.png" width="80" height="80" alt="" />';
  html += '</div>;';
  html += '</div>';
  html += ' <div id ="flashcards" class="header-image-holder-inner">';
  html += '<div class="header-image">';
  html += '<img src="images/home_header/header_flashcard.jpg" width="901" height="318" alt="" />';
  html += '</div>';
  html += '<div class="flashcard-graphics" id="flash-logo">';
  html += '<img src="images/home_header/flash_logo.png" width="210" height="155" alt="" />';
  html += '</div>';
  html += ' <div class="flashcard-graphics" id="flash-tagline">';
  html += '<img src="images/home_header/flash_tagline.png" width="533" height="34" alt="" />';
  html += '</div>';
  html += '<div class="flashcard-graphics" id="flashcard1">';
  html += '<img src="images/home_header/flashcard1.jpg" width="150" height="200" alt="" />';
  html += '</div>';
  html += '<div class="flashcard-graphics" id="flashcard2">';
  html += '<img src="images/home_header/flashcard2.jpg" width="150" height="200" alt="" />';
  html += '</div>';
  html += '<div class="flashcard-graphics" id="flashcard3">';
  html += '<img src="images/home_header/flashcard3.jpg" width="150" height="200" alt="" />';
  html += '</div>';
  html += '<div class="flashcard-graphics" id="flashcard4">';
  html += '<img src="images/home_header/flashcard4.jpg" width="150" height="200" alt="" />';
  html += '</div>';
  html += '<div class="flashcard-graphics" id="flashcard5">';
  html += '<img src="images/home_header/flashcard5.jpg" width="150" height="200" alt="" />';
  html += '</div>';
  html += '</div>';
  html += '<div id ="taptin" class="header-image-holder-inner">';
  html += '<div class="header-image">';
  html += '<img src="images/home_header/header_taptin.jpg" width="901" height="318" alt="" />';
  html += '</div>';
  html += '<div class="taptin-graphics" id="taptin-logo">';
  html += '<img src="images/home_header/taptin_logo.png" width="0" height="0" alt="" />';
  html += '</div>';
  html += '<div class="taptin-graphics" id="taptin-cards">';
  html += '<img src="images/home_header/taptin_cards.png" width="0" height="0" alt="" />';
  html += '</div>';
  html += '<div class="taptin-graphics" id="taptin-title">';
  html += '<img src="images/home_header/taptin_title.png" width="0" height="0" alt="" />';
  html += '</div>';
  html += '<div class="taptin-graphics" id="taptin-tap">';
  html += '<img src="images/home_header/taptin_tap.png" width="126" height="41" alt="" />';
  html += '</div>';
  html += '<div class="taptin-graphics" id="taptin-in">';
  html += '<img src="images/home_header/taptin_in.png" width="62" height="41" alt="" />';
  html += '</div>';
  html += '<div class="taptin-graphics" id="taptin-and">';
  html += '<img src="images/home_header/taptin_and.png" width="0" height="0" alt="" />';
  html += '</div>';
  html += '<div class="taptin-graphics" id="taptin-win">';
  html += '<img src="images/home_header/taptin_win.png" width="0" height="0" alt="" />';
  html += '</div>';
  html += '</div>';

  html += '<div id="localshops" class="header-image-holder-inner">';
  html += '<div class="header-image local-5">';
  html += '<img src="images/home_header/localshops_sequence_6.jpg" width="901" height="318" alt="" />';
  html += '</div>';
  html += '<div class="header-image local-4">';
  html += '<img src="images/home_header/localshops_sequence_5.jpg" width="901" height="318" alt="" />';
  html += '</div>';
  html += '<div class="header-image local-3">';
  html += '<img src="images/home_header/localshops_sequence_4.jpg" width="901" height="318" alt="" />';
  html += '</div>';
  html += '<div class="header-image local-2">';
  html += '<img src="images/home_header/localshops_sequence_3.jpg" width="901" height="318" alt="" />';
  html += '</div>';
  html += '<div class="header-image local-1">';
  html += '<img src="images/home_header/localshops_sequence_2.jpg" width="901" height="318" alt="" />';
  html += '</div>';
  html += '<div class="header-image local-0">';
  html += '<img src="images/home_header/localshops_sequence_1.jpg" width="901" height="318" alt="" />';
  html += '</div>';
  html += '<div id="localshops-logo">';
  html += '<img src="images/home_header/local_logo.png" width="152" height="127" alt="" />';
  html += '</div>';
  html += '<div id="localshops-tagline">';
  html += '<img src="images/home_header/local_buylocal.png" width="520" height="50" alt="" />';
  html += '</div>';
  html += '<div class="localshops-graphics" id="local-bank">';
  html += '<img src="images/home_header/local_bank_icon.png" width="195" height="72" alt="" />';
  html += '</div>';
  html += '<div class="localshops-graphics" id="local-coffee">';
  html += '<img src="images/home_header/local_coffee_icon.png" width="195" height="72"  alt="" />';
  html += '</div>';
  html += '<div class="localshops-graphics" id="local-shopping">';
  html += '<img src="images/home_header/local_shopping_icon.png" width="195" height="72"  alt="" />';
  html += '</div>';
  html += '<div class="localshops-graphics" id="local-restaurant">';
  html += '<img src="images/home_header/local_restaurant_icon.png" width="195" height="72"  alt="" />';
  html += '</div>';
  html += '<div class="localshops-graphics" id="local-popular">';
  html += '<img src="images/home_header/local_popular_icon.png" width="195" height="72" alt="" />';
  html += '</div>';
  html += '</div>';

  html += '<div id="tmp" class="header-image-holder-inner">';
  html += '<div class="header-image">';
  html += '<img src="images/home_header/header_tmp.jpg" width="901" height="318" alt="" />';
  html += '</div>';
  html += '<div id="tmp-others" class="tmp-graphics">';
  html += '<img src="images/home_header/tmp_other.png" width="113" height="86" alt="" />';
  html += '</div>';
  html += '<div id="tmp-hours" class="tmp-graphics">';
  html += '<img src="images/home_header/tmp_hours.png" width="113" height="86" alt="" />';
  html += '</div>';
  html += '<div id="tmp-photos" class="tmp-graphics">';
  html += '<img src="images/home_header/tmp_photos.png" width="113" height="86" alt="" />';
  html += '</div>';
  html += '<div id="tmp-chances" class="tmp-graphics">';
  html += '<img src="images/home_header/tmp_chance.png" width="113" height="86" alt="" />';
  html += '</div>';
  html += '<div id="tmp-offers" class="tmp-graphics">';
  html += '<img src="images/home_header/tmp_offer.png" width="113" height="86" alt="" />';
  html += '</div>';
  html += '<div id="tmp-directory" class="tmp-graphics">';
  html += '<img src="images/home_header/tmp_directory.png" width="113" height="86" alt="" />';
  html += '</div> ';
  html += '<div id="tmp-tagline" class="tmp-graphics">';
  html += '<img src="images/home_header/tmp_tagline.png" width="600" height="35" alt="" />';
  html += '</div>';
  html += '</div>';


  html += '<div id="header-image-mask">';
  html += '<img src="images/mask_header.png" width="901" height="318" alt="" />';
  html += '</div>';

  $("#header-image-holder").html(html);

  switch(randomBanner) {
    case 0:
      animatePoker();
      break;
    case 1:
      animateFlashcards();
      break;
    case 2:
      animateTaptin();
      break;
    case 3:
      animateLocalshops();
      break;
    case 4:
      animateTMP();
      break;
  }
  
});

// Reset poker animation to starting point
function initPoker() {
  $("#poker-badge1").css("top", "320px");
  $("#poker-badge2").css("top", "320px");
  $("#poker-badge3").css("top", "320px");
  $("#poker-badge4").css("top", "320px");
  $("#poker-cards").hide();
  $("#poker").css("z-index", "90");
  $("#poker").css("opacity", "1");
}

// Poker animation
function animatePoker() {
  $("#poker-badge1").animate({
    top: 86
  }, 2000, 'easeOutBounce');
  setTimeout('$("#poker-badge2").animate({ top: 30}, 2000, "easeOutBounce");', 800);
  setTimeout('$("#poker-badge3").animate({ top: 30}, 2000, "easeOutBounce");', 1300);
  setTimeout('$("#poker-badge4").animate({ top: 86}, 2000, "easeOutBounce", function() {showCards();});', 2000);
}

// Shows cards after short delay
function showCards() {
  setTimeout('$("#poker-cards").show();', 500);
  $("#poker").css("z-index", "91");
  initFlashcards();
  setTimeout('wipePoker();', 4000);
}

// Wipes the poker header
function wipePoker() {
  $("#poker").animate({
    opacity: 0
  }, 1000, "linear", function() {
    setTimeout('animateFlashcards();', 1000);
  });
}

// Reset Flash animation to starting point
function initFlashcards() {
  $("#flash-logo").css("top", "-150px");
  $("#flash-tagline").css("top", "-32px");
  $("#flashcards").css("z-index", "90");
  $("#flashcards").css("opacity", "1");
  $("#flashcard1").css("left", "-150px");
  $("#flashcard1").css("top", "60px");
  $("#flashcard2").css("left", "-200px");
  $("#flashcard2").css("top", "-200px");
  $("#flashcard3").css("left", "375px");
  $("#flashcard3").css("top", "318px");
  $("#flashcard4").css("left", "545px");
  $("#flashcard4").css("top", "-200px");
  $("#flashcard5").css("left", "901px");
  $("#flashcard5").css("top", "60px");

}

// Flashcard animation
function animateFlashcards() {
  setTimeout('$("#flashcard1").animate({ left: 35, top: 60}, 2000, "easeOutElastic");', 800);
  setTimeout('$("#flashcard2").animate({ left: 205, top: 60}, 2000, "easeOutElastic");', 1300);
  setTimeout('$("#flashcard3").animate({ left: 375, top: 60}, 2000, "easeOutElastic");', 1900);
  setTimeout('$("#flashcard4").animate({ left: 545, top: 60}, 2000, "easeOutElastic");', 2300);
  setTimeout('$("#flashcard5").animate({ left: 715, top: 60}, 2000, "easeOutElastic", function() {setTimeout("flyawayFlashCardsFlyFlyFly();", 2000);});', 2800);
}

// Removes cards
function flyawayFlashCardsFlyFlyFly() {
  $("#flashcard1").animate({
    left: 600,
    top: -200
  }, 500, "linear");
  $("#flashcard2").animate({
    left: -150,
    top: 318
  }, 500, "linear");
  $("#flashcard3").animate({
    left: 918,
    top: 60
  }, 500, "linear");
  $("#flashcard4").animate({
    left: 100,
    top: -200
  }, 500, "linear");
  $("#flashcard5").animate({
    left: 450,
    top: 318
  }, 500, "linear", function() {
    showFlashcardLogo();
  });
}

// Show logo and tagline after slight delay
function showFlashcardLogo() {
  setTimeout('$("#flash-logo").animate({top: 30}, 1500, "easeOutElastic")', 500);
  setTimeout('$("#flash-tagline").animate({top: 240}, 1500, "easeOutBounce")', 500);
  $("#flashcards").css("z-index", "91");
  initTaptin();
  setTimeout('wipeFlashcards();', 5000);
}

// Wipes the flashcards header
function wipeFlashcards() {
  $("#flashcards").animate({
    opacity: 0
  }, 1000, "linear", function() {
    animateTaptin();
  });
}

// Reset taptin animation to starting point
function initTaptin() {
  $("#taptin").css("z-index", "90");
  $("#taptin").css("opacity", "1");
  $("#taptin-logo").css("top", "121px");
  $("#taptin-logo").css("left", "231px");
  $("#taptin-logo img").css("width", "0");
  $("#taptin-logo img").css("height", "0");

  $("#taptin-cards img").css("width", "0");
  $("#taptin-cards img").css("height", "0");
  $("#taptin-cards").css("top", "133px");
  $("#taptin-cards").css("left", "690px");

  $("#taptin-title").css("top", "255px");
  $("#taptin-title").css("left", "230px");
  $("#taptin-title img").css("width", "0");
  $("#taptin-title img").css("height", "0");
  $("#taptin-tap").css("top", "235px");
  $("#taptin-tap").css("left", "120px");
  $("#taptin-tap img").css("width", "126px");
  $("#taptin-tap img").css("height", "41px");
  $("#taptin-tap").hide();
  $("#taptin-in").css("top", "235px");
  $("#taptin-in").css("left", "278px");
  $("#taptin-in").hide();
  $("#taptin-in img").css("width", "62px");
  $("#taptin-in img").css("height", "41px");
  $("#taptin-and img").css("width", "0");
  $("#taptin-and img").css("height", "0");
  $("#taptin-and").css("top", "265px");
  $("#taptin-and").css("left", "705px");

  $("#taptin-win img").css("width", "0");
  $("#taptin-win img").css("height", "0");
  $("#taptin-win").css("top", "265px");
  $("#taptin-win").css("left", "778px");

  
}

// Taptin animation
function animateTaptin() {
  $("#taptin-logo img").animate({
    height: 183,
    width: 182
  }, 2000, "easeInExpo");
  $("#taptin-logo").animate({
    top: 30,
    left: 140
  }, 2000, "easeInExpo");

  setTimeout('$("#taptin-title img").animate({height: 41, width: 220}, 2000, "easeInExpo");', 1000);
  setTimeout('$("#taptin-title").animate({top: 235, left: 120}, 2000, "easeInExpo", function() {setTimeout("animateTaptinLogo();", 1000);});', 1000);
}


// Animates Taptin logo from over there, to over here
function animateTaptinLogo() {
  $("#taptin-cards img").animate({
    width: 239,
    height: 185
  }, 1500, "easeInOutCubic");
  $("#taptin-cards").animate({
    top: 45,
    left: 570
  }, 1500, "easeInOutCubic");


  $("#taptin-tap").show();
  $("#taptin-tap").animate({
    top: 255,
    left: 558
  }, 1500,  "easeInOutCubic");
  $("#taptin-tap img").animate({
    height: 20,
    width: 63
  }, 1500,  "easeInOutCubic");
  $("#taptin-in").show();
  $("#taptin-in").animate({
    top: 255,
    left: 630
  }, 1500,  "easeInOutCubic");
  $("#taptin-in img").animate({
    height: 20,
    width: 31
  }, 1500,  "easeInOutCubic", function() {
    setTimeout("showTaptinTagline();", 500);
  });
}

// Shows final elements of tagline
function showTaptinTagline() {
  $("#taptin-and img").animate({
    width: 69,
    height: 20
  }, 500, "easeInOutCubic");
  $("#taptin-and").animate({
    top: 255,
    left: 670
  }, 500, "easeInOutCubic");

  setTimeout('$("#taptin-win").animate({top: 255, left: 745}, 500, "easeInOutCubic");', 500);
  setTimeout('$("#taptin-win img").animate({height: 20, width: 66}, 500, "easeInOutCubic");', 500);
  $("#taptin").css("z-index", "91");
  initLocalshops();
  setTimeout('wipeTaptin();', 5000);
}

// Wipes the taptin header
function wipeTaptin() {
  $("#taptin").animate({
    opacity: 0
  }, 1000, "linear", function() {
    setTimeout('animateLocalshops();', 2000);
  });
}



// Reset localshops animation to starting point
function initLocalshops() {
  $(".localshops-graphics").css({
    opacity: 1,
    left: 902
  });
  $("#localshops-tagline").css({
    left: 902
  });
  $("#localshops .header-image").css({
    opacity: 1
  });
  $("#localshops-logo-holder").css("left", "902px");
  $("#localshops").css("z-index", "90");
  $("#localshops").css("opacity", "1");
}

// Localshops animation
function animateLocalshops() {
  $("#local-bank").animate({
    left: 680
  }, 1000,  "easeInOutCubic", function(){
    setTimeout('$("#local-bank").animate({opacity: 0}, 500, function() {animateCoffee();})', 2000);
  });
  setTimeout('$(".local-0").animate({opacity: 0}, 2000)', 2000);
}

function animateCoffee() {
  $("#local-coffee").animate({
    left: 680
  }, 1000,  "easeInOutCubic", function(){
    setTimeout('$("#local-coffee").animate({opacity: 0}, 500, function() {animateShopping();})', 2000);
  });
  setTimeout('$(".local-1").animate({opacity: 0}, 2000)', 2000);
}

function animateShopping() {
  $("#local-shopping").animate({
    left: 680
  }, 1000,  "easeInOutCubic", function(){
    setTimeout('$("#local-shopping").animate({opacity: 0}, 500, function() {animateRestaurant();})', 2000);

  });
  setTimeout('$(".local-2").animate({opacity: 0}, 2000)', 2000);
}

function animateRestaurant() {
  $("#local-restaurant").animate({
    left: 680
  }, 1000,  "easeInOutCubic", function(){
    setTimeout('$("#local-restaurant").animate({opacity: 0}, 500, function() {animatePopular();})', 2000);

  });
  setTimeout('$(".local-3").animate({opacity: 0}, 2000)', 2000);
}

function animatePopular() {
  $("#local-popular").animate({
    left: 680
  }, 1000,  "easeInOutCubic", function(){
    setTimeout('$("#local-popular").animate({opacity: 0}, 500, function() {showLocalshopsTagline();})', 2000);

  });
  setTimeout('$(".local-4").animate({opacity: 0}, 2000)', 2000);
}


function showLocalshopsTagline() {
  $("#localshops-tagline").animate({
    left: 355
  }, 2000,  "easeInOutCubic");
  setTimeout('wipeLocalshops();', 5000);
}

// Wipes the localshops header
function wipeLocalshops() {
  $("#localshops").css("z-index", "91");
  initTMP();
  $("#localshops").animate({
    opacity: 0
  }, 1000, "linear", function() {
    setTimeout('animateTMP();', 2000);
  });
}

// Initialises TMP banner
function initTMP() {
  $("#tmp-hours").css({
    top: -86
  });
  $("#tmp-offers").css({
    top: -86
  });
  $("#tmp-directory").css({
    top: -86
  });
  $("#tmp-chances").css({
    top: -86
  });
  $("#tmp-photos").css({
    top: -86
  });
  $("#tmp-others").css({
    top: -86
  });
  $("#tmp").css("z-index", "90");
  $("#tmp").css("opacity", "1");
  $("#tmp-tagline").css({
    left: 740
  });
}

// Animates TMP banner
function animateTMP() {
  $("#tmp-offers").animate({
    top: 25
  }, 1500, "easeInOutCubic");
  setTimeout('$("#tmp-directory").animate({top: 25}, 1500, "easeInOutCubic");', 1500);
  setTimeout('$("#tmp-chances").animate({top: 96}, 1500, "easeInOutCubic");', 3000);
  setTimeout('$("#tmp-photos").animate({top: 96}, 1500, "easeInOutCubic");', 4500);
  setTimeout('$("#tmp-hours").animate({top: 167}, 1500, "easeInOutCubic");', 6000);
  setTimeout('$("#tmp-others").animate({top: 167}, 1500, "easeInOutCubic", function(){showTMPTagline();});', 7500);
}

// Shows TMP tagline
function showTMPTagline() {
  initPoker();
  $("#tmp-tagline").animate({
    left: 270
  }, 2000,  "easeInOutCubic");
  setTimeout('wipeTMP();', 5000);
}

// Wipes the TMP Banner
function wipeTMP() {
  $("#tmp").animate({
    opacity: 0
  }, 1000, "linear", function() {
    setTimeout('animatePoker();', 2000);
  });
}