// -----------------------------------------------------------------------------------
//
//	Lightbox Slideshow v1.1
//	by Justin Barkhuff - http://www.justinbarkhuff.com/lab/lightbox_slideshow/
//  Updated: 2007-08-15
//
//	Largely based on Lightbox v2.02
//	by Lokesh Dhakar - http://huddletogether.com/projects/lightbox2/
//	3/31/06
//
//	Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
//
//	The code inserts html at the bottom of the page that looks similar to this:
//
//	<div id="overlay"></div>
//	<div id="lightbox">
//		<div id="outerImageContainer">
//			<div id="imageContainer">
//				<img id="lightboxImage" />
//				<div id="hoverNav">
//					<a href="javascript:void(0);" id="prevLinkImg">&laquo; prev</a>
//					<a href="javascript:void(0);" id="nextLinkImg">next &raquo;</a>
//				</div>
//				<div id="loading">
//					<a href="javascript:void(0);" id="loadingLink">loading</a>
//				</div>
//			</div>
//		</div>
//		<div id="imageDataContainer">
//			<div id="imageData">
//				<div id="imageDetails">
//					<span id="caption"></span>
//					<span id="numberDisplay"></span>
//					<span id="detailsNav">
//						<a id="prevLinkDetails" href="javascript:void(0);">&laquo; prev</a>
//						<a id="nextLinkDetails" href="javascript:void(0);">next &raquo;</a>
//						<a id="slideShowControl" href="javascript:void(0);">stop slideshow</a>
//					</span>
//				</div>
//				<div id="close">
//					<a id="closeLink" href="javascript:void(0);">close</a>
//				</div>
//			</div>
//		</div>
//	</div>
//
// -----------------------------------------------------------------------------------

//
//	Lightbox Object
//

