/*******************************************************************************

Wertago Website, application.js (12/15/2008)
(c) 2008 BuzaMoto. All rights reserved.

*******************************************************************************/

// ----------------------------------------------------------------------------
// GLOBALS
// ----------------------------------------------------------------------------
var OVERLAY_OPACITY = 0.9;
var loaded_images = {};
//var faqs = ['faq_Android', 'faq_iPhone', 'faq_Facebook'];
var faqs = ['faq_Android', 'faq_iPhone'];
  
Position.getWindowSize = function(w) {
  var width, height;
  w = w ? w : window;
  width = w.innerWidth || (w.document.documentElement.clientWidth || w.document.body.clientWidth);
  height = w.innerHeight || (w.document.documentElement.clientHeight || w.document.body.clientHeight);
  return { width: width, height: height };
}


// ----------------------------------------------------------------------------
// Join/Login
// ----------------------------------------------------------------------------
function toggleJoinLoginMenu(evt) {
  if (!$('join_login-fields').visible())
    showJoinLoginMenu();
  else
    hideJoinLoginMenu();
  Event.stop(evt);
}

function showJoinLoginMenu() {
  new Effect.SlideDown('join_login-fields', {
    duration: 0.2,
    beforeStart: function() {
      showOverlay();
      $('join_login-button').addClassName('selected');
    }
  });
}

function hideJoinLoginMenu() {
  new Effect.SlideUp('join_login-fields', {
    duration: 0.2,
    beforeStart: function() {
      $('join_login-button').removeClassName('selected');
    },
    afterFinish: function() {
      hideOverlay();
    }
  });
}


// ----------------------------------------------------------------------------
// Overlay
// ----------------------------------------------------------------------------
function showOverlay() {
  new Effect.Appear('overlay', {
    duration: 0.2,
    from: 0.0,
    to: OVERLAY_OPACITY
  });
}

function hideOverlay() {
  new Effect.Fade('overlay', { duration: 0.2 });
}


// ----------------------------------------------------------------------------
// Image Pop
// ----------------------------------------------------------------------------
function showImage(imagename) {
  if (!loaded_images[imagename]) {
    loaded_images[imagename] = new Image();
    loaded_images[imagename].src = "images/screen/" + imagename + ".png";
  }
  $('image_frame-image').src = loaded_images[imagename].src;
  showOverlay();
  displayImage(loaded_images[imagename]);
}

function displayImage(img) {
  if (img.complete) {
    new Effect.Appear('image_frame-wrapper', { duration: 0.2 });
  } else {
    window.setTimeout(function() {displayImage(img)}, 100);
  }
}

function closeImage() {
  new Effect.Fade('image_frame-wrapper', {
    duration: 0.2,
    afterFinish: function() { hideOverlay(); }
  });
}


// ----------------------------------------------------------------------------
// FAQ
// ----------------------------------------------------------------------------
function hideAllFAQ() {
  faqs.each(function(faq) {
    $(faq+"-content").hide();
    $(faq).removeClassName('selected');
  });
}

function faqTitle(element_id) {
  var faqName = element_id.substring(4);
  return faqName + " FAQ";
}

function showFAQ(e) {
  // hide FAQ content
  var faq = $(e.element().id+'-content');
  new Effect.Parallel([
    new Effect.BlindUp('help_content', { sync: true }),
    new Effect.Opacity('help_content', { sync: true, from: 1, to: 0 })
  ], {
    duration: 0.2,
    afterFinish: function() {
      // switch FAQ content
      hideAllFAQ();
      e.element().addClassName('selected');
      faq.show();
      $('faq_title').update(faqTitle(e.element().id));
      new Effect.Parallel([
        new Effect.BlindDown('help_content', { sync: true }),
        new Effect.Opacity('help_content', { sync: true, from: 0, to: 1 })
      ], { duration: 0.2 });
    }
  });
  Event.stop(e);
}


// ----------------------------------------------------------------------------
// ONLOAD
// ----------------------------------------------------------------------------
Event.observe(window, 'load', function() {
  // all pages
  if ($('join_login-button'))
    $('join_login-button').observe('click', toggleJoinLoginMenu);
  if ($('overlay'))
    $('overlay').setStyle({opacity: OVERLAY_OPACITY});
  
  // help page
  if ($('help-wrapper'))
    faqs.each(function(faq) { $(faq).observe('click', showFAQ); });
});