/**
 * JavaScript by Jeffrey Ouma. Copyright© 2008 artkenya.net Ltd. All rights reserved.
 * 
 * Script name: image.js Purpose: Defines functions for handling and manipulating images.
 */
// Create the Bleez namespace
Bleez = {};
// Create the img namespace
Bleez.img = {};
Bleez.img.currentimage = 1;
/**
 * Variable name: fullsize. Purpose: Defines the fullsize panel which shows images represented by a thumbnail.
 */
Bleez.img.ShowFullSize = function(i) {
  // Hide all full size images to begin with
  var fs = YAHOO.util.Dom.getElementsByClassName("fullsize-image", "div", "fullsize");
  YAHOO.util.Dom.addClass(fs, "hide");
  // Set the title of the panel to the title of the thumbnail link
  var t = YAHOO.util.Dom.get("th" + i);
  var elm = YAHOO.util.Dom.get("fscaption");
  elm.innerHTML = t.title;
  elm = YAHOO.util.Dom.get("currentimage");
  elm.innerHTML = i;
  Bleez.img.currentimage = i;
  // Display the image with the selected index
  YAHOO.util.Dom.removeClass("fs" + i, "hide");
  var elmStyle = YAHOO.util.Dom.getStyle("fullsize_c", "visibility");
  var x = parseInt(YAHOO.util.Dom.getStyle("fs" + i, "width").replace(/px/, ""));
  var y = parseInt(YAHOO.util.Dom.getStyle("fs" + i, "height").replace(/px/, ""));
  if(elmStyle == "visible") {
    // Animate the fullsize panel to the new image's dimensions
    x = parseInt(x) + 20;
    var animContainer = new YAHOO.util.Anim(Bleez.img.fullsize.id, {
      width: {
        to: x,
        unit: "px"
      }
    }, 0.6, YAHOO.util.Easing.backOut);
    var h = parseInt(YAHOO.util.Dom.getStyle("fsimages", "height").replace(/px/, ""));
    if(h == y) {
      h = h + 1;
      var animImage = new YAHOO.util.Anim("fsimages", {
        height: {
          from: h,
          to: y,
          unit: "px"
        }
      }, 0.6, YAHOO.util.Easing.backIn);
    } else {
      var animImage = new YAHOO.util.Anim("fsimages", {
        height: {
          to: y,
          unit: "px"
        }
      }, 0.6, YAHOO.util.Easing.backOut);
    }
    var incrementWidth = function() {
      var w = YAHOO.util.Dom.getStyle(Bleez.img.fullsize.id, "width");
      w = parseInt(w.replace(/px/, ""));
      YAHOO.util.Dom.setStyle("fullsize_c", "width", w + "px");
      w = w - 20;
      YAHOO.util.Dom.setStyle("fsimages", "width", w + "px");
    };
    animContainer.onTween.subscribe(incrementWidth);
    animContainer.animate();
    animImage.animate();
  } else {
    // Display the fullsize image in the panel
    YAHOO.util.Dom.setStyle("fsimages", "width", x + "px");
    YAHOO.util.Dom.setStyle("fsimages", "height", y + "px");
    x = parseInt(x) + 20;
    // Bleez.img.fullsize.cfg.setProperty("width", x + "px");
    YAHOO.util.Dom.setStyle(Bleez.img.fullsize.id, "width", x + "px");
    YAHOO.util.Dom.setStyle("fullsize_c", "width", x + "px");
    YAHOO.util.Dom.removeClass("fullsize", "hide");
    Bleez.img.fullsize.show();
  }
};
/**
 * Function name: Init Purpose: Executes when the page loads after the DOM is ready. Performs initialization of any elements or values to
 * their default.
 */
Bleez.img.Init = function() {
  // Set the copyright year in the panel footer
  var c = Site.main.Copyright();
  if(c) {
    var elm = YAHOO.util.Dom.get("panelcopyright");
    elm.innerHTML = c.replace(/\s/, " ");
  }
  if(YAHOO.util.Dom.get("fullsize")) {
    Bleez.img.fullsize = new YAHOO.widget.Panel("fullsize", {
      close: true,
      visible: false,
      modal: true,
      fixedcenter: true,
      autofillheight: "body",
      constraintoviewport: true,
      draggable: true,
      effect: {
        effect: YAHOO.widget.ContainerEffect.FADE,
        duration: 0.25
      }
    });
    YAHOO.util.Dom.removeClass("fullsize", "hide");
    // Set the YUI ImageLoader Utility to preload all images with the "preload-image" class
    var imageGroup = new YAHOO.util.ImageLoader.group("th1", "mouseover", 2);
    imageGroup.className = "preload-image";
    // Render the fullsize panel
    Bleez.img.fullsize.render();
    YAHOO.util.Dom.addClass("fullsize", "hide");
    // Select all thumbnail links (elements with the "thumb-link" class)
    var thumbs = YAHOO.util.Dom.getElementsByClassName("thumb-link", "a", "yui-main");
    var elm = YAHOO.util.Dom.get("totalimages");
    elm.innerHTML = thumbs.length;
    // Loop through all thumbnail links and...
    for( var i = 1; i <= thumbs.length; i++) {
      // Add a trigger when the thumbnail link is moused over
      if(i > 1)
        imageGroup.addTrigger(thumbs[i - 1], "mouseover");
      // Attach a listener for the click event of each thumbnail link
      YAHOO.util.Event.addListener(thumbs[i - 1], "click", function(e) {
        // Find and display the full size image coresponding to the thumbnail that was clicked (this)
        var i = this.id.replace(/th/, "");
        Bleez.img.ShowFullSize(i);
        // Prevent the clicked link from opening in a new window as it is supposed to do if JS is disabled
        YAHOO.util.Event.preventDefault(e);
      });
    }
    YAHOO.util.Event.addListener("previmage-link", "click", function() {
      if(Number(Bleez.img.currentimage) > 1) {
        Bleez.img.ShowFullSize(Number(Bleez.img.currentimage) - 1);
      } else {
        var elm = YAHOO.util.Dom.get("totalimages");
        Bleez.img.ShowFullSize(elm.innerHTML);
      }
    });
    YAHOO.util.Event.addListener("nextimage-link", "click", function() {
      var elm = YAHOO.util.Dom.get("totalimages");
      if(Number(Bleez.img.currentimage) >= Number(elm.innerHTML)) {
        Bleez.img.ShowFullSize(1);
      } else {
        Bleez.img.ShowFullSize(Number(Bleez.img.currentimage) + 1);
      }
    });
  }
};
YAHOO.util.Event.onDOMReady(Bleez.img.Init);