// Intro fade-in animation steps. Each {block} represents a "frame" with a variable timeout. "display", "opacity", and "zIndex" are CSS values
var INTRO_ANIMATION = [
  {"id": "intro1", "display": "block", "opacity": 1.00, "zIndex": 0, "timeout": 2000},
  {"id": "intro2", "display": "block", "opacity": 0.00, "zIndex": 1, "timeout": 42},
  {"id": "intro2", "display": "block", "opacity": 0.03, "zIndex": 1, "timeout": 42},
  {"id": "intro2", "display": "block", "opacity": 0.07, "zIndex": 1, "timeout": 42},
  {"id": "intro2", "display": "block", "opacity": 0.10, "zIndex": 1, "timeout": 42},
  {"id": "intro2", "display": "block", "opacity": 0.13, "zIndex": 1, "timeout": 42},
  {"id": "intro2", "display": "block", "opacity": 0.17, "zIndex": 1, "timeout": 42},
  {"id": "intro2", "display": "block", "opacity": 0.20, "zIndex": 1, "timeout": 42},
  {"id": "intro2", "display": "block", "opacity": 0.23, "zIndex": 1, "timeout": 42},
  {"id": "intro2", "display": "block", "opacity": 0.27, "zIndex": 1, "timeout": 42},
  {"id": "intro2", "display": "block", "opacity": 0.30, "zIndex": 1, "timeout": 42},
  {"id": "intro2", "display": "block", "opacity": 0.33, "zIndex": 1, "timeout": 42},
  {"id": "intro2", "display": "block", "opacity": 0.37, "zIndex": 1, "timeout": 42},
  {"id": "intro2", "display": "block", "opacity": 0.40, "zIndex": 1, "timeout": 42},
  {"id": "intro2", "display": "block", "opacity": 0.43, "zIndex": 1, "timeout": 42},
  {"id": "intro2", "display": "block", "opacity": 0.47, "zIndex": 1, "timeout": 42},
  {"id": "intro2", "display": "block", "opacity": 0.50, "zIndex": 1, "timeout": 42},
  {"id": "intro2", "display": "block", "opacity": 0.53, "zIndex": 1, "timeout": 42},
  {"id": "intro2", "display": "block", "opacity": 0.57, "zIndex": 1, "timeout": 42},
  {"id": "intro2", "display": "block", "opacity": 0.60, "zIndex": 1, "timeout": 42},
  {"id": "intro2", "display": "block", "opacity": 0.63, "zIndex": 1, "timeout": 42},
  {"id": "intro2", "display": "block", "opacity": 0.67, "zIndex": 1, "timeout": 42},
  {"id": "intro2", "display": "block", "opacity": 0.70, "zIndex": 1, "timeout": 42},
  {"id": "intro2", "display": "block", "opacity": 0.73, "zIndex": 1, "timeout": 42},
  {"id": "intro2", "display": "block", "opacity": 0.77, "zIndex": 1, "timeout": 42},
  {"id": "intro2", "display": "block", "opacity": 0.80, "zIndex": 1, "timeout": 42},
  {"id": "intro2", "display": "block", "opacity": 0.83, "zIndex": 1, "timeout": 42},
  {"id": "intro2", "display": "block", "opacity": 0.87, "zIndex": 1, "timeout": 42},
  {"id": "intro2", "display": "block", "opacity": 0.90, "zIndex": 1, "timeout": 42},
  {"id": "intro2", "display": "block", "opacity": 0.93, "zIndex": 1, "timeout": 42},
  {"id": "intro2", "display": "block", "opacity": 1.00, "zIndex": 1, "timeout": 42},
  {"id": "intro1", "display": "none", "opacity": 1.00, "zIndex": 0, "timeout": 0},
  {"id": "intro4", "display": "block", "opacity": 0.00, "zIndex": 1, "timeout": 42},
  {"id": "intro4", "display": "block", "opacity": 0.03, "zIndex": 1, "timeout": 42},
  {"id": "intro4", "display": "block", "opacity": 0.07, "zIndex": 1, "timeout": 42},
  {"id": "intro4", "display": "block", "opacity": 0.10, "zIndex": 1, "timeout": 42},
  {"id": "intro4", "display": "block", "opacity": 0.13, "zIndex": 1, "timeout": 42},
  {"id": "intro4", "display": "block", "opacity": 0.17, "zIndex": 1, "timeout": 42},
  {"id": "intro4", "display": "block", "opacity": 0.20, "zIndex": 1, "timeout": 42},
  {"id": "intro4", "display": "block", "opacity": 0.23, "zIndex": 1, "timeout": 42},
  {"id": "intro4", "display": "block", "opacity": 0.27, "zIndex": 1, "timeout": 42},
  {"id": "intro4", "display": "block", "opacity": 0.30, "zIndex": 1, "timeout": 42},
  {"id": "intro4", "display": "block", "opacity": 0.33, "zIndex": 1, "timeout": 42},
  {"id": "intro4", "display": "block", "opacity": 0.37, "zIndex": 1, "timeout": 42},
  {"id": "intro4", "display": "block", "opacity": 0.40, "zIndex": 1, "timeout": 42},
  {"id": "intro4", "display": "block", "opacity": 0.43, "zIndex": 1, "timeout": 42},
  {"id": "intro4", "display": "block", "opacity": 0.47, "zIndex": 1, "timeout": 42},
  {"id": "intro4", "display": "block", "opacity": 0.50, "zIndex": 1, "timeout": 42},
  {"id": "intro4", "display": "block", "opacity": 0.53, "zIndex": 1, "timeout": 42},
  {"id": "intro4", "display": "block", "opacity": 0.57, "zIndex": 1, "timeout": 42},
  {"id": "intro4", "display": "block", "opacity": 0.60, "zIndex": 1, "timeout": 42},
  {"id": "intro4", "display": "block", "opacity": 0.63, "zIndex": 1, "timeout": 42},
  {"id": "intro4", "display": "block", "opacity": 0.67, "zIndex": 1, "timeout": 42},
  {"id": "intro4", "display": "block", "opacity": 0.70, "zIndex": 1, "timeout": 42},
  {"id": "intro4", "display": "block", "opacity": 0.73, "zIndex": 1, "timeout": 42},
  {"id": "intro4", "display": "block", "opacity": 0.77, "zIndex": 1, "timeout": 42},
  {"id": "intro4", "display": "block", "opacity": 0.80, "zIndex": 1, "timeout": 42},
  {"id": "intro4", "display": "block", "opacity": 0.83, "zIndex": 1, "timeout": 42},
  {"id": "intro4", "display": "block", "opacity": 0.87, "zIndex": 1, "timeout": 42},
  {"id": "intro4", "display": "block", "opacity": 0.90, "zIndex": 1, "timeout": 42},
  {"id": "intro4", "display": "block", "opacity": 0.93, "zIndex": 1, "timeout": 42},
  {"id": "intro4", "display": "block", "opacity": 1.00, "zIndex": 1, "timeout": 42},
  {"id": "intro2", "display": "none", "opacity": 1.00, "zIndex": 0, "timeout": 0},
  {"id": "intro3", "display": "none", "opacity": 1.00, "zIndex": 0, "timeout": 0},
  {"id": "intro4", "display": "block", "opacity": 1.00, "zIndex": 10, "timeout": 0}
];
var SECTION_BUTTONS = {
  "landing_button_homeowners": {
    "slideid": "homeowners",
    "src": "/images/new.template/landing.button.homeowners.white.jpg",
    "activesrc": "/images/new.template/landing.button.homeowners.active.white.jpg"
  },
  "landing_button_homebuilders": {
    "slideid": "homebuilders",
    "src": "/images/new.template/landing.button.homebuilders.white.jpg",
    "activesrc": "/images/new.template/landing.button.homebuilders.active.white.jpg"
  },
  "landing_button_commercial": {
    "slideid": "commercial",
    "src": "/images/new.template/landing.button.commercial.white.jpg",
    "activesrc": "/images/new.template/landing.button.commercial.active.white.jpg"
  },
  "landing_button_about": {
    "slideid": "about",
    "src": "/images/new.template/landing.button.about.white.jpg",
    "activesrc": "/images/new.template/landing.button.about.active.white.jpg"
  },
  "landing_button_smarterroof": {
    "slideid": "smarterroof",
    "src": "/images/new.template/landing.button.smarterroof.white.jpg",
    "activesrc": "/images/new.template/landing.button.smarterroof.active.white.jpg"
  },
  "logo": {
    "slideid": "intro4",
    "src": "/images/new.template/logo.jpg",
    "activesrc": "/images/new.template/logo.jpg"
  }
};
var SLIDE_ZINDEX = 10;

