function newGalleryWindow() {window.location('imageGalleryID');}
var PhotoViewer = Class.create();

PhotoViewer.prototype = {
            // Code inserts html in the DOM inside element with PhotoViewerID that looks similar to this:
            //    <div id="fullView">
            //        <!-- href to aBox fullview -->
            //        <a title="9_lrg.jpg" id='firstImage'>
            //            <img src="images/9_lrg.jpg" alt="" class="landscape" />
            //        </a>
			//        <div id="pvLoading">
			//            <a href="#" id="loadingLink">
			//                <img src="images/loading.gif">
			//            </a>
			//        </div>
            //    </div>
            //    <!-- END #fullView -->
            //    <p id="photoCaption">
            //        Large images sizes are set to 280px - thumbs are 75px. Both represent maximum dimensions
            //        - neither height or width can be exceeded. Note - The Safari browser does not vertically
            //        align the images, but display is acceptable. Other major browsers vertically center
            //        the images.</p>
            //        
            //    <div id="imageNav">
            //        <img alt="Enlarge Images" src="images/enlarge_sm.gif" id="enlargeImage" />
            //        <a id="basePrevLink" href="#" style="display: none;" />
            //        <span id="baseNumberDisplay" style="">Image 1 of 6</span>
            //        <a id="baseNextLink" href="#" style="">Next</a>
            //    </div>
            //        <a rel="lightbox[g1]" href="images/9_lrg.jpg" style="display: none"></a>
                
    initialize: function(config) {
        var self = this;
        this.config = config;
        this.selectedImage = 0;
        var objPhotoViewer = $(config.PhotoViewerID);
        
        if(objPhotoViewer == null)
            return;
            
        if(config.images.size() == 0)
            return;
        
        var objFull = document.createElement("div");
        objFull.setAttribute('id','fullView');
        objPhotoViewer.appendChild(objFull);
        
        var objFullA = document.createElement('a');
        objFullA.setAttribute('id', 'mainImage');
        //objFullA.setAttribute('rel','lightbox['+config.gallery_name+']');
        objFullA.setAttribute('href',imageGalleryID);
        objFullA.style.cursor = 'none';
        objFullA.onclick = function(){myLightbox.start(this); return false;}
        objFull.appendChild(objFullA);
        
        var objImg = document.createElement("img");
        objImg.setAttribute('src',config.images[0].file);
		objImg.setAttribute('style', 'visibility:hidden;');
		
		//figure out the image's orientation and set it.  Keep the image hidden
		// until we know how to display it.
		var imgLoader = new Image();
		imgLoader.onload=function(){
			orientation = 'portrait';
			if (imgLoader.width > imgLoader.height) {
				orientation = 'landscape';
			}
			
	        objImg.setAttribute('class', orientation);
	        objImg.setAttribute('style', '');
			
			imgLoader.onload=function(){};   //  clear onLoad, IE behaves irratically with animated gifs otherwise
		}
		imgLoader.src = config.images[0].file;
		
        objFullA.appendChild(objImg);
        
        var objLoading = document.createElement("div");
        objLoading.setAttribute('id','pvLoading');
        objFull.appendChild(objLoading);

        var objLoadingImage = document.createElement("img");
        objLoadingImage.setAttribute('src', 'http://media.philly.com/designimages/viewer_loading.gif');
        objLoading.appendChild(objLoadingImage);

        var objPhotoCredit = document.createElement("div");
        objPhotoCredit.setAttribute('id','photoCredit');
        objPhotoCredit.appendChild(document.createTextNode(config.images[0].credit));
        if(config.images[0].credit == ""){
            objPhotoCredit.style.display = 'none';
        }
        objPhotoViewer.appendChild(objPhotoCredit);
        
        var objPhotoTitle = document.createElement("div");
        objPhotoTitle.setAttribute('id','photoTitle');
        objPhotoTitle.appendChild(document.createTextNode(config.images[0].title));
        if(config.images[0].title == ""){
            objPhotoTitle.style.display = 'none';
        }
        objPhotoViewer.appendChild(objPhotoTitle);
        
        var objCaption = document.createElement("div");
        objCaption.setAttribute('id','photoCaption');
        objCaption.appendChild(document.createTextNode(config.images[0].caption));
        if(config.images[0].caption == ""){
            objCaption.style.display = 'none';
        }
        objPhotoViewer.appendChild(objCaption);
        
        var objNav = document.createElement("div");
        objNav.setAttribute('id','photoNav');
        objPhotoViewer.appendChild(objNav);
        
        var objEnlargeImg = document.createElement("a");
        objEnlargeImg.setAttribute('src','http://media.philly.com/designimages/viewer_enlarge_sm.gif');
        objEnlargeImg.setAttribute('id', 'enlargeImage');
        objEnlargeImg.setAttribute('class', 'enlargeImage');
        objEnlargeImg.setAttribute('href', imageGalleryID);
       objEnlargeImg.innerHTML = "<img src=http://media.philly.com/designimages/viewer_enlarge_sm.gif class=enlargeImage />";
       // objEnlargeImg.onclick = function(){myLightbox.start($('mainImage')); return false;}
       // objEnlargeImg.onclick = function(){window.open(imageGalleryID); return true;}
        objNav.appendChild(objEnlargeImg);
        
        var objPrevLink = document.createElement('a');
        objPrevLink.setAttribute('id', 'basePrevLink');
        objPrevLink.className = 'cold';
        objPrevLink.setAttribute('href',"#");
        objPrevLink.innerHTML = "Prev";
        objPrevLink.onclick = this.PrevImage;
        //objPrevLink.style.display = 'none';
        
        objNav.appendChild(objPrevLink);
        
        var objNextLink = document.createElement('a');
        objNextLink.setAttribute('id', 'baseNextLink');
        if (config.images.size() <= 1 ){
        	objNextLink.className = 'cold';
        }
        objNextLink.setAttribute('href',"#");
        objNextLink.innerHTML = "Next";
        objNextLink.onclick = this.NextImage;
        objNav.appendChild(objNextLink);
        
        var objNumDisplay = document.createElement("span");
        objNumDisplay.setAttribute('id','baseNumberDisplay');
        objNumDisplay.appendChild(document.createTextNode((this.selectedImage+1)+" of "+config.images.length));
        objNav.appendChild(objNumDisplay);
        
        config.images.each(function(item) {

            var objImg = document.createElement("a");
            objImg.setAttribute('rel','lightbox['+config.gallery_name+']');
            objImg.setAttribute('href',item.file);
            objImg.setAttribute('photoTitle',item.title);
            objImg.setAttribute('photoCredit',item.credit);
            objImg.setAttribute('caption',item.caption);
            objImg.style.display = 'none';
            objPhotoViewer.appendChild(objImg);
            
        });
    },

	

    NextImage: function(){
		if(myPhotoViewer.selectedImage < (myPhotoViewer.config.images.length - 1)) {
			myPhotoViewer.selectedImage++;
			
			$('photoTitle').innerHTML = myPhotoViewer.config.images[myPhotoViewer.selectedImage].title;
			$('photoCredit').innerHTML = myPhotoViewer.config.images[myPhotoViewer.selectedImage].credit;
			$('photoCaption').innerHTML = myPhotoViewer.config.images[myPhotoViewer.selectedImage].caption;
			
			//imageOrder
			$('mainImage').setAttribute('rel','lightbox['+myPhotoViewer.config.gallery_name+']');
			$('mainImage').setAttribute('href',myPhotoViewer.config.images[myPhotoViewer.selectedImage].file);
			
			myPhotoViewer.preLoadImage(myPhotoViewer.selectedImage);
			
            $('baseNumberDisplay').innerHTML = (myPhotoViewer.selectedImage + 1) + " of " + myPhotoViewer.config.images.length;
			
			if(myPhotoViewer.selectedImage+1 >= myPhotoViewer.config.images.size()){
				$('baseNextLink').className = 'cold';
			}
			$('basePrevLink').className = '';
			
			return false;
		}
    },


	
    PrevImage: function(){
		if (myPhotoViewer.selectedImage > 0) {
			myPhotoViewer.selectedImage--;
			
			$('photoTitle').innerHTML = myPhotoViewer.config.images[myPhotoViewer.selectedImage].title;
			$('photoCredit').innerHTML = myPhotoViewer.config.images[myPhotoViewer.selectedImage].credit;
			$('photoCaption').innerHTML = myPhotoViewer.config.images[myPhotoViewer.selectedImage].caption;
			
			$('mainImage').setAttribute('rel','lightbox['+myPhotoViewer.config.gallery_name+']');
			$('mainImage').setAttribute('href',myPhotoViewer.config.images[myPhotoViewer.selectedImage].file);
			
			myPhotoViewer.preLoadImage(myPhotoViewer.selectedImage);
			
			$('baseNumberDisplay').innerHTML = (myPhotoViewer.selectedImage + 1) + " of " + myPhotoViewer.config.images.length;
			
			if(myPhotoViewer.selectedImage <= 0){
				$('basePrevLink').className = 'cold';
			}
			
			$('baseNextLink').className = '';
			return false;
		}
    },


	
	preLoadImage: function(thisImg) {
		var orientation = 'portrait';
		
		var imgsrc = myPhotoViewer.config.images[thisImg].file;
		var imgPreloader = new Image();
		$('mainImage').setAttribute('style', 'visibility:hidden;');
		$('pvLoading').setAttribute('style', 'visibility:visible;');
		

		
		imgPreloader.onload=function(){
			if (imgPreloader.width > imgPreloader.height) {
				orientation = 'landscape';
			}
			$('mainImage').childElements("img")[0].className = orientation;
			
			$('mainImage').childElements()[0].setAttribute('src', imgsrc);
			$('mainImage').setAttribute('style', '');
			$('pvLoading').setAttribute('style', '');
			imgPreloader.onload=function(){};   //  clear onLoad, IE behaves irratically with animated gifs otherwise
			
		}
		imgPreloader.src = imgsrc;

    }
}

function initPhotoViewer() { 
	//populate the imageArray
//    var imageArray =  imageList;
    
    myPhotoViewer = new PhotoViewer({
            PhotoViewerID   : 'photoViewer',
            gallery_name    : 'g1',
            images          :  imageList
    }); 
    
    // INitialize the lightbox
    initLightbox();
}

function getImageArray()
{
	var retArr = new Array();
	
	for (i = 0; i < imageList.length; i++) {
		var fileValue = imageListjs[i];
		var titleValue = '';
		var captionValue = caption[i];
		var creditValue = credit[i];
		retArr.push({
					file : fileValue,
					title : titleValue,
					caption : captionValue,
					credit: creditValue
					});
	}
	return retArr;
}

// Initialize the PhotoViewer when the Dom is loaded.
// This must happen before the window.load event because the clickability
// tracking code fires on window.load and all <a> tags must exist in the DOM
// when this method fires or everything gets messed up.
document.observe("dom:loaded", initPhotoViewer);
//Event.observe(window, 'load', initPhotoViewer, false);