/*
This script is NOT freely available to copy or to distribute.
Copyright Joonas Viljanen 2010.
quickgallery.jv2.net
*/
var extraWidth = 30;
var extraHeight = 70;
var windowMargin = 30; 
var slideShowAutoStart = false;
var slideShowDuration = 6000;
var slideShowPlay = '<img src="?img=play" alt="play" />';
var slideShowPause = '<img src="?img=pause" alt="pause" />';
var items = new Array;
var el = new Array;
var currentImage;
var sshowTimer;
var sshowOn;
var dimensions = windowDimensions();
 


function addOverlay()
{
  dimensions = windowDimensions();
  
  addElement('div','overlay');
    el['overlay'].style.width = (dimensions['vWidth']+dimensions['sLeft'])+"px";
    el['overlay'].style.height = (dimensions['vHeight']+dimensions['sTop'])+"px";
    addElement('div','imgViewer','overlay');
      el['imgViewer'].style.width = "100px";
      el['imgViewer'].style.height = "100px";
      var topMargin = Math.floor((dimensions['vHeight']+dimensions['sTop']-100)/2);
      el['imgViewer'].style.marginTop = topMargin+'px';
      addElement('div','imgClose','imgViewer');
        addElement('div','imgCloseButton','imgClose');
          el['imgCloseButton'].innerHTML = "X";
          clickEventAttach('imgCloseButton',closeImageViewer);
      el['imgDiv'] = document.createElement('div');
      showLoading();
      el['imgViewer'].appendChild(el['imgDiv']);
  document.body.appendChild(el['overlay']);
  
  if(document.attachEvent)
    window.attachEvent('onresize',function(e){resizeViewer();});
  else if(document.addEventListener)
    window.addEventListener('resize',function(e){resizeViewer();},false);
  else
    window.onresize = function(e){resizeViewer();};
  
  if(document.attachEvent)
    document.attachEvent('onkeydown',function(e){eventKeyPress(e);});
  else if(document.addEventListener)
    document.addEventListener('keydown',function(e){eventKeyPress(e);},false);
  else
    document.onkeydown = function(e){eventKeyPress(e);};
  
};



function addElement(type,id,parentEl)
{
  el[id] = document.createElement(type);
  el[id].setAttribute('id',id);
  if(parentEl != null)
    el[parentEl].appendChild(el[id]);
}

function showLoading()
{
  el['imgDiv'].setAttribute('id','imgDiv');
  addElement('div','imgLoading');
  el['imgDiv'].appendChild(el['imgLoading']);
}

function getGalleryItems()
{
  var links = document.getElementsByTagName("a");
  for(var i=0; i<links.length; i++)
  {
    if(links[i].getAttribute("rel") != null && links[i].getAttribute("rel")=="g")
    {
      var t = new Object;
      t.href = unescape(links[i].getAttribute("href").replace(/\+/g,' ').replace(/\%23/,'#'));
      if(links[i].getAttribute("title") != null)
        t.title = links[i].getAttribute("title");
      if(links[i].getAttribute("caption") != null)
        t.caption = links[i].getAttribute("caption");
      if(links[i].getAttribute("author") != null)
        t.author = links[i].getAttribute("author");
      t.width = parseInt(getParameter(links[i],"width"));
      t.height = parseInt(getParameter(links[i],"height"));
      items.push(t);
    }
  }
}

function img(link)
{
  if(items.length < 1)
    getGalleryItems();
  
  var imgHref = unescape(link.href.replace(/\+/g,' '));
  
  for(var i=0; i<items.length; i++)
  {
    if( imgHref.indexOf(items[i].href) != -1 )
    {
      addOverlay();
      
      currentImage = i;
      showImg();
      break;
    }
  }
  return false;
}

