var inlineLightbox = Class.create();

inlineLightbox.prototype = {

  initialize: function() { },
  
  create: function(elm, i) {
    this.index = i;
    
		this.objLightbox = document.createElement("div");
		this.objLightbox.className = 'lightbox';
		this.objLightbox.style.display = 'none';
		elm.insertBefore(this.objLightbox, elm.firstChild);

		this.objOuterImageContainer = document.createElement("div");
		this.objOuterImageContainer.className = 'outerImageContainer';
		this.objLightbox.appendChild(this.objOuterImageContainer);

		this.objImageContainer = document.createElement("div");
		this.objImageContainer.className = 'imageContainer';
		this.objOuterImageContainer.appendChild(this.objImageContainer);

		this.objLightboxImage = document.createElement("img");
		this.objLightboxImage.className = 'lightboxImage';
		this.objLightboxImage.setAttribute('lbId',i);
		this.objImageContainer.appendChild(this.objLightboxImage);

		this.objHoverNav = document.createElement("div");
		this.objHoverNav.className = 'hoverNav';
		this.objImageContainer.appendChild(this.objHoverNav);

		this.objPrevLink = document.createElement("a");
		this.objPrevLink.className = 'prevLink';
		this.objPrevLink.setAttribute('href','#');
		this.objPrevLink.setAttribute('lbId',i);
		this.objHoverNav.appendChild(this.objPrevLink);

		this.objNextLink = document.createElement("a");
		this.objNextLink.className = 'nextLink';
		this.objNextLink.setAttribute('href','#');
		this.objNextLink.setAttribute('lbId',i);
		this.objHoverNav.appendChild(this.objNextLink);

		this.objLoading = document.createElement("div");
		this.objLoading.className = 'loading';
		this.objImageContainer.appendChild(this.objLoading);

		this.objLoadingLink = document.createElement("a");
		this.objLoadingLink.className = 'loadingLink';
		this.objLoadingLink.setAttribute('href','#');
		this.objLoadingLink.setAttribute('lbId',i);
		this.objLoadingLink.onclick = function() { myInlineLightbox.lightboxes[this.getAttribute("lbId")].end(); return false; };
		this.objLoading.appendChild(this.objLoadingLink);

		this.objLoadingImage = document.createElement("img");
		this.objLoadingImage.setAttribute('src', fileLoadingImage);
		this.objLoadingLink.appendChild(this.objLoadingImage);

		this.objImageDataContainer = document.createElement("div");
		this.objImageDataContainer.className = 'imageDataContainer';
		this.objImageDataContainer.setAttribute('lbId',i);
		this.objLightbox.appendChild(this.objImageDataContainer);

		this.objImageData = document.createElement("div");
		this.objImageData.className = 'imageData';
		this.objImageDataContainer.appendChild(this.objImageData);

		this.objImageDetails = document.createElement("div");
		this.objImageDetails.className = 'imageDetails';
		this.objImageData.appendChild(this.objImageDetails);

		this.objCaption = document.createElement("span");
		this.objCaption.className = 'caption';
		this.objImageDetails.appendChild(this.objCaption);
	},

	//
	//	start()
	//	Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
	//
	start: function(imageLink) {

		hideSelectBoxes();
		
		this.imageArray = [];
		this.imageNum = 0;

		if (!this.objLightbox.parentNode.getElementsByTagName){ return; }
		var anchors = this.objLightbox.parentNode.getElementsByTagName('a');

		// if image is NOT part of a set..
		if((imageLink.getAttribute('rel') == 'inlinebox')){
			// add single image to imageArray
			this.imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));			
		} else {
		// if image is part of a set..

			// loop through anchors, find other images in set, and add them to imageArray
			for (var i=0; i<anchors.length; i++){
				var anchor = anchors[i];
				if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){
					this.imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));
				}
			}
			this.imageArray.removeDuplicates();
			while(this.imageArray[this.imageNum][0] != imageLink.getAttribute('href')) { this.imageNum++;}
		}

		Element.show(this.objLightbox);

		this.changeImage(this.imageNum);
	},

	//
	//	changeImage()
	//	Hide most elements and preload image in preparation for resizing image container.
	//
	changeImage: function(imageNum) {

		this.activeImage = imageNum;	// update global var

		// hide elements during transition
		Element.show(this.objLoading);
		Element.hide(this.objLightboxImage);
		Element.hide(this.objHoverNav);
		Element.hide(this.objPrevLink);
		Element.hide(this.objNextLink);
		Element.hide(this.objImageDataContainer);	

		this.imgPreloader = new Image();
		this.imgPreloader.index = this.index;

		// once image is preloaded, resize image container
		this.imgPreloader.onload=function(){
		  lb = myInlineLightbox.lightboxes[this.index];
  	  Element.setSrc(lb.objLightboxImage, lb.imageArray[lb.activeImage][0]);
			lb.resizeImageContainer(this.width, this.height, lb);
		}
		this.imgPreloader.src = this.imageArray[this.activeImage][0];
	},

	//
	//	resizeImageContainer()
	//
	resizeImageContainer: function(imgWidth, imgHeight) {
	  
		// get current height and width
		hCur = Element.getHeight(this.objOuterImageContainer);

		// scalars based on change from old to new
		yScale = (imgHeight / hCur) * 100;

		// calculate size difference between new and old image, and resize if necessary
		hDiff = hCur - imgHeight;

		if(!( hDiff == 0)){ new Effect.Scale(this.objOuterImageContainer, yScale, {scaleX: false, duration: resizeDuration, queue: 'front'}); }
		
		// if new and old image are same size and no scaling transition is necessary, 
		// do a quick pause to prevent image flicker.
		if(hDiff == 0){
			if (navigator.appVersion.indexOf("MSIE")!=-1){ pause(250); } else { pause(100);} 
		}

		Element.setHeight(this.objPrevLink, imgHeight);
		Element.setHeight(this.objNextLink, imgHeight);

		this.showImage();
	},

	//
	//	showImage()
	//	Display image and begin preloading neighbors.
	//
	showImage: function(){
	  
		Element.hide(this.objLoading);
		new Effect.Appear(this.objLightboxImage, { duration: 0.5, queue: 'end', afterFinish: function(effect){ myInlineLightbox.lightboxes[effect.element.getAttribute("lbId")].updateDetails(); } });
		this.preloadNeighborImages();
	},

	//
	//	updateDetails()
	//	Display caption, image number, and bottom nav.
	//
	updateDetails: function() {
	  
    if(this.imageArray[this.activeImage][1]) {
      Element.show(this.objCaption);
  		Element.setInnerHTML(this.objCaption, this.imageArray[this.activeImage][1]);

  		new Effect.Parallel(
  			[ new Effect.SlideDown(this.objImageDataContainer, { sync: true, duration: resizeDuration + 0.25, from: 0.0, to: 1.0 }), 
  			  new Effect.Appear(this.objImageDataContainer, { sync: true, duration: 1.0 }) ], 
  			{ duration: 0.65, afterFinish: function(effect) { myInlineLightbox.lightboxes[effect.effects[0].element.getAttribute("lbId")].updateNav();} } 
  		);
    } else
      this.updateNav();
		
	},

	//
	//	updateNav()
	//	Display appropriate previous and next hover navigation.
	//
	updateNav: function() {

		Element.show(this.objHoverNav);				

		// if not first image in set, display prev image button
		if(this.activeImage != 0){
			Element.show(this.objPrevLink);
			this.objPrevLink.onclick = function() {
			  lb = myInlineLightbox.lightboxes[this.getAttribute("lbId")];
				lb.changeImage(lb.activeImage - 1); return false;
			}
		}

		// if not last image in set, display next image button
		if(this.activeImage != (this.imageArray.length - 1)){
			Element.show(this.objNextLink);
			this.objNextLink.onclick = function() {
			  lb = myInlineLightbox.lightboxes[this.getAttribute("lbId")];
				lb.changeImage(lb.activeImage + 1); return false;
			}
		}
	},

	//
	//	preloadNeighborImages()
	//	Preload previous and next images.
	//
	preloadNeighborImages: function(){

		if((this.imageArray.length - 1) > this.activeImage){
			preloadNextImage = new Image();
			preloadNextImage.src = this.imageArray[this.activeImage + 1][0];
		}
		if(this.activeImage > 0){
			preloadPrevImage = new Image();
			preloadPrevImage.src = this.imageArray[this.activeImage - 1][0];
		}

	},

	//
	//	end()
	//
	end: function() {
		Element.hide(this.objLightbox);
		showSelectBoxes();
	}
};

