/*

  lytehelper.js

  Extra lytebox functions to activate LyteBox through JavaScript code:

  function startLyteBox(href,title)
  function startLyteFrame(href,title,rev)
  function clickLink(id)

  This library also adds the following sizing options for lyteframes.

  The "rev" attribute now takes 2 types of size parameters:

  1. Width and height in pixels (same as before)
     This pertains to the actual viewing area of the frame, not including the borders.
     rev="width: 1024px; height: 768px;"

  2. Width and height as percentages.
     This is the percentage of the viewable area of the browser window, and includes the borders.
     rev="width: 80%; height: 90%;"

*/


function ImageLink() {
  this.href = '';
  this.title = '';
  this.rel = '';
  this.rev = '';
}

ImageLink.prototype.getAttribute = function(name) {
  return this[name];
};



function startLyteBox(href,title) {
  var imageLink = new ImageLink();
  imageLink.href = href;
  imageLink.rel = 'lytebox';
  imageLink.title = title;
  myLytebox.start(imageLink, false, false);
}

function startLyteFrame(href,title,rev) {
  var imageLink = new ImageLink();
  imageLink.href = href;
  imageLink.rel = 'lyteframe';
  imageLink.title = title;
  imageLink.rev = rev;
  myLytebox.start(imageLink, false, true);
}

function clickLink(id) {
  document.getElementById(id).onclick();
}


/*

  Override the changeContent method to allow percentages in frame height and width.

  Changes are marked with :Change: in comments.

*/


function percentToPx(percent,containerPixels) {
  percent = percent.substr(0, percent.indexOf('%'));
  return Math.floor(percent * containerPixels / 100);
}

function widthPercentToPx(width) {
  if (width.indexOf('%') >= 0) {
    return (percentToPx(width,myLytebox.getPageSize()[2]) - (2 * myLytebox.borderSize)) + 'px';
  } else
    return width;
}

function heightPercentToPx(height) {
  if (height.indexOf('%') >= 0)
    return (percentToPx(height,myLytebox.getPageSize()[3]) - (2 * myLytebox.borderSize) - document.getElementById('lbDetailsContainer').offsetHeight) + 'px';
  else
    return height;
}


LyteBox.prototype.changeContent = function(imageNum) {
	if (this.isSlideshow) {
		for (var i = 0; i < this.slideshowIDCount; i++) { window.clearTimeout(this.slideshowIDArray[i]); }
	}
	this.activeImage = this.activeSlide = this.activeFrame = imageNum;
	if (!this.outerBorder) {
		this.doc.getElementById('lbOuterContainer').style.border = 'none';
		this.doc.getElementById('lbDetailsContainer').style.border = 'none';
	} else {
		this.doc.getElementById('lbOuterContainer').style.borderBottom = '';
		this.doc.getElementById('lbOuterContainer').setAttribute((this.ie ? 'className' : 'class'), this.theme);
	}
	this.doc.getElementById('lbLoading').style.display = '';
	this.doc.getElementById('lbImage').style.display = 'none';
	this.doc.getElementById('lbIframe').style.display = 'none';
	this.doc.getElementById('lbPrev').style.display = 'none';
	this.doc.getElementById('lbNext').style.display = 'none';
	this.doc.getElementById('lbIframeContainer').style.display = 'none';
	this.doc.getElementById('lbDetailsContainer').style.display = 'none';
	this.doc.getElementById('lbNumberDisplay').style.display = 'none';
	if (this.navType == 2 || this.isLyteframe) {
		object = this.doc.getElementById('lbNavDisplay');
		object.innerHTML = '&nbsp;&nbsp;&nbsp;<span id="lbPrev2_Off" style="display: none;" class="' + this.theme + '">&laquo; prev</span><a href="#" id="lbPrev2" class="' + this.theme + '" style="display: none;">&laquo; prev</a> <b id="lbSpacer" class="' + this.theme + '">||</b> <span id="lbNext2_Off" style="display: none;" class="' + this.theme + '">next &raquo;</span><a href="#" id="lbNext2" class="' + this.theme + '" style="display: none;">next &raquo;</a>';
		object.style.display = 'none';
	}
	if (this.isLyteframe) {
		var iframe = myLytebox.doc.getElementById('lbIframe');
		var styles = this.frameArray[this.activeFrame][2];
		var aStyles = styles.split(';');
		for (var i = 0; i < aStyles.length; i++) {
			if (aStyles[i].indexOf('width:') >= 0) {
				var w = aStyles[i].replace('width:', '');
				iframe.width = widthPercentToPx( w.trim(), this.doc );           // :Change: Added function to convert % to px
			} else if (aStyles[i].indexOf('height:') >= 0) {
				var h = aStyles[i].replace('height:', '');
				iframe.height = heightPercentToPx( h.trim(), this.doc );         // :Change: Added function to convert % to px
			} else if (aStyles[i].indexOf('scrolling:') >= 0) {
				var s = aStyles[i].replace('scrolling:', '');
				iframe.scrolling = s.trim();
			} else if (aStyles[i].indexOf('border:') >= 0) {
				// Not implemented yet, as there are cross-platform issues with setting the border (from a GUI standpoint)
				//var b = aStyles[i].replace('border:', '');
				//iframe.style.border = b.trim();
			}
		}
		this.resizeContainer(parseInt(iframe.width), parseInt(iframe.height));
	} else {
		imgPreloader = new Image();
		imgPreloader.onload = function() {
			var imageWidth = imgPreloader.width;
			var imageHeight = imgPreloader.height;
			if (myLytebox.autoResize) {
				var pagesize = myLytebox.getPageSize();
				var x = pagesize[2] - 150;
				var y = pagesize[3] - 150;
				if (imageWidth > x) {
					imageHeight = Math.round(imageHeight * (x / imageWidth));
					imageWidth = x;
					if (imageHeight > y) {
						imageWidth = Math.round(imageWidth * (y / imageHeight));
						imageHeight = y;
					}
				} else if (imageHeight > y) {
					imageWidth = Math.round(imageWidth * (y / imageHeight));
					imageHeight = y;
					if (imageWidth > x) {
						imageHeight = Math.round(imageHeight * (x / imageWidth));
						imageWidth = x;
					}
				}
			}
			var lbImage = myLytebox.doc.getElementById('lbImage')
			lbImage.src = (myLytebox.isSlideshow ? myLytebox.slideArray[myLytebox.activeSlide][0] : myLytebox.imageArray[myLytebox.activeImage][0]);
			lbImage.width = imageWidth;
			lbImage.height = imageHeight;
			myLytebox.resizeContainer(imageWidth, imageHeight);
			imgPreloader.onload = function() {};
		}
		imgPreloader.src = (this.isSlideshow ? this.slideArray[this.activeSlide][0] : this.imageArray[this.activeImage][0]);
	}
};