/*
 * This script is writen by Michael Buckley.
 * Home page: http://codefisher.org/web_applications/center_square

 * The code contained in these files are licensed under the
 * Attribution-ShareAlike 3.0 Unported. 

 * Furthermore;
 * You may not claim the works as your own.
 * You must provide a link back to codefisher.org when using on a website.
 * You may not redistribute these as a package as-is..
 * You must seek approval for commercial purposes, and for applications. 
 * 
 * Please don't remove this from this file.
 * if you want to contact me please use my contact page
 * http://codefisher.org/email 
 *
 * If you modify this script please give me credit for the original script.
 *
 * Linking back to me should you use this script is appreicated and required
 */

 /* change these setting as you need */

  /* a value from 0 to 1, sets how dard the 
   * background becomes.  A value of 1 is fully black */
  var shade_darkness = 0.6;

  /* I put html pages for every image
   * in /image/ and the images in /images/ so */
  var square_href_from = '/image/';
  var square_href_to = '/images/';

 /* close button image */
  var square_close = 'http://codefisher.org/images/webapps/close.png';

  /* the location of some images that need to br preloaded */
   var preload_image = new Array();
   preload_image[0] = '/images/webapps/loading.gif';
   preload_image[1] = '/images/webapps/close.png';

 /* don't edit after this point */

 var shade_interval;
 var image_interval;

 /* finds all links to apply Center Square too */
 function init_center_square(){
  var links = document.links;
  var i = 0;
  while(links[i]){
   try {
    if(links[i].getAttribute('rel').match(/CenterSquare/)){
     setEventListener(links[i],'click',center_square,true);
    }
   } catch(e) {}
   i++;
  }
  var i = 0;
  var img = document.createElement('img');
  img.style.display = 'none';
  while(preload_image[i]){
   var preloader = img.cloneNode(true);
   preloader.src = preload_image[i];
   preloader = document.body.appendChild(preloader);
   i++;
  }
 }

 /* creates the center square */
 function center_square(aEvent) {
  if(!document.shade){
   var shade = document.createElement('div');
   shade.id = 'center-square-shade';
   shade.style.height = (document.documentElement.scrollHeight) + 'px';
   shade.style.width = (document.documentElement.scrollWidth) + 'px';
   document.shade = document.body.appendChild(shade);
   setEventListener(document.body,'click',center_square_remove,true);
  }
  shade_interval = setInterval(show_shade,5);
  var center_square = document.createElement('div');
  center_square.id = 'center-square';
  center_square.style.top = (document.documentElement.scrollTop + 40) + 'px';
  document.centerSquare = document.body.appendChild(center_square);

  var target = getEventTarget(aEvent);
  var href = get_center_square_url(target);
  var image = document.createElement('img');
  image.src = href;
  image.style.display = 'none';
  image = document.centerSquare.appendChild(image);
  document.centerSquare.image = image;

  var closeButton = document.createElement('img');
  closeButton.src = square_close;
  closeButton.className = 'close';
  document.centerSquare.close = document.centerSquare.appendChild(closeButton);
  document.centerSquare.close.style.display = 'none';
  setEventListener(document.centerSquare.close,'click',center_square_remove,true);
  if(image.complete) {
   center_square_image_load();
  } else {
   setEventListener(image,'load',center_square_image_load,true);
  }
  return noAction(aEvent);
 }

 /* get the width and height of the image then start the effects */
 function center_square_image_load(aEvent){
  var image = document.centerSquare.image;
  if(image.naturalHeight){
   var height = image.naturalHeight;
   var width = image.naturalWidth;
  } else {
   image.style.display = 'block';
   var height = image.height;
   var width = image.width;
   image.style.display = 'none';
  }
  document.centerSquare.heightTo = height;
  document.centerSquare.heightAt = 200;
  document.centerSquare.widthTo = width;
  document.centerSquare.widthAt = 200;

  image_interval = setInterval(display_center_image,10);
 }

 /* get the link to the image */
 function get_center_square_url(aTarget){
  while(aTarget.tagName != 'A' && aTarget.tagName != 'a'){
   aTarget = aTarget.parentNode;
  }
  return aTarget.href.replace(square_href_from, square_href_to);
 }

 /* all the nice effects on the center square */
 function display_center_image(){
  var center_square = document.centerSquare;
  var image = center_square.image;
  if(center_square.heightAt < center_square.heightTo){
   if((center_square.heightTo - center_square.heightAt) > 7.5){
    var new_height = center_square.heightAt + 7.5;
   } else {
    var new_height = center_square.heightTo;
   }
    center_square.heightAt = new_height;
    center_square.style.height = new_height + 'px';
  } else if(center_square.widthAt < center_square.widthTo){
   if((center_square.widthTo - center_square.widthAt) > 7.5){
    var new_width = center_square.widthAt + 7.5;
   } else {
    var new_width = center_square.widthTo;
   }
    center_square.widthAt = new_width;
    center_square.style.width = new_width + 'px';
    center_square.style.marginLeft = '-' + (new_width/2) + 'px';
    center_square.pi = 0;
  } else if(center_square.pi < 20) {
    center_square.style.backgroundImage = 'none';
    var new_height = center_square.heightTo + (40 * Math.sin((Math.PI/40)*center_square.pi));
    center_square.style.height = new_height + 'px';
    center_square.pi++;
    image.opacity = 0;
    image.style.opacity = 0;
    image.style.filter = 'alpha(opacity=0)';
    image.style.display = 'block';
  } else if(image.opacity < 1) {
   image.style.display = 'block';
   center_square.close.style.display = 'block';
   var opacity = parseFloat(image.opacity) + 0.075;
   if(isNaN(opacity)){
    opacity = 0;
   }
   image.style.filter = 'alpha(opacity=' + (opacity * 100) +')';
   image.style.opacity = opacity;
   image.opacity = opacity;
  } else {
   clearInterval(image_interval);
  }
 }

 /* crates the background shade */
 function show_shade(){
  document.shade.style.display = 'block';
  var opacity = parseFloat(document.shade.style.opacity) + (shade_darkness/15);
  if(isNaN(opacity)){
   opacity = 0;
  }
  if(opacity < (shade_darkness + (shade_darkness/15))){
   document.shade.style.filter = 'alpha(opacity=' + (opacity * 100) +')';
   document.shade.style.opacity = opacity;
  } else {
   clearInterval(shade_interval);
  }
 }

 /* destroys the center square */
 function center_square_remove(aEvent){
  if(getEventTarget(aEvent) == document.shade || getEventTarget(aEvent).className == 'close'){
   clearInterval(shade_interval);
   document.shade.style.display = 'none';
   document.shade.style.opacity = 0;
   document.body.removeChild(document.centerSquare);
  }
 }

 /* prevent an event from doing anything */
 function noAction(event){
  if(event.cancelBubble){
   event.cancelBubble = true;
  } else {
   try { 
    event.stopPropagation();
    event.preventDefault();
   } catch(e) {}
  }
  return false;
 }

 /* get the event target */
 function getEventTarget(aEvent){
  if(aEvent.srcElement){
   var target = aEvent.srcElement;
  } else {
   var target = aEvent.target;
  }
  return target;
 }

 /* set an event listener */
 function setEventListener(item,event,func,bool) {
  if(item.addEventListener){
	item.addEventListener(event,func,bool);
  } else {
	item.attachEvent('on'+event,func,bool);
  }
 }

 /* start it */
 setEventListener(window,'load',init_center_square,true);