/*
		Resize finalized - issues recentering after resize
		Close Button Added
	*/
	
	var preloaderURL = '/art_collection/indicator_black.gif';
	var closeURL = '/art_collection/close_button.jpg';
	var closeStoryURL = '/art_collection/close_story_button.jpg';
	
	/*  URL FUNCTIONS */
	function getBaseURL(){
		var fullURL = location.href;
		var urlTemp = fullURL.split('#');
		var baseURL = urlTemp[0];
		return baseURL;
	}
	function getURL() {
		return location.href;
	}
	function getHrefURL() {
		var fullURL = location.href;
		var urlTemp = fullURL.split('#');
		var hrefURL = urlTemp[1];
		if(hrefURL)	{
			return hrefURL;
		} else {
			return 0;
		}
	}
	function setURL(currNum) {
		//
		var fullURL = location.href;
		var urlTemp = fullURL.split('#');
		var baseURL = urlTemp[0];
		//
		var prevLink = $('prev').href = '#'+'artPiece_'+(currHref-1);
		var nextLink = $('next').href = '#'+'artPiece_'+(currHref+1);
		//
		location.href = baseURL+'#artPiece_'+currHref;
		return location.href;
	}
	
	
	function Gal() {
		var totalImages = _photos.length;
		this.screenParam = getScreenParam;
		this.getPosition = getPosition;
		this.getHeight = getHeight;
		this.buildGallery = buildDivs;
		this.destroyDivs = destroyDivs;
		this.showGallery = showGallery;
		this.fadeElement = fadeElement;
		this.scrollElement = scrollElement;
		this.loadImage = loadImage;
		this.loadImageSets = loadImageSets;
		this.showStory = showStory;
		this.initGallery = initGallery;
		
		//getSlidePosition
		function getPosition() {
			return Math.floor($('galleryHolder').scrollLeft/screenWidth)-0;
		}	
		//getHeight
		function getHeight() {
			if (document.all) {
				//winHeight = document.body.scrollHeight;
				winHeight = document.documentElement.clientHeight;
			} else {
				//winHeight = window.innerHeight;
				winHeight = document.documentElement.offsetHeight;
			}

			htmlHeight = document.documentElement.scrollHeight;

			if (htmlHeight < winHeight) {
				htmlHeight = winHeight;
			}
			return htmlHeight;
		}
		//getScreenSize
		function getScreenParam(param) {
			if (self.innerHeight) { var screenX = self.innerWidth; var screenY = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { var screenX = document.documentElement.clientWidth; var screenY = document.documentElement.clientHeight; } else if (document.body) { var screenX = document.body.clientWidth; var screenY = document.body.clientHeight; } 
			return eval(param);
		}
		screenWidth = this.screenParam('screenX');
		screenHeight = this.screenParam('screenY');
		
		//animations
		function scrollElement(newX) {
			var scroll = new Fx.Scroll('galleryHolder', { wait: false, duration: 1000, transition: Fx.Transitions.Quad.easeOut,
				onComplete: function() { 
					loadImageSets();
				}
			}); 
			scroll.scrollTo(screenWidth*newX);
		}
		function fadeElement(element, newAlpha) {
			var fade = new Fx.Styles($(element), {duration: 1000,wait: false,transition: Fx.Transitions.Quad.easeOut});
			if (newAlpha != 0) {
				$(element).setStyles({display:'',opacity: 0});
				oldAlpha = 0;
			} else {
				oldAlpha = $(element).getStyle('opacity');
			}
			fade.start({'opacity': [oldAlpha, newAlpha]});
		}
		function showImage(element) {
			var obj = $(element);
			var fade = new Fx.Styles(obj, { duration: 2000, wait: false, transition: Fx.Transitions.Quad.easeOut }); 
			$(element).setStyles({display:'',opacity: 0});
			fade.start({'opacity': [0, 1.0]});
		}
		
		//build Interface
		function initBuild() {
			objBody = document.getElementsByTagName("body").item(0);
			objOverlay = document.createElement("div");
			objOverlay.setAttribute('id','overlay');
			objOverlay.style.display = 'none';
			objOverlay.style.height = getHeight()+'px';
			objBody.appendChild(objOverlay);
				
			objGalleryHolder = document.createElement("div");
			objGalleryHolder.setAttribute('id','galleryHolder');
			objGalleryHolder.style.display = 'none';
			objGalleryHolder.style.height = screenHeight+'px';
			objGalleryHolder.style.width = screenWidth+'px';
			objBody.appendChild(objGalleryHolder);
			
			objGalleryImages = document.createElement("div");
			objGalleryImages.setAttribute('id','galleryImages');
			objGalleryImages.style.height = screenHeight+'px';
			objGalleryImages.style.position = 'relative';
			objGalleryImages.style.align = 'left';
			objGalleryHolder.appendChild(objGalleryImages);
			
			objClose = document.createElement("img");
			objClose.setAttribute('id','close');
			objClose.style.position = 'absolute';
			objClose.style.zIndex = '120';
			objClose.style.top = 20+'px';
			objClose.style.right = 20+'px';
			objClose.setAttribute('src', closeURL);
			objClose.style.display = 'none';
			objBody.appendChild(objClose);
								
			objPrevLink = document.createElement("a");
			objPrevLink.setAttribute('id','prev');
			objPrevLink.setAttribute('href','');
			objPrevLink.style.display = 'none';
			objPrevLink.style.position = 'absolute';
			objPrevLink.style.height = 165+'px';
			objPrevLink.style.top = ((screenHeight/2)-(165/2))+'px' //165 is button image height
			objBody.appendChild(objPrevLink);
			objPrevLink.innerHTML = '<span>Previous</span>';
			
			objNextLink = document.createElement("a");
			objNextLink.setAttribute('id','next');
			objNextLink.setAttribute('href','');
			objNextLink.style.display = 'none';
			objNextLink.style.position = 'absolute';
			objNextLink.style.height = 165+'px';
			objNextLink.style.top = ((screenHeight/2)-(165/2))+'px' //165 is button image height
			objBody.appendChild(objNextLink);
			objNextLink.innerHTML = '<span>Next</span>';
			
			$('close').addEvent('click', function(event) { destroyDivs();}); 
			$('next').addEvent('click', function(event) { 
				event = new Event(event).stop(); 
				if(getPosition() < totalImages-1) { 
					nextX = (getPosition()+1);
					scrollElement(nextX);
					fadeElement('storyBody_'+getPosition(), 0);
					fadeElement('storyBg_'+getPosition(), 0);
					fadeElement('story_'+getPosition(), 0);
					
				}
				setArrowState();
			}); 
			$('prev').addEvent('click', function(event) { 
				event = new Event(event).stop(); 
				if(getPosition() != 0) { 
					prevX = (getPosition()-1); 
					scrollElement(prevX); 
				}
				fadeElement('storyBody_'+getPosition(), 0);
				fadeElement('storyBg_'+getPosition(), 0);
				fadeElement('story_'+getPosition(), 0);
			}); 
			function setArrowState() {
				if(getPosition() < totalImages-1) { 
					if($('next').getStyle('opacity') == 0.5) {
						fadeElement('next', 0.9);
					}
				 }else { 
					fadeElement('next', 0.5);
				}
			}

		}
		function buildDivs() {
			window.addEvent('resize', delayResize);
			for(i=0; i<=totalImages; i++) {
				$('galleryImages').style.width = (i+1)*screenWidth+'px';
				
				//set specific art piece
				var objArtPiece = document.createElement("div");
				objArtPiece.setAttribute('id','artPiece_'+i);
				objArtPiece.setAttribute('class','artPiece');
				objArtPiece.setAttribute('name',i);
				//objArtPiece.style.position = 'relative';
				//objArtPiece.style.align ='left';
				objArtPiece.style.width = screenWidth+'px';
				
				//set subpieces
				//preload
				var objPreload = document.createElement("div");
				objPreload.setAttribute('id','artLoad_'+i);
				objPreload.setAttribute('class','artLoad');
				objPreload.style.position = 'absolute';
				objPreload.style.zIndex = '103';
				objPreload.style.display = 'none';
				//preloader
				var objPreloader = document.createElement("img");
				objPreloader.setAttribute('id','artLoader_'+i);
				objPreloader.setAttribute('class','preloader');
				objPreloader.setAttribute('src', preloaderURL);
				//artImage
				var objArtImage = document.createElement("div");
				objArtImage.setAttribute('id','artImage_'+i);
				objArtImage.setAttribute('class','artImage');
				objArtImage.style.display = 'none';
				
				//imageDiv
				var objImageDiv = document.createElement("div");
				objImageDiv.setAttribute('id','imageDiv_'+i);
				objImageDiv.setAttribute('class','imageDiv');
				objImageDiv.style.background = '#000000';
				objImageDiv.style.padding = '30px';
				objImageDiv.style.padding.width = screenWidth+'px';
				//
				var objImage = document.createElement("img");
				objImage.setAttribute('id','image_'+i);
				objImage.setAttribute('class','image');
				//footer
				var objArtFooter = document.createElement("div");
				objArtFooter.setAttribute('id','artFooter_'+i);
				objArtFooter.setAttribute('class','artFoot');
				objArtFooter.style.width = '100%';
				//story overlay
				var objstoryBody = document.createElement("div");
				objstoryBody.setAttribute('id','storyBody_'+i);
				objstoryBody.setAttribute('class','storyBody');
				objstoryBody.style.position = 'absolute';
				objstoryBody.style.borderTop = '12px solid #8C8C8C';
				objstoryBody.style.zIndex = '106';
				objstoryBody.style.bottom = 140+'px';
				objstoryBody.style.height = 300+'px';
				objstoryBody.style.width = '100%';
				objstoryBody.style.display = 'none';
				//storybg
				var objstoryBg = document.createElement("div");
				objstoryBg.setAttribute('id','storyBg_'+i);
				objstoryBg.setAttribute('class','storyBg');
				objstoryBg.style.position = 'absolute';
				objstoryBg.style.zIndex = '107';
				objstoryBg.style.height = 300+'px';
				objstoryBg.style.width = '100%';
				objstoryBg.style.background = '#000000';
				objstoryBg.style.display = 'none';
				//story
				var objStory = document.createElement("div");
				objStory.setAttribute('id','story_'+i);
				objStory.setAttribute('class','story');
				objStory.style.position = 'absolute';
				objStory.style.zIndex = '108';
				objStory.style.width = '100%';
				//objStory.style.display = 'none';
				
				
				//place everything in artPiece
				objImageDiv.appendChild(objImage);
				objArtImage.appendChild(objImageDiv);
				objArtPiece.appendChild(objArtImage);
				objPreload.appendChild(objPreloader);
				objArtPiece.appendChild(objPreload);
				objstoryBody.appendChild(objStory);
				objstoryBody.appendChild(objstoryBg);
				objArtImage.appendChild(objstoryBody);
				objImageDiv.appendChild(objArtFooter);
				
				//place artPiece in gallery
				objGalleryImages.appendChild(objArtPiece);
				
			}
			currNum = 0;
			var prevLink = $('prev').href = '#'+'artPiece_'+(currNum-1);
			var nextLink = $('next').href = '#'+'artPiece_'+(currNum+1);
			cantorGallery.showGallery(); //this.showGallery();
		}
		function destroyDivs() {
			window.removeEvent('resize', delayResize);
			//$('body').setStyles({overflow:'auto'});
			var fadeClose = new Fx.Styles($('close'), {duration: 1000,wait: false,transition: Fx.Transitions.Quad.easeOut});
			var fadePrev = new Fx.Styles($('prev'), {duration: 1000,wait: false,transition: Fx.Transitions.Quad.easeOut});
			var fadeNext = new Fx.Styles($('next'), {duration: 1000,wait: false,transition: Fx.Transitions.Quad.easeOut});
			var fadeGallery = new Fx.Styles($('galleryHolder'), {duration: 1000,wait: false,transition: Fx.Transitions.Quad.easeOut, 
				onComplete: function() {
					fadeOverlay.start({'opacity': [0.9, 0]});
				}
			});
			var fadeOverlay = new Fx.Styles($('overlay'), {duration: 1000,wait: false,transition: Fx.Transitions.Quad.easeOut, 
				onComplete: function() {
					objBody.removeChild(objOverlay);
					objBody.removeChild(objGalleryHolder);
					objBody.removeChild(objClose);
					location.href = getBaseURL();
					cantorGallery = new Gal();
				}
			});
			fadeClose.start({'opacity': [1.0, 0]});
			fadePrev.start({'opacity': [1.0, 0]});
			fadeNext.start({'opacity': [1.0, 0]});
			fadeGallery.start({'opacity': [1.0, 0]});
		}
		function initGallery() {
			$('galleryHolder').scrollLeft = 500;
			//alert($('galleryHolder').scrollLeft);
		}
		function showGallery() {
			//$('body').setStyles({overflow:'hidden'});
			fadeElement('overlay', 0.9);		
			fadeElement('galleryHolder', 1.0);	
			fadeElement('prev', 0.9);	
			fadeElement('next', 0.9);
			fadeElement('close', 0.9);
			var scrollUp = new Fx.Scroll(window, {duration: 500}).toTop();
			//
			setTimeout ('cantorGallery.loadImageSets();', 1000);
		}
		
		function Loaded(image) {
			//alert('loaded'+image);
			if($('artPiece_'+image)) {
				if($('artPiece_'+image).className == 'artPiece-Loaded') { return true; }
			}
			return false;
		}
		function loadImage(imageNum) {
			//load image content
			var artPiece = $('artPiece_'+imageNum);
			//set as loaded
			artPiece.className = 'artPiece-Loaded';
			//show Preloader
			$('artLoad_'+imageNum).style.marginTop = (screenHeight/2)-(16/2)+'px';
			$('artLoad_'+imageNum).style.marginLeft = (screenWidth/2)-(16/2)+'px';
			$('artLoad_'+imageNum).style.display = '';
			//load Curr
			$('image_'+imageNum).src = _photos[imageNum].myImageURL;
			var loadCurrImage = new Image();
			loadCurrImage.onload=function(){
				//size & center image
					sizeImage(loadCurrImage, imageNum);
				//show caption
					if(_photos[imageNum].myTitle == '') {
						title = 'David Cantor Art';
					} else {
						title = _photos[imageNum].myTitle
					}
					if(_photos[currNum].myCaption == '') {
						caption = '';
					} else {
						caption = _photos[imageNum].myCaption;
					}
					if(_photos[imageNum].myStory == '') {
						story = '';
					} else {
						story = _photos[imageNum].myStory;
					}
					if(story != '') { var storyLink = '<p class="artFooter"><a class="artFooter" href="#" onclick="cantorGallery.showStory(); return false;">- Story -</a></p>' } else { var storyLink = ''; }
					$('artFooter_'+imageNum).innerHTML = '<h1 class="artFooter">'+title+'</h1><p class="artFooter">'+caption+'</p>'+storyLink;	
					//show story
					$('story_'+imageNum).innerHTML = '<h1 class="artStory">'+title+'</h1><p class="artStory">'+story+'</p>';	
				//show image
				showImage('artImage_'+imageNum);
				//drop preloader graphic
				fadeElement('artLoad_'+imageNum, 0);
				loadCurrImage.onload=function(){};
			}
			loadCurrImage.src = _photos[imageNum].myImageURL;
		}
		function loadImageSets() {
			currImage = getPosition();
			lastofSet = currImage+4;
			if(!Loaded(lastofSet)) {
				for(i=currImage; i<=currImage+3; i++) {
					if(!Loaded(i)) {
						loadImage(i);
					}
				}
			}
		}
		function showStory() {
			var currNum = getPosition();
			if (($('storyBody_'+currNum).getStyle('opacity') == 0) || ($('storyBody_'+currNum).getStyle('display') == 'none')) {
				fadeElement('storyBody_'+currNum, 1.0);
				fadeElement('storyBg_'+currNum, 0.9);
				fadeElement('story_'+currNum, 1.0);
			} else {
				fadeElement('storyBody_'+currNum, 0);
				fadeElement('storyBg_'+currNum, 0);
				fadeElement('story_'+currNum, 0);
			}
		}
		
		this.build = initBuild();
		var t;
		function delayResize() {
			t = setTimeout(sizeStage,2000)
		}
		this.delayResize = delayResize;
		function sizeStage() {
			clearTimeout(t);
			screenWidth = getScreenParam('screenX');
			screenHeight = getScreenParam('screenY');
			//
			$('galleryHolder').style.height = screenHeight+'px';
			$('galleryImages').style.height = screenHeight+'px';
			//
			$('prev').style.top = ((screenHeight/2)-(165/2))+'px' //165 is button image height
			$('next').style.top = ((screenHeight/2)-(165/2))+'px' //165 is button image height
			for(i=0; i<=10; i++) {
				$('galleryImages').style.width = (i+1)*screenWidth+'px';
				$('artPiece_'+i).style.width = screenWidth+'px';
				sizeImage(0, i)
			}
		}
		function sizeImage(image, num) {
			//////alert($(image).height);
			if(image == 0) {
				image = 'image_'+num;
			}
			if($('artPiece_'+currNum).className == 'artPiece-Loaded') {
				origWidth = _photos[num].myWidth;
				origHeight = _photos[num].myHeight;
				if ((origWidth >= 720 && screenWidth <= 1024)) {
					resizedWidth = origWidth*.7;
					resizedHeight = origHeight*.7;
				} else if ((origHeight >= 520 && screenHeight <= 768)) {
					resizedWidth = origWidth*.65;
					resizedHeight = origHeight*.65;
				} else {
					resizedWidth = origWidth*.85;
					resizedHeight = origHeight*.85;
				}
				$('image_'+num).width = resizedWidth;
				$('image_'+num).height = resizedHeight;
			}
			$('imageDiv_'+num).style.width = resizedWidth+'px';
			$('imageDiv_'+num).style.marginTop = (screenHeight/2)-((resizedHeight+100)/2)+'px';
			$('imageDiv_'+num).style.marginLeft = (screenWidth/2)-((resizedWidth)/2)-30+'px';
			$('storyBody_'+num).style.marginLeft = (screenWidth/2)-((resizedWidth)/2)+'px'; //half total padding
			$('storyBody_'+num).style.width = resizedWidth+'px';
			$('story_'+num).style.overflow = 'auto';
			$('story_'+num).style.width = (resizedWidth-20)+'px';
			$('story_'+num).style.padding = '0 10px 0 10px';
			$('story_'+num).style.height = 300+'px';
		}
		
	}