function landing_init(anim_index) {
  if (!anim_index || typeof(anim_index) != "number") {
    anim_index = 0;
  }
  
  if (anim_index < INTRO_ANIMATION.length) {
    var frame = INTRO_ANIMATION[anim_index];
    var e = document.getElementById(frame.id);
    if (e) {
      e.style.opacity = frame.opacity;
      e.style.filter = "alpha(opacity=" + (frame.opacity * 100) + ")";
      e.style.zIndex = frame.zIndex;
      e.style.display = frame.display;
    }
    var t = window.setTimeout("landing_init(" + (anim_index + 1) + ")", frame.timeout);
  }
}

function section_button_init() {
  for (var id in SECTION_BUTTONS) {
    var section_button = SECTION_BUTTONS[id];
    
    var element = document.getElementById(id);
    if (element) {
      safe_addEventListener(element, "mouseover", section_button_mouseover);
      safe_addEventListener(element, "mouseout", section_button_mouseout);
    }
  }
}

function section_button_mouseover(event) {
  if (event == null) event = window.event;
  var element = event.srcElement ? event.srcElement : event.originalTarget;
  var section_button = SECTION_BUTTONS[element.id];
  if (section_button) {
    INTRO_ANIMATION = []; //Effectively cancels intro animation
    element.src = section_button.activesrc;
    var slide = document.getElementById(section_button.slideid);
    if (slide) {
      if (slide.style.zIndex != SLIDE_ZINDEX) {
        SLIDE_ZINDEX++;
        slide.style.zIndex = SLIDE_ZINDEX;
        slide.style.display = "block";
        fade(slide.id, 0.00, 1.00, 12, 42);
      }
    }
  }
}

