var lightbox = {};

lightbox.Init = function ()
{
    lightbox.div = document.getElementById ('lightbox');
    lightbox.linkStart = document.getElementById ('start');
	lightbox.areaStart = document.getElementById ('startSlide');
    lightbox.thumbs = lightbox.div.getElementsByTagName ('img');

    lightbox.images = null;
    lightbox.imagesDesc = null;

    lightbox.timeoutSpeed = 45;    // per second
    lightbox.imageIndex = 0;
    lightbox.imageWidth = 0;
    lightbox.imageHeight = 0;
    lightbox.imageOpacity = 0;
    lightbox.backscreenOpacity = 0;
    lightbox.imgCurrent = null;

    lightbox.divBackscreen = null;
    lightbox.divDisplayContainer = null;
    lightbox.divDisplay = null;
    lightbox.divDisplayScreen = null;
    lightbox.divImageContainer = null;
    lightbox.divDesc = null;
    lightbox.pDesc = null;
    lightbox.textDesc = null;
    lightbox.textIndex = null;
    lightbox.divLeftBtn = null;
    lightbox.divRightBtn = null;
    lightbox.linkCloseBtn = null;

    lightbox.SetupImages ();
    lightbox.CreateLightbox ();

    setTimeout (lightbox.SetupListeners, 500);

};

/*------------------------------------
  AddEventListener
  ------------------------------------*/
lightbox.AddEventListener = function (target, type, listener)
{
    if (typeof target.addEventListener != 'undefined')
        target.addEventListener (type, listener, false);
    else if (typeof target.attachEvent != 'undefined')
    {
        type = 'on' + type;
        target.attachEvent (type, listener);
    }
};

/*------------------------------------
  BtnClickLeft
  ------------------------------------*/
lightbox.BtnClickLeft = function ()
{
    lightbox.imageIndex -= 1;
    if (lightbox.imageIndex < 0)
        lightbox.imageIndex = lightbox.thumbs.length -1;

    lightbox.ResizeDisplay ();
};

/*------------------------------------
  BtnClickRight
  ------------------------------------*/
lightbox.BtnClickRight = function ()
{
    lightbox.imageIndex += 1;
    if (lightbox.imageIndex > lightbox.thumbs.length -1)
        lightbox.imageIndex = 0;

    lightbox.ResizeDisplay ();
};

/*------------------------------------
  BtnMouseOverLeft
  ------------------------------------*/
lightbox.BtnMouseOverLeft = function ()
{
    lightbox.divLeftBtn.getElementsByTagName ('img')[0].src = 'files/lightbox_images/left.png';
    document.body.style.cursor = 'pointer';
};

/*------------------------------------
  BtnMouseOutLeft
  ------------------------------------*/
lightbox.BtnMouseOutLeft = function ()
{
    lightbox.divLeftBtn.getElementsByTagName ('img')[0].src = 'files/lightbox_images/leftOff.png';
    document.body.style.cursor = 'default';
};

/*------------------------------------
  BtnMouseOverRight
  ------------------------------------*/
lightbox.BtnMouseOverRight = function ()
{
    lightbox.divRightBtn.getElementsByTagName ('img')[0].src = 'files/lightbox_images/right.png';
    document.body.style.cursor = 'pointer';
};

/*------------------------------------
  BtnMouseOutRight
  ------------------------------------*/
lightbox.BtnMouseOutRight = function ()
{
    lightbox.divRightBtn.getElementsByTagName ('img')[0].src = 'files/lightbox_images/rightOff.png';
    document.body.style.cursor = 'default';
};

/*------------------------------------
  CreateLightbox
  ------------------------------------*/
