/*
  Author: Techocraft, Uroš Renko
  Dependencies: Prototype library 1.6+
*/

//
// getPageScroll()
// Returns array with x,y page scroll values.
// Core code from - quirksmode.org
//
function getPageScroll(){

	var yScroll;

	if (self.pageYOffset) {
		yScroll = self.pageYOffset;
	} else if (document.documentElement && document.documentElement.scrollTop){	 // Explorer 6 Strict
		yScroll = document.documentElement.scrollTop;
	} else if (document.body) {// all other Explorers
		yScroll = document.body.scrollTop;
	}

	arrayPageScroll = new Array('',yScroll) 
	return arrayPageScroll;
}

// -----------------------------------------------------------------------------------

//
// getPageSize()
// Returns array with page width, height and window width, height
// Core code from - quirksmode.org
// Edit for Firefox by pHaez
//
function getPageSize(){
	
	var xScroll, yScroll;
	
	if (window.innerHeight && window.scrollMaxY) {	
		xScroll = document.body.scrollWidth;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
	
	var windowWidth, windowHeight;
	if (self.innerHeight) {	// all except Explorer
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) { // other Explorers
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}	
	
	// for small pages with total height less then height of the viewport
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else { 
		pageHeight = yScroll;
	}

	// for small pages with total width less then width of the viewport
	if(xScroll < windowWidth){	
		pageWidth = windowWidth;
	} else {
		pageWidth = xScroll;
	}


	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
	return arrayPageSize;
}

var TcImageOverlay = Class.create(
{

  initialize: function(selector)
  {	
    /*
    selector = [css selector]
      ".MYCLASS img"
      "img"
      "img#myimageid"
      "img.myimageclass"
    */
		if (!document.getElementsByTagName)
    {
      // no elements in document
      return;
    }
    if (!selector)
    {
      // default css selector
      selector = "img";
    }
		var images = $$(selector);
    if (!images)
    {
      // no images by css selector found in document
      return;
    }

    images.each(
      function(image)
      {
        image.onclick = 
          function ()
          {
            objTcImageOverlay.start(this);
            return false;
          }
      }
    )

    var objBody = $(document.getElementsByTagName("body").item(0));

		var objOverlay = $(document.createElement("div"));
		objOverlay.setAttribute('id','tc-image-overlay');
    objOverlay.hide();
		objBody.appendChild(objOverlay);

    if (this.debug)
    {
      var objDebug = $(document.createElement("div"));
		  objDebug.setAttribute('id','tc-image-debug');
      objDebug.show();
  		objOverlay.appendChild(objDebug);
    }

		var objContainer = $(document.createElement("div"));
		objContainer.setAttribute('id','tc-image-container');
    //objContainer.setAttribute('onclick',"objTcImageOverlay.end(); return false;");
    objContainer.onclick = function () { objTcImageOverlay.end(); return false; };
    objContainer.hide(); 
		objBody.appendChild(objContainer);

		var objBox = $(document.createElement("div"));
		objBox.setAttribute('id','tc-image-box');
    objBox.setStyle('margin-left: auto; margin-right: auto;');
		objContainer.appendChild(objBox);

		var objImage = $(document.createElement("img"));
		objImage.setAttribute('id','tc-image');
    objImage.setStyle('border: 10px solid #FFFFFF');
    
		objBox.appendChild(objImage);

    this.body = objBody;
    this.overlay = objOverlay;
    this.container = objContainer;
    this.box = objBox;
    this.image = objImage;
    if (this.debug)
    {
      this.debug = objDebug;
    }
	},

  body: "undefined",
  overlay: "undefined",
  container: "undefined",
  box: "undefined",
  image: "undefined",
  maxsize: 500,
  sizeable: true,
  autosize: true,
  opacity: 0.7,
  overlayColor: "#000000",
  debug: false,
  
  aspectRatio: function()
  {
    var imgWidth = this.srcImage.getWidth();
    var imgHeight = this.srcImage.getHeight();
    var imgAspect = 0;
    if ((imgHeight!==0) && (imgWidth!==0))
    {
      if (imgWidth<imgHeight)
      {
        imgAspect = (imgWidth / imgHeight);
      } else
      {
        imgAspect = (imgHeight / imgWidth);
      }
    }
    if (this.debug)
    {
      this.debug.innerHTML += ' -- IMAGE_AR width=' + imgWidth + ', height=' + imgHeight + ', ratio=' + imgAspect;
    }
    return imgAspect;
  },

	start: function(objSrcImage)
  {
    if (!objSrcImage)
    {
      return;
    }
    this.srcImage = objSrcImage;
    objPageSize = getPageSize();
    var pWidth = objPageSize[0];
    var pHeight = objPageSize[1];
    var pageWidth = document.viewport.getWidth();
    var pageHeight = document.viewport.getHeight();
    if (this.debug)
    {
      this.debug.innerHTML = 'PAGE width=' + pageWidth + ', height=' + pageHeight;
      this.debug.innerHTML += ' PAGESIZE ' + objPageSize[0] + ', ' + objPageSize[1] + ', ' + objPageSize[2] + ', ' + objPageSize[3];
    }
    var ScrollOffsets = document.viewport.getScrollOffsets();
    var scrollLeft = ScrollOffsets[0];
    var scrollTop = ScrollOffsets[1];
    if (this.debug)
    {
      this.debug.innerHTML += ' -- SCROLL left=' + scrollLeft + ', top=' + scrollTop;
    }
    var doResize = false;
    this.image.setAttribute('src',objSrcImage.getAttribute('src'));
    if (this.sizeable==true)
    {
      var imgWidth = objSrcImage.getWidth();
      var imgHeight = objSrcImage.getHeight();
      if (this.debug)
      {
        this.debug.innerHTML += ' -- IMAGE width=' + imgWidth + ', height=' + imgHeight;
      }
      if (imgWidth>imgHeight)
      {
        if ((this.autosize==true) && (imgWidth<this.maxsize))
        {
          doResize = true;
        } else
        {
          if (imgWidth>this.maxsize)
          {
            doResize = true;
          }
        }
        if (doResize==true)
        {
          imgWidth = this.maxsize;
          imgHeight = imgWidth * this.aspectRatio();
        }
      } else
      {
        if ((this.autosize==true) && (imgHeight<this.maxsize))
        {
          doResize = true;
        } else
        {
          if (imgHeight>this.maxsize)
          {
            doResize = true;
          }
        }
        if (doResize==true)
        {
          imgHeight = this.maxsize;
          imgWidth = imgHeight * this.aspectRatio();
        }
      }
    }
    if (this.debug)
    {
      this.debug.innerHTML += ' -- RESIZE height=' + imgHeight + ', width=' + imgWidth;
    }
    this.overlay.setStyle('position: absolute; left: 0px; top: 0px; width: 100%; height: ' + pHeight + 'px; background-color: ' + this.overlayColor + '; z-index: 90; -ms-filter: alpha(opacity=' + (this.opacity*100) + '); filter: alpha(opacity=' + (this.opacity*100) + '); -moz-opacity: ' + this.opacity + '; opacity: ' + this.opacity + ';');
    this.container.setStyle('position: absolute; left: 0px; top: 0px; width: 100%; height: ' + pHeight + 'px; z-index: 100;');
    this.box.setStyle('margin-top: ' + (scrollTop + (pageHeight - imgHeight)  / 2) + 'px; width: ' + imgWidth + 'px;');
    this.image.setStyle('width: ' + imgWidth + 'px; height: ' + imgHeight + 'px;');
    this.container.show();
    this.overlay.show();
	},

	end: function()
  {
    this.container.hide();
		this.overlay.hide();
	}
});

function TcImageOverlayInit()
{ 
  objTcImageOverlay = new TcImageOverlay();
}

Event.observe(window, 'load', TcImageOverlayInit, false);