/*

  VPP Site JavaScript: Misc Functions
  
  Virtual Presence Post Web Site
  United States Department of State
  Last Edited: Sept 2007 by Darren W Krape (krapedw@state.gov)

*/

// Returns the number only pixel of a given item
var num = function(el, prop) {
  return parseInt($.css(el.jquery?el[0]:el,prop))||0;
};

// Returns the outerHeight of a given item
var outerHeight = function(element) {
  outerWidthResult = element.height() + num(element,'borderTopWidth') + num(element, 'borderBottomWidth') + num(element, 'paddingTop') + num(element, 'paddingBottom') + num(element, ',marginTop') + num(element, 'marginBottom');
  return outerWidthResult;
}

// Returns the outerWidth of a given item
var outerWidth = function(element) {
  outerWidthResult = element.width() + num(element,'borderLeftWidth') + num(element, 'borderRightWidth') + num(element, 'paddingLeft') + num(element, 'paddingRight') + num(element, ',marginLeft') + num(element, 'marginRight');
  return outerWidthResult;
}

//Toggles fade. From: http://yelotofu.com/2008/02/loving-jquery/
$.fn.fadeToggle = function(s, fn){
  return (this.is(":visible"))
    ? this.fadeOut(s, fn)
    : this.fadeIn(s, fn);
};

$.fn.popUp = function() {
  $(this).click(function () {  
    var hrefLocation = $(this).attr("href");
    window.open(hrefLocation, 'popup', 'toolbar=0,scrollbars=auto,location=1,statusbar=0,menubar=1,resizable=1,width=780,height=580,left=20,top=20');
    return false;
  });
};

// Tabbed Displays in which the tab is on the left (calendars, etc)
$.fn.tab = function() {
  this.each(function(){
    var columnWidth = $(this).parent().width();
    if(columnWidth < 600) var column = "narrow"; else var column = "wide";
    $(this).find(".box-body:eq(0)").addClass("modified " + column);

    var tabHeight = outerHeight($(this).find(".tab-nav:eq(0)"));
    var i = 0;
    while ((i + 1) <= $(this).find(".tab-content").length) {
      if(i != 0) {
        var moveTabHeight = tabHeight * i;
        $(this).find(".tab-content:eq(" + i + ")").css({marginTop:-moveTabHeight});
      }
      i++;
    };

  });
  $(".tab-nav").click(function () {  
    $(this).parent().parent().find("li").removeClass("active");
    $(this).parent().addClass("active");
    return false;
  });
};

//Tabbed Collection Boxes (Such as on the video, photo gallery or webchat pages)
$.fn.tabbedCollection = function() {

  var p = $(this);
  $(p).find(".collection-box li:eq(0)").addClass("active");

  $(p).find(".elements").hide();
  $(p).find(".elements:eq(0)").show();

  $(p).find(".collection-box li").click(function () {
    $(".collection-box li").removeClass("active");
    $(this).addClass("active");
  });

  $(p).find(".collection-nav li").click(function () {  
    $(this).parent().find("li").removeClass("active");
    $(this).addClass("active");

    var elementList = $(this).find("a").attr("href");
    $(p).find(".elements").hide();
    $(p).find(elementList).show();

    return false;
  });
};