lightbox.CreateLightbox = function ()
{
  // create backscreen div
    var div = document.createElement ('div');
    div.style.width = '100%';
    div.style.height = '200%';
    div.style.backgroundColor = '#000';
    div.style.position = 'absolute';
    div.style.top = '0';
    div.style.left = '0';
    div.style.opacity = '0';
    div.style.filter = 'alpha(opacity=0)';
    div.style.visibility = 'hidden';

    lightbox.divBackscreen = div;
    document.body.appendChild (lightbox.divBackscreen);

  // create display container
    div = document.createElement ('div');
    div.style.width = '100%';
    div.style.height = '200%';
    div.style.position = 'absolute';
    div.style.top = '0';
    div.style.left = '0';
    div.style.zIndex = 2;
    div.style.visibility = 'hidden';
    div.style.fontSize = '12px';
    div.style.fontFamily = 'Verdana';
	div.style.textAlign = 'center';

    lightbox.divDisplayContainer = div;
    document.body.appendChild (lightbox.divDisplayContainer);

  // create display div
    div = document.createElement ('div');
    div.style.width = '30%'
    div.style.height = '0%';
    div.style.position = 'relative';
    div.style.marginTop = '80px';
    div.style.marginLeft = 'auto';
    div.style.marginRight = 'auto';
    div.style.backgroundColor = '#FFF';
    div.style.padding = '8px';
	div.style.textAlign = 'left';
    
    lightbox.divDisplay = div;
    lightbox.divDisplayContainer.appendChild (lightbox.divDisplay);

  // create current image and image container
    var img = document.createElement ('img');
    img.style.width = '100%';
    img.style.height = '0%';
    img.style.backgroundColor = '#FFF';
    lightbox.imgCurrent = img;

    div = document.createElement ('div');
    div.style.width = '100%';
    div.style.height = '100%';
    
    lightbox.divImageContainer = div;
    lightbox.divDisplay.appendChild (lightbox.divImageContainer);

    lightbox.divImageContainer.appendChild (lightbox.imgCurrent);

  //create left and right button divs
    for (var i=0; i < 2; i++) {
        var div = document.createElement ('div');
        div.style.width = '35%';
        div.style.height = '92%';
        div.style.padding = '8px';

        if (i) {
            div.style.cssFloat = 'left';
            div.style.styleFloat = 'left';
            lightbox.divLeftBtn = div;

            var img = document.createElement ('img');
            img.src = 'files/lightbox_images/leftOff.png';
            img.style.marginTop = '60%';
            img.style.marginLeft = '2%';
			img.style.width = '36px';
			img.style.height = '36px';
            div.appendChild (img);
        }
        else {
            div.style.cssFloat = 'right';
            div.style.styleFloat = 'right';
            lightbox.divRightBtn = div;

            var img = document.createElement ('img');
            img.src = 'files/lightbox_images/rightOff.png';
            img.style.marginTop = '60%';
            img.style.marginRight = '2%';
            img.style.cssFloat = 'right';
            img.style.styleFloat = 'right';
			img.style.width = '36px';
			img.style.height = '36px';
            div.appendChild (img);
        }
    }
    // create div container for left & right btn divs
    div = document.createElement ('div');
    div.style.width = '100%';
    div.style.height = '100%';
    div.style.position = 'absolute';
    div.style.top = '0';
    div.style.left = '0';
    lightbox.divImageContainer.appendChild (div);

    div.appendChild (lightbox.divLeftBtn);
    div.appendChild (lightbox.divRightBtn);

  // create description div
    div = document.createElement ('div');
    div.style.width = '100%';
    div.style.height = '10%';
    div.style.backgroundColor = '#FFF';
    div.style.overflow = 'hidden';
    div.style.padding = '8px';
    div.style.marginLeft = '-8px';

  // close button
    var link = document.createElement ('a');
    link.setAttribute ('href', '#');
    link.style.color = '#000';
    link.style.cssFloat = 'right';
    link.style.styleFloat = 'right';
    link.style.padding = '4px 8px';
    link.style.fontSize = '14px';
    link.style.fontFamily = 'Lucida Sans Unicode';
    link.style.fontVariant = 'small-caps';
    link.style.paddingRight = '20px';
    link.style.paddingBottom = '6px';
    link.style.backgroundImage = 'url(files/lightbox_images/close2.png)';
    link.style.backgroundRepeat = 'no-repeat';
    link.style.backgroundPosition = 'right 5px';

    var text = document.createTextNode ('Close');
    link.appendChild (text);

    lightbox.linkCloseBtn = link;
    div.appendChild (lightbox.linkCloseBtn);

  // paragraph description
    var para = document.createElement ('p');
    para.style.margin = '0';
    para.style.width = '80%';
    para.style.height = '14px';
    para.style.cssFloat = 'left';
    para.style.styleFloat = 'left';
    para.style.padding = '2px 4px';
    para.style.overflow = 'hidden';
    lightbox.pDesc = para;
    div.appendChild (para);

    var text = document.createTextNode ('.');
    para.appendChild (text);
    lightbox.textDesc = text;

  // paragraph index
    para = document.createElement ('p');
    para.style.padding = '6px 4px 0 4px';
    para.style.margin = '0';
    para.style.clear = 'left';
    para.style.color = '#888';
    para.style.width = '50%';
    div.appendChild (para);
    
    text = document.createTextNode (',');
    para.appendChild (text);
    lightbox.textIndex = text;

    lightbox.divDesc = div;
    lightbox.divDisplay.appendChild (lightbox.divDesc);
};