function section_button_mouseout(event) {
  if (event == null) event = window.event;
  var element = event.srcElement ? event.srcElement : event.originalTarget;
  var section_button = SECTION_BUTTONS[element.id];
  if (section_button) {
    element.src = section_button.src;
  }
}

function fade(id, start_opacity, end_opacity, steps, timeout, current_step) {
  var element = document.getElementById(id);
  if (element) {
    if (!current_step) {
      current_step = 0;
    }
    
    if (current_step < steps) {
      var opacity = end_opacity;
      if (current_step != (steps - 1)) {
        var opacity = (start_opacity + ((end_opacity - start_opacity) * (current_step / steps)));
      }
      element.style.opacity = opacity;
      element.style.filter = "alpha(opacity=" + (opacity * 100) + ")";
      current_step++;
      var t = window.setTimeout("fade(\"" + id + "\", " + start_opacity + ", " + end_opacity + ", " + steps + ", " + timeout + ", " + current_step + ");", timeout);
    }
  }
}

function safe_addEventListener(obj, ev, func) {
  if (obj.addEventListener) {
    obj.addEventListener(ev, func, false);
  }
  else if (obj.attachEvent) {
    obj.attachEvent("on" + ev, func);
  }
}

// This executes with every page load
safe_addEventListener(window, "load", landing_init);
safe_addEventListener(window, "load", section_button_init);