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

//
// getPageScroll()
// Returns array with x,y page scroll values.
//
function getPageScroll()
{
  var scrOfX = 0;
  var scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) 
  {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) 
  {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) 
  {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
  }
  return [ scrOfX, scrOfY ];
}


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

//
// getPageSize()
// Returns array with page width, height and window width, height
//
function getPageSize()
{
  var PageScroll = getPageScroll();
	var xScroll = PageScroll[0];
  var yScroll = PageScroll[1];
  
  var windowWidth = 0
  var windowHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    windowWidth = window.innerWidth;
    windowHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    windowWidth = document.documentElement.clientWidth;
    windowHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    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.tc_adv_image";
    }
		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;background-color: #ffffff;');
		objContainer.appendChild(objBox);

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

    var objLabel = $(document.createElement("div"));
    objLabel.setAttribute('id','tc-image-label');
    objLabel.setStyle('width: 100%; background-color: #FFFFFF;float:left;');
    
    var objLabelContent = $(document.createElement("div"));
    objLabelContent.setAttribute('id','tc-image-label-content');
    objLabelContent.setStyle('color: #000000; font-size: 13px; margin: 0px 10px 10px 10px;line-height: 18px;');

		objBox.appendChild(objImage);
		objBox.appendChild(objLabel);
    objLabel.appendChild(objLabelContent);

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

  body: "undefined",
  overlay: "undefined",
  container: "undefined",
  box: "undefined",
  image: "undefined",
  maxsize: 960,
  sizeable: true,
  autosize: false,
  opacity: 0.6,
  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;
  },

  getSrcImgSize: function(imgSrc)
  {
    var newImg = new Image();
    newImg.src = imgSrc;
    return [ newImg.width, newImg.height ];
  },
  
  getImageByType: function(src, type)
  {
    if ((src==undefined) || (type==undefined))
    {
      return;
    }
    return src.replace('img',type);
  },
  
	start: function(objSrcImage)
  {
    if (!objSrcImage)
    {
      return;
    }
    this.srcImage = objSrcImage;
    var pageWidth = document.viewport.getWidth();
    var pageHeight = document.viewport.getHeight();
    objPageSize = getPageSize();
    var pWidth = objPageSize[0];
    var pHeight = objPageSize[1];
    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;
    }
    pHeight = pHeight + scrollTop;
    var doResize = false;
    var img_src = objSrcImage.getAttribute('src');
    var img_alt = objSrcImage.getAttribute('alt');
    img_src = this.getImageByType(img_src, 'large');
    this.image.setAttribute('src',img_src);
    if (img_alt==undefined)
    {
      this.labelContent.innerHTML = '';
    } else
    {
      this.labelContent.innerHTML = img_alt;
    }
    if (this.sizeable==true)
    {
      var imgWidth = this.image.width;
      var imgHeight = this.image.height;
      if (imgWidth==0)
      {
        var srcImageDim = this.getSrcImgSize(img_src);
        imgWidth = srcImageDim[0];
        imgHeight = srcImageDim[1];
      }
      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: 190; -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: 200;');
    if ((imgWidth!=0) || (imgHeight!=0))
    {
      this.box.setStyle('margin-top: ' + (scrollTop + (pageHeight - imgHeight)  / 2) + 'px; width: ' + (imgWidth+20) + 'px;');
      this.image.setStyle('width: ' + imgWidth + 'px; height: ' + imgHeight + 'px;');
    } else
    {
      this.box.setStyle('margin-top: ' + (scrollTop + (pageHeight - 520)  / 2) + 'px; width: ' + 710 + 'px;');
      this.image.setStyle('');
    }
    this.label.show();
    this.labelContent.show();
    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);