/*------------------------------------
  GetOpacity
  ------------------------------------*/
lightbox.GetOpacity = function (target)
{
    var value;
    if (window.getComputedStyle)
        value = window.getComputedStyle (target, null).opacity;
    else if (target.currentStyle)
        value = target.currentStyle.filter;
    return value;
};

/*------------------------------------
  FadeImage
  ------------------------------------*/
lightbox.FadeImage = function ()
{
    lightbox.imageOpacity += 20;

    if (lightbox.imageOpacity > 100)
        lightbox.imageOpacity = 100;

    lightbox.imgCurrent.style.opacity = '' + lightbox.imageOpacity / 100;
    lightbox.imgCurrent.style.filter = 'alpha(opacity=' +
        lightbox.imageOpacity + ')';

    if (lightbox.imageOpacity < 100)
        setTimeout (lightbox.FadeImage, 1000 / lightbox.timeoutSpeed);
};

/*------------------------------------
  FadeInBackscreen
  ------------------------------------*/
lightbox.FadeInBackscreen = function ()
{
    var maxOpacity = 80;

    lightbox.divDisplayContainer.style.opacity = '1';
    lightbox.divDisplayContainer.style.filter = 'alpha(opacity=100)';
    lightbox.divDisplayContainer.style.visibility = 'visible';

    if (lightbox.divBackscreen.style.visibility == 'hidden')
        lightbox.divBackscreen.style.visibility = 'visible';

    lightbox.backscreenOpacity += 20;
    if (lightbox.backscreenOpacity >= maxOpacity)
        lightbox.backscreenOpacity = maxOpacity;

    lightbox.divBackscreen.style.opacity = '' + lightbox.backscreenOpacity / 100;
    lightbox.divBackscreen.style.filter = 'alpha(opacity=' +
        lightbox.backscreenOpacity + ')';

    if (lightbox.backscreenOpacity < maxOpacity)
        setTimeout (lightbox.FadeInBackscreen, 1000 / lightbox.timeoutSpeed);
    else
        return;
};

/*------------------------------------
  FadeOutBackscreen
  ------------------------------------*/
lightbox.FadeOutBackscreen = function ()
{
    lightbox.backscreenOpacity -= 20;

    //if (lightbox.backscreenOpacity < 0)
      //  lightbox.backscreenOpacity = 0;

    lightbox.divBackscreen.style.opacity = '' + lightbox.backscreenOpacity / 100;
    lightbox.divBackscreen.style.filter = 'alpha(opacity=' +
        lightbox.backscreenOpacity + ')';

    lightbox.divDisplayContainer.style.opacity = '' +
        lightbox.backscreenOpacity;
    lightbox.divDisplayContainer.style.filter =
        'alpha(opacity=' + lightbox.backscreenOpacity + ')';

    if (lightbox.backscreenOpacity > 0)
        setTimeout (lightbox.FadeOutBackscreen, 1000 / lightbox.timeoutSpeed);
    else {
        lightbox.divDisplayContainer.style.visibility = 'hidden';
        lightbox.divBackscreen.style.visibility = 'hidden';
    }

    
};

/*------------------------------------
  RefreshImage
  ------------------------------------*/
lightbox.RefreshImage = function ()
{
    lightbox.imgCurrent.src = lightbox.images[lightbox.imageIndex].src;
    lightbox.imgCurrent.style.height = '100%';

    lightbox.textDesc.nodeValue =
        lightbox.imagesDesc[lightbox.imageIndex];

    lightbox.textIndex.nodeValue = 'Image ' + (parseInt(lightbox.imageIndex +1)) +
        ' of ' + lightbox.thumbs.length;

    lightbox.divDesc.style.height = '40px';
};