//Quiz Function
$.fn.quiz = function () {
  p = this;
  var questionCurrent = 0;
  var questionsTotal = $(p).find(".question").length;
  $(p).find(".box-body").append("<div class='result'><p class='title'>Please choose an answer from the above choices.</p><p class='description'></div><div class='details'><span class='status'>Question 1 of " + questionsTotal + "</span> <a href='#' class='next button'>Next Question</a></div>");
  $(p).find(".question").slice(1,questionsTotal).hide();
  
  $(p).find(".answers li").click(function () {
    $(p).find(".result").show();
    if($(this).hasClass("correct")) {

      $(this).addClass("clicked-correct");
      $(p).find(".title").text("Congratulations, you are correct!").removeClass("incorrect").addClass("correct");
      $(p).find(".next").show();

      if((questionCurrent + 1) == questionsTotal) {
        $(p).find(".details .next").addClass("end").text("Thank you for taking our quiz");
        $(p).find(".status").text("Quiz End");
      }
      
      $(p).find(".question:eq(" + questionCurrent + ") .answers li:not(.correct)").hide();
     $(p).find(".result .description").replaceWith($(p).find(".question:eq(" + questionCurrent + ") .description"));

    } else {
      $(this).addClass("clicked-incorrect");
      $(p).find(".result .title").text("Sorry, you are incorrect. Please make another choice.").removeClass("correct").addClass("incorrect");
    }

    return false;
  });

  $(p).find(".next").click(function () {
    if(!((questionCurrent + 1) == questionsTotal)) {
      questionCurrent = questionCurrent + 1;
      $(p).find(".title, .result .description").text("");
      $(p).find(".result, .question, .next").hide();
      $(p).find(".status").text("Question " + (questionCurrent + 1) + " of " + questionsTotal);
      $(p).find(".question:eq(" + questionCurrent + ")").show();
    }
    return false;
  });
}

//Cycles through a set of images, the code to call this goes as follows:
$.fn.cycleGraphic = function(images,timeout) {

  if(images) {
    document.write("<div class='cycleGraphic'></div>");

    var preLoad = new Array();
    for (i = 0; i < images.length; i++) {
      preLoad[i] = new Image ();
      preLoad[i].src = images[i];
      $(".cycleGraphic").append("<img src='" + images[i] + "' style='position: absolute; display: none; z-index: 0;' />");
    }

    $(".cycleGraphic").css({width: "130px", height: "130px"});
    $(".cycleGraphic").find("img:eq(0)").css({zIndex: 1}).show();
    var settings = { timeout: timeout, current: 0 }
    setTimeout((function(){$.swap.cycleGraphic(images, settings);}),settings.timeout);
  }
}

$.swap.cycleGraphic = function(images,settings) {
  if (settings.current == (images.length - 1)) settings.current = 0; else settings.current = settings.current + 1;

  $(".cycleGraphic").find("img").css({zIndex: 0});
  $(".cycleGraphic").find("img:eq(" + settings.current + ")").css({zIndex: '1'}).fadeIn("slow",function() {
    $(".cycleGraphic").find("img:not(:eq(" + settings.current + "))").hide();
    setTimeout((function(){$.swap.cycleGraphic(images, settings);}),settings.timeout);
  });
}

$(function() {

  $(".tabbed").tab();

  //Preserves the mouse-over on top-level menu elements when hovering over children
  $("#menu ul ul").each(function(i){
    $(this).hover(function(){
      $(this).parent().find("a").slice(0,1).addClass("maintainHover"); 
    },function(){ 
      $(this).parent().find("a").slice(0,1).removeClass("maintainHover"); 
    });
  });

  // IE6 Fix: Drop-down fix due to lack of support for :hover on list elements
  if($.browser.msie && ($.browser.version < 7)) {
    $("#menu ul").each(function(i){
      $(this).find("li").hover(function(){
        $(this).find("ul").addClass("ieHover");
      },function(){ 
        $(this).find("ul").removeClass("ieHover"); 
      });
    });
  }

  // Social Bookmarking/Sharing Drop-down
  $(".share").click(function(){
    $("#share_social").insertBefore(this);    
    $(this).toggleClass("active");
    $("#share_social").toggle();
    return false;
  });

  // Email Drop-down
  $(".email").click(function(){
    $("#share_email").insertBefore(this);    
    $(this).toggleClass("active");
    $("#share_email").toggle();
    return false;
  });


  // IE6 Fix: Removes bottom borders (since :last-child is not supported) 
  if($.browser.msie && ($.browser.version < 7)) {
    $("#footer-top li:last-child").css({ border: "none" });
    $("#sub-menu li:last-child").css({ border: "none" });
    $("#menu-inside li:last-child").css({ border: "none", marginBottom: "0" });
  }

  //Zebra Striping for tables
  $("tr:nth-child(odd)").addClass("odd");

});