function showImg()
{
  var i = currentImage;
  
  if(items[i] != null)
  {
    var loadImg = new Image();
    loadImg.onload = function()
    {
      
      // create image elements
      addElement('div','imgShow');
        addElement('img','img','imgShow');
      // create navigation elements
      addElement('div','imgNav');
        addElement('a','imgPrevious','imgNav');
        //el['imgPrevious'].setAttribute('href','#');
        addElement('a','imgNext','imgNav');
        //el['imgNext'].setAttribute('href','#');
      // create info elements 
      addElement('div','imgInfo');
        addElement('div','imgInfoLeft','imgInfo');
          addElement('div','imgTitle','imgInfoLeft');
          addElement('div','imgCaption','imgInfoLeft');
        addElement('div','imgInfoRight','imgInfo');
          addElement('div','imgAuthor','imgInfoRight');
          addElement('a','imgSlideShow','imgInfoRight');
          if(sshowOn && i < items.length-1)
            slideShowButtonPause();
          else if(i < items.length-1)
            slideShowButtonPlay();
          addElement('div','imgCount','imgInfoRight');
      
      // add next link if needed
      if(i < items.length-1)
      {
        clickEventAttach('imgNext',nextImage);
        el['imgNext'].style.display = 'block';
      }
      else
      {
        el['imgNext'].style.display = 'none';
      }
      // add previous link if needed
      if(i > 0)
      {
        clickEventAttach('imgPrevious',previousImage);
        el['imgPrevious'].style.display = 'block';
      }
      else
      {
        el['imgPrevious'].style.display = 'none';
      }
      
      resizeViewer();
            
      // set img attributes
      el['img'].src = loadImg.src;
      el['img'].style.display = "block";

      // set info values
      if(items[i].title != undefined)
        el['imgTitle'].innerHTML = items[i].title;
      if(items[i].caption != undefined)
        el['imgCaption'].innerHTML = items[i].caption;
      if(items[i].author != undefined)
        el['imgAuthor'].innerHTML = items[i].author;
      el['imgCount'].innerHTML = (i+1)+'/'+items.length;
      // remove loading and show image, nav and info
      el['imgDiv'].removeChild(el['imgLoading']);
      el['imgDiv'].appendChild(el['imgShow']);
      el['imgDiv'].appendChild(el['imgNav']);
      el['imgViewer'].appendChild(el['imgInfo']);
      
      if(slideShowAutoStart && !sshowOn)
      {
        sshowOn = true;
        slideShowButtonPause();
        sshowTimer = setTimeout("nextSlide()",slideShowDuration);
      }
      
    }
    href = items[i].href.replace(/\%/g,'%25').replace(/\#/g,'%23');

    loadImg.src = href;

  }
}


function clearImage()
{
  el['imgDiv'].removeChild(el['imgNav']);
  el['imgDiv'].removeChild(el['imgShow']);
  el['imgViewer'].removeChild(el['imgInfo']);
  showLoading();
}

function previousImage()
{
  if(sshowOn)
    stopSlideshow();
  clearImage();
  currentImage--;
  showImg();
  return false;
}
function nextImage()
{
  if(sshowOn)
    stopSlideshow();
  clearImage();
  currentImage++;
  showImg();
  return false;
}
function nextSlide()
{
  clearImage();
  currentImage++;
  showImg();
  if(sshowOn && currentImage < items.length-1)
    sshowTimer = setTimeout("nextSlide()",slideShowDuration);
  return false;
}

function startSlideshow()
{
  sshowOn = true;
  slideShowButtonPause();
  sshowTimer = setTimeout("nextSlide()",3000);
}
function stopSlideshow()
{
  sshowOn = false;
  clearTimeout(sshowTimer);
  slideShowButtonPlay();
}

function slideShowButtonPause()
{
  clickEventRemove('imgSlideShow',startSlideshow);
  clickEventAttach('imgSlideShow',stopSlideshow);
  el['imgSlideShow'].innerHTML = slideShowPause;
  el['imgSlideShow'].removeAttribute('class');
  el['imgSlideShow'].setAttribute('class','playing'); 
}
function slideShowButtonPlay()
{
  clickEventRemove('imgSlideShow',stopSlideshow);
  clickEventAttach('imgSlideShow',startSlideshow);
  el['imgSlideShow'].innerHTML = slideShowPlay;
  el['imgSlideShow'].removeAttribute('class');
  el['imgSlideShow'].setAttribute('class','stopped');
}

function closeImageViewer()
{
  if(sshowOn)
    stopSlideshow();
  document.body.removeChild(el['overlay']);
  el = new Array;
  document.body.style.overflow = "auto";
}


function getParameter(el,parameter)
{
  if(el.getAttribute("params") != null)
  {
    var parameters = el.getAttribute('params');
    var value;
    var parameterArray = parameters.split(',');
    var compareString = parameter+'=';
    var compareLength = compareString.length;
    for (var i = 0; i < parameterArray.length; i++) {
      if (parameterArray[i].substr(0, compareLength) == compareString) {
        var currentParameter = parameterArray[i].split('=');
        value = currentParameter[1];
        break;
      }
    }
    if (!value) return false;
    else return unescape(value);
  }
  else
    return null;
}

function clickEventAttach(id,functionName)
{
  if(el[id].attachEvent)
      el[id].attachEvent("onclick", functionName);
  else
    el[id].addEventListener("click", functionName , false);
}
function clickEventRemove(id,functionName)
{
  if(el[id].detachEvent)
      el[id].detachEvent("onclick", functionName);
  else
    el[id].removeEventListener("click", functionName , false);
}

function resizeViewer()
{
  dimensions = windowDimensions();
  
  el['overlay'].style.width = (dimensions['vWidth']+dimensions['sLeft'])+"px";
  el['overlay'].style.height = (dimensions['vHeight']+dimensions['sTop'])+"px";
    
  var newWidth = items[currentImage].width;
  var newHeight = items[currentImage].height;

  if( (dimensions['vHeight']-windowMargin) < (newHeight+ extraHeight) )
  {
    var newHeight = dimensions['vHeight'] - extraHeight - windowMargin;
    var sizeRatio = (newHeight / items[currentImage].height)
    var newWidth =  Math.floor(sizeRatio * items[currentImage].width)
  }
  if( (dimensions['vWidth']-windowMargin) < (newWidth + extraWidth) )
  {
    var newWidth = dimensions['vWidth'] - extraWidth - windowMargin;
    var sizeRatio = (newWidth / items[currentImage].width)
    var newHeight = Math.floor(sizeRatio * items[currentImage].height);
  }
  document.body.style.overflow = "hidden";
  var divWidth = newWidth + extraWidth;
  var divHeight = newHeight + extraHeight;
  var topMargin = dimensions['sTop'] + Math.floor((dimensions['vHeight']-divHeight)/2);
  
  el['img'].width = newWidth;
  el['img'].height = newHeight;
  el['imgViewer'].style.width = divWidth+'px';
  el['imgViewer'].style.height = divHeight+'px';
  el['imgViewer'].style.marginTop = topMargin+'px';
      
}

function windowDimensions()
{
  var dimensions = new Array;
  
  if(window.innerWidth) 
  {
    dimensions['vWidth'] = window.innerWidth;
    dimensions['vHeight'] = window.innerHeight;
    dimensions['sLeft'] = window.pageXOffset;
    dimensions['sTop'] =  window.pageYOffset;
  }
  else if (document.documentElement.clientHeight)
  {
    dimensions['vWidth'] = document.documentElement.clientWidth;
    dimensions['vHeight'] = document.documentElement.clientHeight;
    dimensions['sLeft'] = document.documentElement.scrollLeft;
    dimensions['sTop'] = document.documentElement.scrollTop;
  }
  else
  {
    dimensions['vWidth'] = document.body.clientWidth;
    dimensions['vHeight'] = document.body.clientHeight;
    dimensions['sLeft'] = document.body.scrollLeft,
    dimensions['sTop'] = document.body.scrollTop
  }
  
  return dimensions;
}

function eventKeyPress(e)
{
  if(e == null)
    var keycode = event.keyCode;
  else
    var keycode = e.which;
  
  if(keycode == 27)
    closeImageViewer();
  else if(keycode == 39)
    nextImage();
  else if(keycode == 37)
    previousImage();
  
}