/*------------------------------------
  ResizeDisplay
  ------------------------------------*/
lightbox.ResizeDisplay = function ()
{
    var width = lightbox.images[lightbox.imageIndex].width;
    var height = lightbox.images[lightbox.imageIndex].height;
    var ratio = height / width;

    var newWidth = 512;
    var newHeight = 512 * ratio;

    lightbox.divDisplay.style.width = newWidth  + 'px';
    lightbox.divDisplay.style.height = newHeight + 'px';

    // reset values before calling RefreshImage()
    lightbox.imageOpacity = 0;
    lightbox.imgCurrent.style.opacity = '0';
    lightbox.imgCurrent.style.filter = 'alpha(opaciaty=0)';
    lightbox.FadeImage ();

    lightbox.RefreshImage ();
};

/*------------------------------------
  SetupImages
  ------------------------------------*/
lightbox.SetupImages = function ()
{
    var images = [];
    var desc = [];
    for (var i=0; i < lightbox.thumbs.length; i++)
    {
      // picture
        var img = document.createElement ('img');
        img.setAttribute ('src',
            lightbox.thumbs[i].parentNode.getAttribute ('href'));

        images[i] = img;

      // description
        desc[i] = lightbox.thumbs[i].getAttribute ('title');

      // set thumbs' parnet link to null
        lightbox.thumbs[i].parentNode.setAttribute ('href', '#');

      // give each thumb an id
        lightbox.thumbs[i].setAttribute ('id', 'lightbox_image' + i);
    }

    lightbox.images = images;
    lightbox.imagesDesc = desc;
};


/*------------------------------------
  SetupListeners
  ------------------------------------*/
lightbox.SetupListeners = function ()
{
    lightbox.AddEventListener (lightbox.linkStart, 'click', lightbox.Start);
	lightbox.AddEventListener (lightbox.areaStart, 'click', lightbox.Start);
    lightbox.AddEventListener 
        (lightbox.linkStart, 'click', function(){lightbox.imageIndex=0;});   
    lightbox.AddEventListener (lightbox.linkCloseBtn, 'click', lightbox.Stop);
    for (var i=0; i < lightbox.thumbs.length; i++)
        lightbox.AddEventListener (lightbox.thumbs[i], 'click',
            lightbox.ThumbClickHandle);

    lightbox.AddEventListener (lightbox.divLeftBtn, 'click', lightbox.BtnClickLeft);
    lightbox.AddEventListener (lightbox.divRightBtn, 'click', lightbox.BtnClickRight);

    lightbox.AddEventListener (lightbox.divLeftBtn, 'mouseover', lightbox.BtnMouseOverLeft);
    lightbox.AddEventListener (lightbox.divLeftBtn, 'mouseout', lightbox.BtnMouseOutLeft);
    lightbox.AddEventListener (lightbox.divRightBtn, 'mouseover', lightbox.BtnMouseOverRight);
    lightbox.AddEventListener (lightbox.divRightBtn, 'mouseout', lightbox.BtnMouseOutRight);
};

/*------------------------------------
  Start
  ------------------------------------*/
lightbox.Start = function ()
{
    lightbox.FadeInBackscreen ();

    lightbox.divDisplayContainer.style.visibility = 'visible';

    setTimeout (lightbox.ResizeDisplay, 200);
};

/*------------------------------------
  Stop
  ------------------------------------*/
lightbox.Stop = function ()
{
    lightbox.FadeOutBackscreen ();
};

/*------------------------------------
  ThumbClickHandle
  ------------------------------------*/
lightbox.ThumbClickHandle = function (e)
{
    var target;
    var evt = window.event || e;

    if (evt.target) target = evt.target;
    else if (evt.srcElement) target = evt.srcElement;
    // handle safari bug
    if (target.nodeType == 3) target = target.parentNode;

    var i = target.id.substr (target.id.length -1);
    i = parseInt (i, 10);
    lightbox.imageIndex = i;
    lightbox.RefreshImage ();
    lightbox.Start ();
};

window.onload = lightbox.Init;