var Lightbox = {
    activeImage: null,
    badObjects: ['select', 'object', 'embed'],
    container: null,
    enableSlideshow: null,
    groupName: null,
    imageArray: [],
    imageArrayNew: [],
    descriptionArray: [],
    options: null,
    overlayDuration: null,
    overlayOpacity: null,
    playSlides: null,
    refTags: ['a', 'area'],
    relAttribute: null,
    resizeDuration: null,
    slideShowTimer: null,
    startImage: null,
    imageCounter: 0,
    pageArray: [],
    ImageLinkArray: [],


    //
    // initialize()
    // Constructor sets class properties and configuration options and
    // inserts html at the bottom of the page which is used to display the shadow 
    // overlay and the image container.
    //
    initialize: function(options, relValue) {
        if (!document.getElementsByTagName) { return; }

        if (options == "Special") {



            this.options = $H({
                animate: true, // resizing animations
                autoPlay: false, // should slideshow start automatically
                borderSize: 10, // if you adjust the padding in the CSS, you will need to update this variable
                containerID: document, // lightbox container object
                enableSlideshow: true, // enable slideshow feature
                googleAnalytics: false, // track individual image views using Google Analytics
                imageDataLocation: 'south', // location of image caption information
                initImage: '', // ID of image link to automatically launch when upon script initialization
                loop: true, // whether to continuously loop slideshow images
                overlayDuration: .2, // time to fade in shadow overlay
                overlayOpacity: .8, // transparency of shadow overlay
                prefix: '', // ID prefix for all dynamically created html elements
                relAttribute: 'rel', // specifies the rel attribute value that triggers lightbox
                resizeSpeed: 7, // controls the speed of the image resizing (1=slowest and 10=fastest)
                showGroupName: false, // show group name of images in image details
                slideTime: 4, // time to display images during slideshow
                strings: { // allows for localization
                    closeLink: 'close',
                    loadingMsg: 'loading',
                    nextLink: '',
                    prevLink: '',
                    startSlideshow: 'start slideshow',
                    stopSlideshow: 'stop slideshow',
                    numDisplayPrefix: 'Bild',
                    numDisplaySeparator: 'of'
                }
            }).merge(options);


            if (this.options.animate) {
                this.overlayDuration = Math.max(this.options.overlayDuration, 0);
                this.options.resizeSpeed = Math.max(Math.min(this.options.resizeSpeed, 10), 1);
                this.resizeDuration = (11 - this.options.resizeSpeed) * 0.15;
            } else {
                this.overlayDuration = 0;
                this.resizeDuration = 0;
            }

            this.enableSlideshow = this.options.enableSlideshow;
            this.overlayOpacity = Math.max(Math.min(this.options.overlayOpacity, 1), 0);
            this.playSlides = this.options.autoPlay;
            this.container = $(this.options.containerID);
            this.relAttribute = this.options.relAttribute;

            //		    if(options == "Special Link")
            //		        this.updateImageListForLink(relValue);
            //		    else
            //		        this.updateImageListNew();



            var objBody = this.container != document ? this.container : document.getElementsByTagName('body').item(0);

            var hasInnerText = (document.getElementsByTagName("body")[0].innerText != undefined) ? true : false;


            if (document.getElementById(this.getID('lightbox')) != null) {
                document.getElementById(this.getID('lightbox')).innerHTML = "";
                document.getElementById(this.getID('lightbox')).parentNode.removeChild(document.getElementById(this.getID('lightbox')));

            }







            var objOverlay = document.createElement('div');
            objOverlay.setAttribute('id', this.getID('overlay'));
            objOverlay.style.display = 'none';
            objBody.appendChild(objOverlay);
            Event.observe(objOverlay, 'click', this.endNew.bindAsEventListener(this));



            var objLightbox = document.createElement('div');
            objLightbox.setAttribute('id', this.getID('lightbox'));

            objBody.appendChild(objLightbox);


            var objCloseLink = document.createElement('a');
            objCloseLink.setAttribute('id', this.getID('closeElene'));
            objCloseLink.setAttribute('href', 'javascript:void(0);');
            objLightbox.appendChild(objCloseLink);
            Event.observe(objCloseLink, 'click', this.endNew.bindAsEventListener(this));


            var objLightBoxImage = document.createElement("div");
            objLightBoxImage.setAttribute('id', this.getID('lightbox-image'));
            objLightbox.appendChild(objLightBoxImage);

            var objImg = document.createElement("img");
            objImg.setAttribute('id', 'LightBoxImage');
            objImg.setAttribute('src', relValue);
            objLightBoxImage.appendChild(objImg);

            var objlightboxborder = document.createElement('div');
            objlightboxborder.setAttribute('id', this.getID('lightbox-holder'));
            objLightBoxImage.appendChild(objlightboxborder);



            var pageSize = this.getPageSize();
            $(this.getID('overlay')).setStyle({ height: pageSize.pageHeight + 'px' });
            var leftPos = (pageSize.pageWidth / 2) - 240;
            $(this.getID('lightbox')).setStyle({ left: leftPos + 'px' });
            new Effect.Appear(this.getID('overlay'), { duration: this.overlayDuration, from: 0, to: this.overlayOpacity });



        }



        else {

            this.options = $H({
                animate: true, // resizing animations
                autoPlay: false, // should slideshow start automatically
                borderSize: 10, // if you adjust the padding in the CSS, you will need to update this variable
                containerID: document, // lightbox container object
                enableSlideshow: true, // enable slideshow feature
                googleAnalytics: false, // track individual image views using Google Analytics
                imageDataLocation: 'south', // location of image caption information
                initImage: '', // ID of image link to automatically launch when upon script initialization
                loop: true, // whether to continuously loop slideshow images
                overlayDuration: .2, // time to fade in shadow overlay
                overlayOpacity: .8, // transparency of shadow overlay
                prefix: '', // ID prefix for all dynamically created html elements
                relAttribute: 'lightbox', // specifies the rel attribute value that triggers lightbox
                resizeSpeed: 7, // controls the speed of the image resizing (1=slowest and 10=fastest)
                showGroupName: false, // show group name of images in image details
                slideTime: 4, // time to display images during slideshow
                strings: { // allows for localization
                    closeLink: 'close',
                    loadingMsg: 'loading',
                    nextLink: '',
                    prevLink: '',
                    startSlideshow: 'start slideshow',
                    stopSlideshow: 'stop slideshow',
                    numDisplayPrefix: 'Bild',
                    numDisplaySeparator: 'of'
                }
            }).merge(options);

            if (this.options.animate) {
                this.overlayDuration = Math.max(this.options.overlayDuration, 0);
                this.options.resizeSpeed = Math.max(Math.min(this.options.resizeSpeed, 10), 1);
                this.resizeDuration = (11 - this.options.resizeSpeed) * 0.15;
            } else {
                this.overlayDuration = 0;
                this.resizeDuration = 0;
            }
            //alert(options);
            this.enableSlideshow = this.options.enableSlideshow;
            this.overlayOpacity = Math.max(Math.min(this.options.overlayOpacity, 1), 0);
            this.playSlides = this.options.autoPlay;
            this.container = $(this.options.containerID);
            this.relAttribute = this.options.relAttribute;
            this.updateImageList(options);

            var objBody = this.container != document ? this.container : document.getElementsByTagName('body').item(0);

            if (document.getElementById(this.getID('lightbox')) != null) {
                document.getElementById(this.getID('lightbox')).innerHTML = "";
                document.getElementById(this.getID('lightbox')).parentNode.removeChild(document.getElementById(this.getID('lightbox')));

            }


            var objOverlay = document.createElement('div');
            objOverlay.setAttribute('id', this.getID('overlay'));
            objOverlay.style.display = 'none';
            objBody.appendChild(objOverlay);
            Event.observe(objOverlay, 'click', this.end.bindAsEventListener(this));

            var objLightbox = document.createElement('div');
            objLightbox.setAttribute('id', this.getID('lightboxOld'));
            objLightbox.style.display = 'none';
            objBody.appendChild(objLightbox);

            var objImageDataContainer = document.createElement('div');
            objImageDataContainer.setAttribute('id', this.getID('imageDataContainerOld'));
            objImageDataContainer.className = this.getID('clearfix');

            var objImageData = document.createElement('div');
            objImageData.setAttribute('id', this.getID('imageDataOld'));
            objImageDataContainer.appendChild(objImageData);

            var objImageDetails = document.createElement('div');
            objImageDetails.setAttribute('id', this.getID('imageDetailsOld'));
            objImageData.appendChild(objImageDetails);

            var objCaption = document.createElement('span');
            objCaption.setAttribute('id', this.getID('captionOld'));
            objImageDetails.appendChild(objCaption);

            var objNumberDisplay = document.createElement('span');
            objNumberDisplay.setAttribute('id', this.getID('numberDisplayOld'));
            objImageDetails.appendChild(objNumberDisplay);

            var objDetailsNav = document.createElement('span');
            objDetailsNav.setAttribute('id', this.getID('detailsNavOld'));
            objImageDetails.appendChild(objDetailsNav);

            var objPrevLink = document.createElement('a');
            objPrevLink.setAttribute('id', this.getID('prevLinkDetailsOld'));
            objPrevLink.setAttribute('href', 'javascript:void(0);');
            objPrevLink.innerHTML = this.options.strings.prevLink;
            objDetailsNav.appendChild(objPrevLink);
            Event.observe(objPrevLink, 'click', this.showPrev.bindAsEventListener(this));

            var objNextLink = document.createElement('a');
            objNextLink.setAttribute('id', this.getID('nextLinkDetailsOld'));
            objNextLink.setAttribute('href', 'javascript:void(0);');
            objNextLink.innerHTML = this.options.strings.nextLink;
            objDetailsNav.appendChild(objNextLink);
            Event.observe(objNextLink, 'click', this.showNext.bindAsEventListener(this));

            var objSlideShowControl = document.createElement('a');
            objSlideShowControl.setAttribute('id', this.getID('slideShowControlOld'));
            objSlideShowControl.setAttribute('href', 'javascript:void(0);');
            objDetailsNav.appendChild(objSlideShowControl);
            Event.observe(objSlideShowControl, 'click', this.toggleSlideShow.bindAsEventListener(this));

            var objClose = document.createElement('div');
            objClose.setAttribute('id', this.getID('close'));
            objImageData.appendChild(objClose);

            var objCloseLink = document.createElement('a');
            objCloseLink.setAttribute('id', this.getID('closeLinkOld'));
            objCloseLink.setAttribute('href', 'javascript:void(0);');
            objCloseLink.innerHTML = this.options.strings.closeLink;
            objClose.appendChild(objCloseLink);
            Event.observe(objCloseLink, 'click', this.end.bindAsEventListener(this));

            if (this.options.imageDataLocation == 'north') {
                objLightbox.appendChild(objImageDataContainer);
            }
            if (this.options.imageDataLocation != 'north') {
                objLightbox.appendChild(objImageDataContainer);
            }
            var objOuterImageContainer = document.createElement('div');
            objOuterImageContainer.setAttribute('id', this.getID('outerImageContainerOld'));
            objLightbox.appendChild(objOuterImageContainer);

            var objImageContainer = document.createElement('div');
            objImageContainer.setAttribute('id', this.getID('imageContainerOld'));
            objOuterImageContainer.appendChild(objImageContainer);

            var objLightboxImage = document.createElement('img');
            objLightboxImage.setAttribute('id', this.getID('lightboxImageOld'));
            objImageContainer.appendChild(objLightboxImage);

            var objHoverNav = document.createElement('div');
            objHoverNav.setAttribute('id', this.getID('hoverNavOld'));
            objImageContainer.appendChild(objHoverNav);

            var objPrevLinkImg = document.createElement('a');
            objPrevLinkImg.setAttribute('id', this.getID('prevLinkImgOld'));
            objPrevLinkImg.setAttribute('href', 'javascript:void(0);');
            objHoverNav.appendChild(objPrevLinkImg);
            Event.observe(objPrevLinkImg, 'click', this.showPrev.bindAsEventListener(this));

            var objNextLinkImg = document.createElement('a');
            objNextLinkImg.setAttribute('id', this.getID('nextLinkImgOld'));
            objNextLinkImg.setAttribute('href', 'javascript:void(0);');
            objHoverNav.appendChild(objNextLinkImg);
            Event.observe(objNextLinkImg, 'click', this.showNext.bindAsEventListener(this));

            var objLoading = document.createElement('div');
            objLoading.setAttribute('id', this.getID('loadingOld'));
            objImageContainer.appendChild(objLoading);

            var objLoadingLink = document.createElement('a');
            objLoadingLink.setAttribute('id', this.getID('loadingLinkOld'));
            objLoadingLink.setAttribute('href', 'javascript:void(0);');
            objLoadingLink.innerHTML = this.options.strings.loadingMsg;
            objLoading.appendChild(objLoadingLink);
            Event.observe(objLoadingLink, 'click', this.end.bindAsEventListener(this));



            if (this.options.initImage != '') {
                this.start($(this.options.initImage));
            }

        }

    },

    updateImageList: function(par) {
        var el, els, rel;
        var m = 0;
        var imagesArrayNew = [];
        for (var i = 0; i < this.refTags.length; i++) {
            els = this.container.getElementsByTagName(this.refTags[i]);
            for (var j = 0; j < els.length; j++) {
                el = els[j];
                rel = String(el.getAttribute('rel'));
                if (el.getAttribute('href') && (rel.toLowerCase().match(this.relAttribute)) && (par.getAttribute('href') == el.getAttribute('href'))) {
                    this.options.initImage = el;

                }
            }
        }


    },


    //
    //	start()
    //	Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
    //
    start: function(imageLink) {

        this.hideBadObjects();

        // stretch overlay to fill page and fade in
        var pageSize = this.getPageSize();
        $(this.getID('overlay')).setStyle({ height: pageSize.pageHeight + 'px' });
        new Effect.Appear(this.getID('overlay'), { duration: this.overlayDuration, from: 0, to: this.overlayOpacity });

        this.imageArray = [];
        this.groupName = null;

        var rel = imageLink.getAttribute('rel');
        var imageTitle = '';

        // if image is NOT part of a group..
        if (rel == this.relAttribute) {
            // add single image to imageArray
            imageTitle = imageLink.getAttribute('title') ? imageLink.getAttribute('title') : '';
            this.imageArray.push({ 'link': imageLink.getAttribute('href'), 'title': imageTitle });
            this.startImage = 0;
        } else {
            // if image is part of a group..
            var els = this.container.getElementsByTagName(imageLink.tagName);
            // loop through anchors, find other images in group, and add them to imageArray
            // var internalCounter = 0;
            for (var i = 0; i < els.length; i++) {
                var el = els[i];
                if (el.getAttribute('href') && (el.getAttribute('rel') == rel)) {
                    imageTitle = el.getAttribute('title') ? el.getAttribute('title') : '';
                    this.imageArray.push({ 'link': el.getAttribute('href'), 'title': imageTitle });
                    if (el == imageLink) {
                        this.startImage = 0;
                    }
                }
            }
            // get group name
            this.groupName = rel.substring(this.relAttribute.length + 1, rel.length - 1);
        }

        // calculate top offset for the lightbox and display 
        var pageScroll = this.getPageScroll();
        var lightboxTop = pageScroll.y + (pageSize.winHeight / 15);

        $(this.getID('lightboxOld')).setStyle({ top: lightboxTop + 'px' }).show();
        this.changeImage(this.startImage);
    },

    //
    //	changeImage()
    //	Hide most elements and preload image in preparation for resizing image container.
    //
    changeImage: function(imageNum) {
        this.activeImage = imageNum;

        this.disableKeyboardNav();
        this.pauseSlideShow();

        // hide elements during transition
        $(this.getID('loadingOld')).show();
        $(this.getID('lightboxImageOld')).hide();
        $(this.getID('hoverNavOld')).hide();
        $(this.getID('imageDataContainerOld')).hide();
        $(this.getID('numberDisplayOld')).hide();
        $(this.getID('detailsNavOld')).hide();

        var imgPreloader = new Image();

        // once image is preloaded, resize image container
        imgPreloader.onload = function() {
            $(Lightbox.getID('lightboxImageOld')).src = imgPreloader.src;
            Lightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
        }
        imgPreloader.src = this.imageArray[this.activeImage].link;

        if (this.options.googleAnalytics) {
            urchinTracker(this.imageArray[this.activeImage].link);
        }
    },

    //
    //	updateImageListNew()
    //	Loops through specific tags within 'container' looking for 
    // 'lightbox' references and applies onclick events to them.
    //


    updateImageListForLink: function(pageId) {

        this.imageArrayNew = [];
        this.descriptionArray = [];



        var resultD = ClickHandler.GetDescriptionForDynamicImagePages(pageId);
        if (resultD != null && resultD.value != null)
            var myDataTable = resultD.value;

        if (typeof (myDataTable) == "object") {
            //Populate it..
            for (var i = 0; i < myDataTable.Rows.length; i++) {

                if (myDataTable.Rows[i].BriefDescription != null) {
                    this.descriptionArray.push(myDataTable.Rows[i].BriefDescription + "<br>");

                }


            }
        }

        var resultI = ClickHandler.GetImagesForDynamicImagePages(pageId, window.location.href);

        if (resultI != null && resultI.value != null)
            var myDataTableN = resultI.value;

        if (typeof (myDataTableN) == "object") {

            for (var i = 0; i < myDataTableN.Rows.length; i++) {


                if (myDataTableN.Rows[i].PathToBigImage != null) {
                    this.imageArrayNew.push(myDataTableN.Rows[i].PathToBigImage);

                }

            }
        }





    },

    updateImageListNew: function() {


        var e = document.getElementsByTagName("img");
        var result = null;
        this.pageArray = [];
        var el;
        var AObject = new Array();
        var myDataTable;
        this.ImageLinkArray = [];


        for (var i = 0; i < e.length; i++) {
            el = e[i];


            if (typeof (el.getAttribute("lang")) != "undefined" && el.getAttribute("lang") != null && el.getAttribute("lang") != "" && !isNaN(el.getAttribute("lang"))) {

                this.pageArray.push(el.getAttribute("lang"));

                this.ImageLinkArray.push(this);
                // el.onclick = function(){Lightbox.startMyLightBox(this); return false;}           
            }
        }


        if (this.pageArray.length > 0)
            result = ClickHandler.GetDescriptionImageInfo(this.pageArray);
        if (result != null && result.value != null)
            myDataTable = result.value;

        if (typeof (myDataTable) == "object") {
            //Populate it..
            for (var i = 0; i < myDataTable.Rows.length; i++) {

                if (myDataTable.Rows[i].Description != null) {
                    // this.descriptionArray.push(myDataTable.Rows[i].Description);
                    AObject.push("<span id='" + myDataTable.Rows[i].Description + "' ></span>");
                }
                if (myDataTable.Rows[i].ImagesPath != null) {
                    //this.imageArrayNew.push(myDataTable.Rows[i].PathBigImage);
                    AObject.push("<img alt='" + myDataTable.Rows[i].PathBigImage + "' ></img>");
                }

            }
        }
        var innerString = "";
        // alert('testing length' + AObject.length);
        for (var i = 0; i < AObject.length; i++) {
            innerString = innerString + AObject[i];

        }

        var checkDiv = document.getElementById("newlightbox");

        if (checkDiv != null) {
            checkDiv.innerHTML = '';
            checkDiv.parentNode.removeChild(checkDiv);
        }

        if (innerString.length > 0) {
            var ni = document.getElementsByTagName('body')[0];
            var newdiv = document.createElement('div');
            newdiv.setAttribute('id', "newlightbox");
            newdiv.style.display = 'none';
            newdiv.innerHTML = innerString;
            ni.appendChild(newdiv);
        }


    },



    //
    //	updateImageListNew()
    //	Loops through specific tags within 'container' looking for 
    // 'lightbox' references and applies onclick events to them.
    //
    updateImageListEmployee: function(relValue, opt) {


        var e = document.getElementsByTagName("img");
        var result = null;
        this.pageArray = [];
        var el;
        var AObject = new Array();
        var myDataTable;
        this.ImageLinkArray = [];
        this.imageArrayNew = [];
        this.descriptionArray = [];

        if (opt == 'Employee')
            var result = DataHandler.GetTableFromDatabase("DynamicControl1", false, false);
        else
            var result = DataHandler.GetTableFromDatabase("DynamicControl2", false, false);


        if (result != null && result.value != null)
            myDataTable = result.value;
        var splitedColumnID = relValue.split('|')[1].split('_');
        var columnID = splitedColumnID[splitedColumnID.length - 1];
        var realColumnID = columnID.substring(columnID.length - 1);

        if (typeof (myDataTable) == "object") {
            //Populate it..
            for (var i = 0; i < myDataTable.Rows.length; i++) {
                if (myDataTable.Rows[i].rowID == relValue.split('|')[0]) {
                    var str = 'myDataTable.Rows[' + i + '].imgContainer' + realColumnID + 'Link';
                    this.imageArrayNew.push(eval(str));
                    var strD = 'myDataTable.Rows[' + i + '].textContainer' + (parseInt(realColumnID) + parseInt(realColumnID) - 1);
                    this.descriptionArray.push(eval(strD));
                    var strLD = 'myDataTable.Rows[' + i + '].textContainer' + (parseInt(realColumnID) + parseInt(realColumnID));
                    this.descriptionArray.push(eval(strLD));
                }


            }
        }



    },

    startLightBoxLink: function(pageId) {
        this.hideBadObjectsNew();
        var pageSize = this.getPageSizeNew();

        this.imageCounter = 0;

        $(this.getID('overlay')).setStyle({ height: pageSize.pageHeight + 'px' });
        new Effect.Appear(this.getID('overlay'), { duration: this.overlayDuration, from: 0, to: this.overlayOpacity });

        var resultPP = ClickHandler.GetPortfolioParent(pageId);

        if (resultPP != null && resultPP.value != null) {


            var hasInnerText = (document.getElementsByTagName("body")[0].innerText != undefined) ? true : false;
            var ParentDiv = document.getElementById(this.getID('lightboxTitle'));

            if (!hasInnerText)
                ParentDiv.textContent = 'PORTFOLIO      ' + resultPP.value;
            else
                ParentDiv.innerText = 'PORTFOLIO      ' + resultPP.value;




        }


        var myDescription = "";

        for (var i = 0; i < this.descriptionArray.length; i++) {
            myDescription = myDescription + this.descriptionArray[i];
        }

        if (this.imageArrayNew.length > 0) {
            this.DisplayImage(this.imageCounter);

        }

        this.DisplayText(myDescription);

        // calculate top offset for the lightbox and display 
        var pageScroll = this.getPageScrollNew();
        var lightboxLeftMargin = (pageSize.winWidth - $(this.getID('lightbox')).getStyle('width').substring(0, 3)) / 2;
        var lightboxRightMargin = (pageSize.winWidth - $(this.getID('lightbox')).getStyle('width').substring(0, 3)) / 2;
        var lightboxTop = pageScroll.y + (pageSize.winHeight / 5);

        //$(this.getID('lightbox')).setStyle({top:lightboxTop+'px'}).show();
        $(this.getID('lightbox')).setStyle({ marginLeft: lightboxLeftMargin + 'px' });
        $(this.getID('lightbox')).setStyle({ marginRight: lightboxRightMargin + 'px' });


        //$(this.getID('lightbox')).setStyle({top:lightboxTop+'px'}).show();
        $(this.getID('lightbox')).setStyle({ top: lightboxTop + 'px' }).show();




    },

    startEmployeeLightBox: function() {
        this.hideBadObjectsNew();
        var pageSize = this.getPageSizeNew();

        $(this.getID('overlay')).setStyle({ height: pageSize.pageHeight + 'px' });
        new Effect.Appear(this.getID('overlay'), { duration: this.overlayDuration, from: 0, to: this.overlayOpacity });


        var myDescription = "";

        for (var i = 0; i < this.descriptionArray.length; i++) {
            myDescription = myDescription + this.descriptionArray[i] + '<p><p><br>';
        }



        if (this.imageArrayNew.length > 0) {
            this.DisplayImage(0);

        }


        this.DisplayText(myDescription);


        // calculate top offset for the lightbox and display 
        var pageScroll = this.getPageScrollNew();
        var lightboxLeftMargin = (pageSize.winWidth - $(this.getID('lightbox')).getStyle('width').substring(0, 3)) / 2;
        var lightboxRightMargin = (pageSize.winWidth - $(this.getID('lightbox')).getStyle('width').substring(0, 3)) / 2;

        //$(this.getID('lightbox')).setStyle({top:lightboxTop+'px'}).show();
        $(this.getID('lightbox')).setStyle({ marginLeft: lightboxLeftMargin + 'px' });
        $(this.getID('lightbox')).setStyle({ marginRight: lightboxRightMargin + 'px' });
        var lightboxTop = pageScroll.y + (pageSize.winHeight / 5);

        $(this.getID('lightbox')).setStyle({ top: lightboxTop + 'px' }).show();
    },



    //
    //	start()
    //	Display overlay and lightbox. If image is part of a set, add siblings to imageArrayNew.
    //
    startMyLightBox: function(relValue) {

        // this.initialize('trial');



        this.hideBadObjectsNew();

        //alert(this.ImageLinkArray[0].rel);

        // stretch overlay to fill page and fade in
        this.imageCounter = 0;
        var pageSize = this.getPageSizeNew();

        $(this.getID('overlay')).setStyle({ height: pageSize.pageHeight + 'px' });
        new Effect.Appear(this.getID('overlay'), { duration: this.overlayDuration, from: 0, to: this.overlayOpacity });

        var si = document.getElementsByTagName("span");
        this.descriptionArray = [];
        this.imageArrayNew = [];

        //alert(si.length);
        for (var i = 0; i < si.length; i++) {
            //alert("here alksdfjlkajsdf");
            if (si[i].getAttribute("id") != null && si[i].getAttribute("id").split("|").length > 1) {
                var splittedDescription = si[i].getAttribute("id").split("|");

                //alert(splittedDescription[0] + '-------------' + relValue);
                if (splittedDescription[0] == relValue) {
                    // alert('i am here to push');
                    this.descriptionArray.push(splittedDescription[1]);

                }

            }
            // alert(si[i].id);
        }
        var im = document.getElementsByTagName("img");

        for (var i = 0; i < im.length; i++) {

            if (im[i].getAttribute("alt") != null && im[i].getAttribute("alt").split("|").length > 1) {
                var splittedImages = im[i].getAttribute("alt").split("|");
                //alert(splittedImages[0] + '== ' + relValue);
                if (splittedImages[0] == relValue) {

                    this.imageArrayNew.push(splittedImages[1]);
                }

            }
        }


        var resultPP = ClickHandler.GetPortfolioParent(relValue);

        if (resultPP != null && resultPP.value != null) {


            var hasInnerText = (document.getElementsByTagName("body")[0].innerText != undefined) ? true : false;
            var ParentDiv = document.getElementById(this.getID('lightboxTitle'));

            if (!hasInnerText)
                ParentDiv.textContent = 'PORTFOLIO      ' + resultPP.value;
            else
                ParentDiv.innerText = 'PORTFOLIO      ' + resultPP.value;




        }

        var myDescription = "";
        var currentImageid = 0;

        //alert('the arraylength = ' + this.descriptionArray.length);
        for (var i = 0; i < this.descriptionArray.length; i++) {
            myDescription = myDescription + this.descriptionArray[i] + '<br>';
        }

        if (this.imageArrayNew.length > 0) {
            this.DisplayImage(this.imageCounter);

        }

        //alert('i am here in start ' + myDescription);
        this.DisplayText(myDescription);


        // calculate top offset for the lightbox and display 
        var pageScroll = this.getPageScrollNew();
        var lightboxTop = pageScroll.y + (pageSize.winHeight / 5);



        //var lightboxLeftMargin = (19/100) * (pageSize.winWidth);
        var lightboxLeftMargin = (pageSize.winWidth - $(this.getID('lightbox')).getStyle('width').substring(0, 3)) / 2;
        var lightboxRightMargin = (pageSize.winWidth - $(this.getID('lightbox')).getStyle('width').substring(0, 3)) / 2; //pageSize.winWidth - lightboxLeftMargin;

        //$(this.getID('lightbox')).setStyle({top:lightboxTop+'px'}).show();
        $(this.getID('lightbox')).setStyle({ marginLeft: lightboxLeftMargin + 'px' });
        $(this.getID('lightbox')).setStyle({ marginRight: lightboxRightMargin + 'px' });
        $(this.getID('lightbox')).setStyle({ top: lightboxTop + 'px' }).show();


    },

    DisplayText: function(myDesc) {
        var txtController = document.getElementById(this.getID("lightBoxDescription"));
        txtController.innerHTML = myDesc;

    },

    //
    //	resizeImageContainer()
    //
    resizeImageContainer: function(imgWidth, imgHeight) {
        // get current height and width
        if (imgWidth < 175)
            imgWidth = 175;
        var cDims = $(this.getID('outerImageContainerOld')).getDimensions();

        // scalars based on change from old to new
        var xScale = ((imgWidth + (this.options.borderSize * 1)) / cDims.width) * 100;
        var yScale = ((imgHeight + (this.options.borderSize * 1)) / cDims.height) * 100;

        // calculate size difference between new and old image, and resize if necessary
        var wDiff = (cDims.width - this.options.borderSize * 1) - imgWidth;
        var hDiff = (cDims.height - this.options.borderSize * 1) - imgHeight;

        if (!(hDiff == 0)) { new Effect.Scale(this.getID('outerImageContainerOld'), yScale, { scaleX: false, duration: this.resizeDuration, queue: 'front' }); }
        if (!(wDiff == 0)) { new Effect.Scale(this.getID('outerImageContainerOld'), xScale, { scaleY: false, delay: this.resizeDuration, duration: this.resizeDuration }); }

        // if new and old image are same size and no scaling transition is necessary, 
        // do a quick pause to prevent image flicker.
        if ((hDiff == 0) && (wDiff == 0)) {
            if (navigator.appVersion.indexOf('MSIE') != -1) { this.pause(250); } else { this.pause(100); }
        }

        $(this.getID('prevLinkImgOld')).setStyle({ height: imgHeight + 'px' });
        $(this.getID('nextLinkImgOld')).setStyle({ height: imgHeight + 'px' });
        $(this.getID('imageDataContainerOld')).setStyle({ width: (imgWidth + (this.options.borderSize - 10)) + 'px' });

        this.showImage();
    },



    //
    //	showImage()
    //	Display image and begin preloading neighbors.
    //
    showImage: function() {
        $(this.getID('loadingOld')).hide();
        new Effect.Appear(this.getID('lightboxImageOld'), { duration: 0.5, queue: 'end', afterFinish: function() { Lightbox.updateDetails(); } });
        this.preloadNeighborImages();
    },


    //
    //	updateDetails()
    //	Display caption, image number, and bottom nav.
    //
    updateDetails: function() {
        $(this.getID('captionOld')).show();
        $(this.getID('captionOld')).update(this.imageArray[this.activeImage].title);

        // if image is part of set display 'Image x of y' 
        if (this.imageArray.length > 1) {
            var num_display = this.options.strings.numDisplayPrefix + ' ' + eval(this.activeImage + 1) + ' ' + this.options.strings.numDisplaySeparator + ' ' + this.imageArray.length;
            if (this.options.showGroupName && this.groupName != '') {
                num_display += ' ' + this.options.strings.numDisplaySeparator + ' ' + this.groupName;
            }
            $(this.getID('numberDisplayOld')).update(num_display).show();
            if (!this.enableSlideshow) {
                $(this.getID('slideShowControlOld')).hide();
            }
            $(this.getID('detailsNavOld')).show();
        }

        new Effect.Parallel(
			[new Effect.SlideDown(this.getID('imageDataContainerOld'), { sync: true }),
			  new Effect.Appear(this.getID('imageDataContainerOld'), { sync: true })],
			{ duration: .65, afterFinish: function() { Lightbox.updateNav(); } }
		);
    },


    //
    //	updateNav()
    //	Display appropriate previous and next hover navigation.
    //
    updateNav: function() {
        if (this.imageArray.length > 1) {
            $(this.getID('hoverNavOld')).show();
            if (this.enableSlideshow) {
                if (this.playSlides) {
                    this.startSlideShow();
                } else {
                    this.stopSlideShow();
                }
            }
        }
        this.enableKeyboardNav();
    },

    //
    //	startSlideShow()
    //	Starts the slide show
    //
    startSlideShow: function() {
        this.playSlides = true;
        this.slideShowTimer = new PeriodicalExecuter(function(pe) { Lightbox.showNext(); pe.stop(); }, this.options.slideTime);
        if ($(this.getID('slideShowControl')).hasClassName('stopSlideShow'))
            $(this.getID('slideShowControl')).removeClassName('stopSlideShow');
        $(this.getID('slideShowControl')).addClassName('startSlideShow');
    },


    //
    //	stopSlideShow()
    //	Stops the slide show
    //
    stopSlideShow: function() {
        this.playSlides = false;
        if (this.slideShowTimer) {
            this.slideShowTimer.stop();
        }
        if ($(this.getID('slideShowControlOld')).hasClassName('startSlideShowOld'))
            $(this.getID('slideShowControlOld')).removeClassName('startSlideShowOld');
        $(this.getID('slideShowControlOld')).addClassName('stopSlideShowOld');
    },
    //	showNextNew()
    //	Display the next image in a group

    showNextNew: function() {
        if ((this.imageCounter + 1) < this.imageArrayNew.length) {
            this.imageCounter = this.imageCounter + 1;
            this.DisplayImage(this.imageCounter);
        }


    },

    //
    //	showPrevNew()
    //	Display the next image in a group
    //
    showPrevNew: function() {
        if (this.imageCounter > 0) {
            this.imageCounter = this.imageCounter - 1;
            this.DisplayImage(this.imageCounter);
        }
    },

    //
    //	showFirst()
    //	Display the first image in a group
    //

    DisplayImage: function(imgCounter) {
        var imgController = document.getElementById(this.getID("lightboxImage"));
        imgController.setAttribute('src', this.imageArrayNew[imgCounter]);

        this.DisplayNumber();
    },



    //	enableKeyboardNavNew()
    //
    enableKeyboardNavNew: function() {
        document.onkeydown = this.keyboardActionNew;
    },


    //	disableKeyboardNavNew()
    //
    disableKeyboardNavNew: function() {
        document.onkeydown = '';
    },

    //
    //	keyboardActionNew()
    //
    keyboardActionNew: function(e) {
        if (e == null) { // ie
            keycode = event.keyCode;
        } else { // mozilla
            keycode = e.which;
        }

        key = String.fromCharCode(keycode).toLowerCase();

        if (key == 'x' || key == 'o' || key == 'c') { // close lightbox
            Lightbox.endNew();
        } else if (key == 'p' || key == '%') { // display previous image
            Lightbox.showPrevNew();
        } else if (key == 'n' || key == '\'') { // display next image
            Lightbox.showNextNew();
        } else if (key == 'f') { // display first image
            Lightbox.showFirst();
        } else if (key == 'l') { // display last image
            Lightbox.showLast();
        } else if (key == 's') { // toggle slideshow
            if (Lightbox.imageArrayNew.length > 0 && Lightbox.options.enableSlideshow) {
                Lightbox.toggleSlideShow();
            }
        }
    },




    //	endNew()
    //
    endNew: function() {
        this.disableKeyboardNavNew();
        //this.pauseSlideShow();
        //$(this.getID('lightbox')).hide();
        $(this.getID('lightbox')).hide();
        new Effect.Fade(this.getID('overlay'), { duration: this.overlayDuration });
        this.showBadObjectsNew();
    },


    //	showBadObjectsNew()
    //
    showBadObjectsNew: function() {
        var els;
        var tags = Lightbox.badObjects;
        for (var i = 0; i < tags.length; i++) {
            els = document.getElementsByTagName(tags[i]);
            for (var j = 0; j < els.length; j++) {
                $(els[j]).setStyle({ visibility: 'visible' });
            }
        }
    },


    //	hideBadObjectsNew()
    //
    hideBadObjectsNew: function() {
        var els;
        var tags = Lightbox.badObjects;
        for (var i = 0; i < tags.length; i++) {
            els = document.getElementsByTagName(tags[i]);
            for (var j = 0; j < els.length; j++) {
                $(els[j]).setStyle({ visibility: 'hidden' });
            }
        }
    },

    // pauseNew(numberMillis)
    // Pauses code execution for specified time. Uses busy code, not good.
    // Code from http://www.faqts.com/knowledge_base/view.phtml/aid/1602
    //
    pauseNew: function(numberMillis) {
        var now = new Date();
        var exitTime = now.getTime() + numberMillis;
        while (true) {
            now = new Date();
            if (now.getTime() > exitTime)
                return;
        }
    },


    // getPageScrollNew()
    // Returns array with x,y page scroll values.
    // Core code from - quirksmode.org
    //
    getPageScrollNew: function() {
        var x, y;
        if (self.pageYOffset) {
            x = self.pageXOffset;
            y = self.pageYOffset;
        } else if (document.documentElement && document.documentElement.scrollTop) {	 // Explorer 6 Strict
            x = document.documentElement.scrollLeft;
            y = document.documentElement.scrollTop;
        } else if (document.body) {// all other Explorers
            x = document.body.scrollLeft;
            y = document.body.scrollTop;
        }
        return { x: x, y: y };
    },

    //
    // getPageSizeNew()
    // Returns array with page width, height and window width, height
    // Core code from - quirksmode.org
    // Edit for Firefox by pHaez
    //
    getPageSizeNew: function() {
        var scrollX, scrollY, windowX, windowY, pageX, pageY;
        if (window.innerHeight && window.scrollMaxY) {
            scrollX = document.body.scrollWidth;
            scrollY = window.innerHeight + window.scrollMaxY;
        } else if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
            scrollX = document.body.scrollWidth;
            scrollY = document.body.scrollHeight;
        } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
            scrollX = document.body.offsetWidth;
            scrollY = document.body.offsetHeight;
        }

        if (self.innerHeight) {	// all except Explorer
            windowX = self.innerWidth;
            windowY = self.innerHeight;
        } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
            windowX = document.documentElement.clientWidth;
            windowY = document.documentElement.clientHeight;
        } else if (document.body) { // other Explorers
            windowX = document.body.clientWidth;
            windowY = document.body.clientHeight;
        }

        pageY = (scrollY < windowY) ? windowY : scrollY; // for small pages with total height less then height of the viewport
        pageX = (scrollX < windowX) ? windowX : scrollX; // for small pages with total width less then width of the viewport


        return { pageWidth: pageX, pageHeight: pageY, winWidth: windowX, winHeight: windowY };
    },

    //
    //	stopSlideShow()
    //	Stops the slide show
    //
    toggleSlideShow: function() {
        if (this.playSlides) {
            this.stopSlideShow();
        } else {
            this.startSlideShow();
        }
    },

    //
    //	pauseSlideShow()
    //	Pauses the slide show (doesn't change the value of this.playSlides)
    //
    pauseSlideShow: function() {
        if (this.slideShowTimer) {
            this.slideShowTimer.stop();
        }
    },

    //
    //	showNext()
    //	Display the next image in a group
    //
    showNext: function() {
        if (this.imageArray.length > 1) {
            if (!this.options.loop && ((this.activeImage == this.imageArray.length - 1 && this.startImage == 0) || (this.activeImage + 1 == this.startImage))) {
                return this.end();
            }
            if (this.activeImage == this.imageArray.length - 1) {
                this.changeImage(0);
            } else {
                this.changeImage(this.activeImage + 1);
            }
        }
    },

    //
    //	showPrev()
    //	Display the next image in a group
    //
    showPrev: function() {
        if (this.imageArray.length > 1) {
            if (this.activeImage == 0) {
                this.changeImage(this.imageArray.length - 1);
            } else {
                this.changeImage(this.activeImage - 1);
            }
        }
    },

    //
    //	showFirst()
    //	Display the first image in a group
    //
    showFirst: function() {
        if (this.imageArray.length > 1) {
            this.changeImage(0);
        }
    },

    //
    //	showFirst()
    //	Display the first image in a group
    //
    showLast: function() {
        if (this.imageArray.length > 1) {
            this.changeImage(this.imageArray.length - 1);
        }
    },

    //
    //	enableKeyboardNav()
    //
    enableKeyboardNav: function() {
        document.onkeydown = this.keyboardAction;
    },

    //
    //	disableKeyboardNav()
    //
    disableKeyboardNav: function() {
        document.onkeydown = '';
    },

    //
    //	keyboardAction()
    //
    keyboardAction: function(e) {
        if (e == null) { // ie
            keycode = event.keyCode;
        } else { // mozilla
            keycode = e.which;
        }

        key = String.fromCharCode(keycode).toLowerCase();

        if (key == 'x' || key == 'o' || key == 'c') { // close lightbox
            Lightbox.end();
        } else if (key == 'p' || key == '%') { // display previous image
            Lightbox.showPrev();
        } else if (key == 'n' || key == '\'') { // display next image
            Lightbox.showNext();
        } else if (key == 'f') { // display first image
            Lightbox.showFirst();
        } else if (key == 'l') { // display last image
            Lightbox.showLast();
        } else if (key == 's') { // toggle slideshow
            if (Lightbox.imageArray.length > 0 && Lightbox.options.enableSlideshow) {
                Lightbox.toggleSlideShow();
            }
        }
    },

    //
    //	preloadNeighborImages()
    //	Preload previous and next images.
    //
    preloadNeighborImages: function() {
        var nextImageID = this.imageArray.length - 1 == this.activeImage ? 0 : this.activeImage + 1;
        nextImage = new Image();
        nextImage.src = this.imageArray[nextImageID].link

        var prevImageID = this.activeImage == 0 ? this.imageArray.length - 1 : this.activeImage - 1;
        prevImage = new Image();
        prevImage.src = this.imageArray[prevImageID].link;
    },

    //
    //	end()
    //
    end: function() {
        this.disableKeyboardNav();
        this.pauseSlideShow();
        $(this.getID('lightboxOld')).hide();
        new Effect.Fade(this.getID('overlay'), { duration: this.overlayDuration });
        this.showBadObjects();
    },

    //
    //	showBadObjects()
    //
    showBadObjects: function() {
        var els;
        var tags = Lightbox.badObjects;
        for (var i = 0; i < tags.length; i++) {
            els = document.getElementsByTagName(tags[i]);
            for (var j = 0; j < els.length; j++) {
                $(els[j]).setStyle({ visibility: 'visible' });
            }
        }
    },

    //
    //	hideBadObjects()
    //
    hideBadObjects: function() {
        var els;
        var tags = Lightbox.badObjects;
        for (var i = 0; i < tags.length; i++) {
            els = document.getElementsByTagName(tags[i]);
            for (var j = 0; j < els.length; j++) {
                $(els[j]).setStyle({ visibility: 'hidden' });
            }
        }
    },

    //
    // pause(numberMillis)
    // Pauses code execution for specified time. Uses busy code, not good.
    // Code from http://www.faqts.com/knowledge_base/view.phtml/aid/1602
    //
    pause: function(numberMillis) {
        var now = new Date();
        var exitTime = now.getTime() + numberMillis;
        while (true) {
            now = new Date();
            if (now.getTime() > exitTime)
                return;
        }
    },

    //
    // getPageScroll()
    // Returns array with x,y page scroll values.
    // Core code from - quirksmode.org
    //
    getPageScroll: function() {
        var x, y;
        if (self.pageYOffset) {
            x = self.pageXOffset;
            y = self.pageYOffset;
        } else if (document.documentElement && document.documentElement.scrollTop) {	 // Explorer 6 Strict
            x = document.documentElement.scrollLeft;
            y = document.documentElement.scrollTop;
        } else if (document.body) {// all other Explorers
            x = document.body.scrollLeft;
            y = document.body.scrollTop;
        }
        return { x: x, y: y };
    },

    //
    // getPageSize()
    // Returns array with page width, height and window width, height
    // Core code from - quirksmode.org
    // Edit for Firefox by pHaez
    //
    getPageSize: function() {
        var scrollX, scrollY, windowX, windowY, pageX, pageY;
        if (window.innerHeight && window.scrollMaxY) {
            scrollX = document.body.scrollWidth;
            scrollY = window.innerHeight + window.scrollMaxY;
        } else if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
            scrollX = document.body.scrollWidth;
            scrollY = document.body.scrollHeight;
        } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
            scrollX = document.body.offsetWidth;
            scrollY = document.body.offsetHeight;
        }

        if (self.innerHeight) {	// all except Explorer
            windowX = self.innerWidth;
            windowY = self.innerHeight;
        } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
            windowX = document.documentElement.clientWidth;
            windowY = document.documentElement.clientHeight;
        } else if (document.body) { // other Explorers
            windowX = document.body.clientWidth;
            windowY = document.body.clientHeight;
        }

        pageY = (scrollY < windowY) ? windowY : scrollY; // for small pages with total height less then height of the viewport
        pageX = (scrollX < windowX) ? windowX : scrollX; // for small pages with total width less then width of the viewport

        return { pageWidth: pageX, pageHeight: pageY, winWidth: windowX, winHeight: windowY };
    },


    //
    // getID()
    // Returns formatted Lightbox element ID
    //
    getID: function(id) {
        return id;
    },

    DisplayNumber: function() {
        var hasInnerText = (document.getElementsByTagName("body")[0].innerText != undefined) ? true : false;



        var imageCounterDiv = document.getElementById(this.getID('lightboxcountertxt'));

        if (imageCounterDiv != null) {

            if (this.imageArrayNew.length <= 0) {
                if (!hasInnerText)
                    imageCounterDiv.textContent = '0 av 0';
                else
                    imageCounterDiv.innerText = '0 av 0';

            }

            else {
                if (!hasInnerText)
                    imageCounterDiv.textContent = parseInt(this.imageCounter) + 1 + ' av ' + this.imageArrayNew.length;
                else
                    imageCounterDiv.innerText = parseInt(this.imageCounter) + 1 + ' av ' + this.imageArrayNew.length;
            }
        }
    }
}

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




//Event.observe(window,'load',function(){ Lightbox.initialize('',''); });