var gal = {
    galleryTypeId: "",
    listTotal: "",
    nextImgId: "",
    largestImageWidthDifference: "",
    largestImageHeight: "",
    largestImageWidth: "",
    cssTopStyleForWhateverBackAndPrevButtonsAreCalled: "",
    prevImgId: "",

    init: function() {

        document.getElementById('image-gallery').style.display = "block";

        if (document.getElementById('h-gallery')) {
          document.getElementById('h-gallery').id = 'hgal';
          gal.galleryTypeId = 'hgal';
        }

				if (document.getElementById('v-gallery')) {
					document.getElementById('v-gallery').id = 'vgal';
					gal.galleryTypeId = 'vgal';
        }

        var li = document.getElementById(gal.galleryTypeId).getElementsByTagName('li');
        this.listTotal = li.length;
        this.nextImgId = 1;
        this.prevImgId = gal.listTotal - 1;

        li[0].className = 'active';
        var theImage = li[0].firstChild.firstChild;
        var theLinkCopy = li[0].lastChild;
        var theImageWidth = theImage.width;

        gal.setupNextAndPrevCssValues(li);
        gal.setWidgetHeight();

        gal.centerAndDisplayImage(li[0], li[0].width);


        gal.setupThumbs(li);
        gal.createAndPostionNextButton();
        gal.createAndPostionPrevButton();

    },

    setWidgetHeight: function() {
      if(gal.galleryTypeId == 'hgal') {
			  document.getElementById(gal.galleryTypeId).style.paddingTop = (gal.largestImageHeight * 1) + 25 +"px";
      }
		},

		setupNextAndPrevCssValues: function(listObject) {
        var tempImgHeight = 0;
        var tempImgWidth = 0;
        var tempImg = document.createElement('IMG');
        for(var i=0; i < listObject.length; i++) {
          tempImg.src = listObject[i].firstChild.firstChild.src;
          tempImgHeight = Math.max(tempImgHeight, tempImg.height);
          tempImgWidth = Math.max(tempImgWidth, tempImg.width);
        }
        gal.largestImageHeight = tempImgHeight;
        gal.largestImageWidth = tempImgWidth;
        gal.largestImageWidthDifference = tempImgWidth - 400;
        gal.cssTopStyleForWhateverBackAndPrevButtonsAreCalled = tempImgHeight / 2 + "px";
		},

		setNextButton: function(id) {
			  var id = (id * 1) + (1 * 1);
			  if(id >= gal.listTotal){id = 0;}
			  gal.nextImgId = id;
		},

		setPrevButton: function(id) {
				var id = id - 1;
			  if(id < 0){id = gal.listTotal - 1;}
        gal.prevImgId = id;
    },

		getNextButton: function() {
        var nextActiveLI = document.getElementById(this.nextImgId);
        gal._getButton(nextActiveLI);
        gal.setNextButton(nextActiveLI.id);
        gal.setPrevButton(nextActiveLI.id);
		},

    getPrevButton: function() {
        var prevActiveLI = document.getElementById(this.prevImgId);
        gal._getButton(prevActiveLI);
        gal.setPrevButton(prevActiveLI.id);
        gal.setNextButton(prevActiveLI.id);
    },


    _getButton: function(listObject) {
        gal.clearActiveTab();
        listObject.className = 'active';
        var imageDimensions  = gal.returnImageDimensions(listObject.firstChild.firstChild);
        gal.centerAndDisplayImage(listObject, imageDimensions.width);
    },

    clearActiveTab: function() {
				var im = document.getElementById(gal.galleryTypeId).getElementsByTagName('li');
				for (j=0; j<im.length; j++) {
						im[j].className = '';
				}
    },

    centerAndDisplayImage: function(listObject) {

        var theImage = listObject.firstChild.firstChild;
        var theLinkCopy = listObject.lastChild;
        theLinkCopy.style.width = gal.largestImageWidth + "px";

        if(gal.galleryTypeId == 'hgal') {
          theImage.style.marginLeft = -(theImage.width/2) + "px";
          theImage.style.top = (gal.largestImageHeight - theImage.height)/2 + "px";
          theLinkCopy.style.marginLeft = -(gal.largestImageWidth/2) + "px";
        } else {
          theImage.style.marginLeft = (gal.largestImageWidth - theImage.width)/2 + "px";
					theLinkCopy.style.top = theImage.height + "px";
        }

    },

    createAndPostionNextButton: function() {
       if(document.getElementById("nextImageID")) {
         var removeNode = document.getElementById("nextImageID");
         removeNode.parentNode.removeChild(removeNode);
       }

       var nextImage = gal.createImage("/images/Shared/arrow-right.gif");
       nextImage.id = "nextImageID";
       nextImage.onclick = function() { gal.getNextButton() };

       if(gal.galleryTypeId == 'hgal') {
         nextImage.style.right = -((16.5 * 1) + gal.largestImageWidthDifference / 2) + "px";
       }else {
         nextImage.style.left = gal.largestImageWidth + (130*1) + "px"; // 130 is based off the img.style.left in the CSS class #vgal li a img
       }

       document.getElementById(gal.galleryTypeId).appendChild(nextImage);
    },

    createAndPostionPrevButton: function() {

       if(document.getElementById("prevImageID")) {
         var removeNode = document.getElementById("prevImageID");
         removeNode.parentNode.removeChild(removeNode);
       }

       var prevImage = gal.createImage("/images/Shared/arrow-left.gif");
       prevImage.id = "prevImageID";
       prevImage.onclick = function() { gal.getPrevButton() };

       if(gal.galleryTypeId == 'hgal') {
         prevImage.style.left = -((16.5 * 1) + gal.largestImageWidthDifference / 2) + "px";
       }else {
         prevImage.style.right = -50 + "px";
       }


       document.getElementById(gal.galleryTypeId).appendChild(prevImage);
    },

    returnImageDimensions: function(imageObject) {
       var imageDimensions = {
         width: imageObject.width,
         height: imageObject.height
       }
       return imageDimensions;
    },

    createImage: function(imageSrc, onClickEvent) {
       var newImage = document.createElement('IMG');
       newImage.src = imageSrc;
       newImage.className = "arrowbuttons";
       newImage.style.cursor = "pointer";
       newImage.style.top = gal.cssTopStyleForWhateverBackAndPrevButtonsAreCalled;
       return newImage;
    },

    setupThumbs: function(listObject) {

			for (i=0; i<listObject.length; i++) {
					listObject[i].id = i;
					listObject[i].style.backgroundImage = 'url(' + listObject[i].getElementsByTagName('img')[0].src + ')';
					listObject[i].style.backgroundRepeat = 'no-repeat';
					listObject[i].title = listObject[i].getElementsByTagName('img')[0].alt;
					gal.addEvent(listObject[i],'click',function(e) {
						gal.clearActiveTab();

						this.className = 'active';
						var theImage = this.firstChild.firstChild;
						var theLinkCopy = this.lastChild;

						var imageDimensions  = gal.returnImageDimensions(theImage);

            gal.centerAndDisplayImage(this, imageDimensions.width);


						gal.setPrevButton(this.id);
						gal.setNextButton(this.id);
						gal.createAndPostionNextButton();
						gal.createAndPostionPrevButton();

					});
			}

    },

    addEvent : function(obj, type, fn) {
        if (obj.addEventListener) {
            obj.addEventListener(type, fn, false);
        }
        else if (obj.attachEvent) {
            obj["e"+type+fn] = fn;
            obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
            obj.attachEvent("on"+type, obj[type+fn]);
        }
    }
}

gal.addEvent(window,'load', function() {
gal.init();
});