var inlineLightboxFactory = Class.create();
inlineLightboxFactory.prototype = {

  initialize: function() { },
  
  create: function() {
  	if (!document.getElementsByTagName){ return; }
  	var anchors = document.getElementsByTagName('a');
  	
  	this.lightboxes = new Array();

  	// loop through all anchor tags
		var n = -1;
  	for (var i=0; i<anchors.length; i++){
  		var anchor = anchors[i];
		
  		var relAttribute = String(anchor.getAttribute('rel'));
		
  		// use the string.match() method to catch 'lightbox' references in the rel attribute
  		if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('inlinebox'))){
  			anchor.onclick = function () { myInlineLightbox.lightboxes[this.getAttribute("lbId")].start(this); return false;}
        var elm = this.getContainer($(anchor));
        if(!elm.select('.lightbox').length) {
			    n++;
          this.lightboxes[n] = new inlineLightbox();
          this.lightboxes[n].create(elm, n);
          this.lightboxes[n].start(anchor);
  			}
  			anchor.setAttribute("lbId", n);
  		}
  	}
  },

  getContainer: function(elm) {
    while(!elm.hasClassName('lightboxContainer') &&
          elm.tagName != 'body' &&
          !elm.hasClassName('innerarticle'))
      elm = $(elm.parentNode);
    return elm;
  }
};

function initInlineLightbox() { myInlineLightbox = new inlineLightboxFactory(); myInlineLightbox.create(); }
Event.observe($(window), 'load', initInlineLightbox, false);