var slideTime = 1000;
var order = ['Home', 'Portfolio', 'About', 'Services', 'Contact'];
var dir = { L : 'left', R: 'right' }

var prev = '';
var navs = {};
var stage = {};
var sliding_exit = sliding_enter = false;
var sendingMail = false;
var pages = [];

var showLoader = function() { $('#preloader').show(); }
var hideLoader = function() { $('#preloader').hide(); }

var exitPage = function(nav, toDir) {
  sliding_exit = !!$('#'+nav).length;
  $('#'+nav).hide( 'slide', {direction: toDir}, slideTime, function(){sliding_exit = false} );
}
var enterPage = function(nav, fromDir) {
  sliding_enter = !!$('#'+nav).length;
  $('#'+nav).show( 'slide', {direction: fromDir}, slideTime, function(){sliding_enter = false} );
}

var switchPages = function(_nav) {
  _dir = !prev ? dir.R : ( $(order).index(prev) < $(order).index(_nav) ? dir.R : dir.L);
  exitPage( 'nav-' + prev, _dir == dir.R ? dir.L : dir.R );
  enterPage( 'nav-' + _nav, _dir );
  $(navs[$(order).index(_nav)]).addClass('active');
  $(navs[$(order).index(prev)]).removeClass('active');
  prev = _nav;
}

var sendToStage = function(nav, contents) {
  pages[nav] = contents;
  pages[nav].id = 'nav-' + nav;
  $(pages[nav]).addClass('page');

  pageWrap = $('<div>')[0];
  $(pageWrap).addClass('pageWrap');
  $(pageWrap).append(pages[nav]);
  $('#stage').append(pageWrap);
}

var dynamicHtm = function(type, data) {
  htm = $('<div>')[0];
  (upper = $('<div>')[0]).id = 'upper_'+type;
  (bottom = $('<div>')[0]).id = 'bottom_'+type;
  $(bottom).addClass('darkgray_box');
  upper.innerHTML = '<div id="'+type+'_title"><img alt="'+type+'" src="images/'+type+'_title.png"/></div><div class="darkgray_box" id="'+type+'_wrap"><p class="gray_box"></p></div>';
  bottom.innerHTML = '<div id="tabs-'+type+'"><ul></ul></div>';

  $(upper).find('p.gray_box').html(data.text);
  ul = $(bottom).find('ul');
  tabsWrap = $(bottom).find('div#tabs-'+type);

  $(data.tabs).each(function(i) {
    j = i + 1;
    ul.append('<li><a href="#tabs-'+type+'-'+j+'">'+this.name+'</a></li>');
    (tab = $('<div>')[0]).id = 'tabs-'+type+'-'+j;
    $(tab).addClass('gray_box tab_size');
    tab.innerHTML = this.img == '' ?
      '<div class="tab_wrap"><div class="tab_upper_content"><div class="tab_position"><h3>'+this.name+'</h3><hr/></div></div><p>'+this.content+'</p></div>':
      '<div class="tab_wrap"><div class="tab_upper_content"><img alt="'+this.name+'" title="'+this.name+'" src="'+this.img+'" /><div class="tab_position"><h3>'+this.name+'</h3><hr/></div></div><p>'+this.content+'</p></div>';
    tabsWrap.append(tab);
  });

  $(htm).append(upper);
  $(htm).append(bottom);

  return htm;
}

var execAfterPreload = function(imgs, fn) {
  img = new Image();
  $(img).bind('load', function(){
    if (imgs.length > 0) img.src = imgs.shift();
    else fn();
  });
  if (imgs.length > 0) img.src = imgs.shift();
  else fn();
}


$(document).ready(function() {

  navs = $('#nav li a');
  stage = $('#stage');

  navs.each(function(){
    $(this).bind('click', function(){

      var nav = this.innerHTML;
      if (nav == prev) return false;
      if (sliding_exit || sliding_enter) return false;

      if (!pages[nav]) {
        showLoader();
        execAfterPreload( _IMGS[nav], function(){

          if (nav == 'About' || nav == 'Services') {
            var type = nav.toLowerCase();
            $.getJSON('includes/'+type+'.php', function(data){
              tempDiv = dynamicHtm(type, data);
              sendToStage(nav, tempDiv)
              $('#tabs-'+type).tabs({selected:0});
              hideLoader();
              switchPages(nav);
            });
            return false;
          }

          tempDiv = $('<div>')[0];
          $(tempDiv).load('includes/' + nav.toLowerCase() + '.php', null, function(htm){
            if (this.innerHTML) {
              sendToStage(nav, tempDiv)
              if (nav == "Contact") initContact();
              hideLoader();
              switchPages(nav);
             } else {
              // Page Load Error!
              hideLoader();
            }
          });

        });
      } else {
        hideLoader();
        switchPages(nav);
      }
      return false;
    });
  });

  $(navs[0]).trigger('click');

});

var _IMGS = {
  Home      : ['images/paintman_home.png',
               'images/logo_ndevco.png',
               'images/portfolio/ecardsPH_logo.jpg',
               'images/portfolio/condominiumsPH_Big_logo.jpg',
               'images/portfolio/domainingPH_logo.jpg',
               'images/portfolio/visitpalawan_com_Big_logo.jpg'],
  Portfolio : ['images/portfolio_title.png',
               'images/portfolio/ecardsPH_logo.jpg',
               'images/portfolio/condominiumsPH_Big_logo.jpg',
               'images/portfolio/domainingPH_logo.jpg',
               'images/portfolio/visitpalawan_com_Big_logo.jpg',
               'images/portfolio/caramoan_Big_logo.jpg',
               'images/portfolio/condotelPhil_com_logo.jpg',
               'images/portfolio/visittahiti_net_logo.jpg',
               'images/portfolio/visitthebahamas_com_logo.jpg'],
  About     : ['images/about_title.png',
               'images/profiles/god_father.jpg',
               'images/profiles/el_capo.jpg',
               'images/profiles/byte.jpg',
               'images/profiles/iron_man.jpg',
               'images/profiles/big_bird.jpg',
               'images/profiles/zaido.jpg'],
  Services  : ['images/services_title.png'],
  Contact   : ['images/contact_title.png']
}

var initContact = function() {
  var RecaptchaOptions={theme:'clean',tabindex:2};
  Recaptcha.create(
    "6LcHqwYAAAAAAGD7kYtRpjjoRZg-jBcZO9YtLPO4",
    "recaptcha_div", {
      theme: "clean"
    });
  $('#sendMsg').bind('click', function() {
    if (sendingMail) return false;
    showLoader();
    $.post('includes/send.php',
      $('#cform').serializeArray(), function(resp) {
        sendingMail = true;
        if (resp) {
          if (resp.ok) {
            $('#cform .fields').each(function(){this.value="";this.innerHTML=""});
            alert(resp.msg);
          } else {
            alert("Error : " + (resp.msg || "Unexpected Error Occured!") );
          }
        } else {
          alert("Error : Unexpected Error Occured!");
        }
        Recaptcha.reload();
        sendingMail = false;
        hideLoader();
      }, 'json');
  });
}