// JavaScript Document

document.observe('dom:loaded', function(){	
	
	// Select all container DIVs
	$$('div.imageTransition').each(function(obContainerDiv){
		
		obContainerDiv.removeClassName('hidden');
		
		var aryContDimensions = obContainerDiv.getDimensions();
		var aryImages = obContainerDiv.childElements();
		var intTotalImages = aryImages.size();
		var intSlideWidth = aryContDimensions.width * intTotalImages;
		var idContainerDiv = obContainerDiv.identify()
		
		obContSlide = new Element('div',{	'class':'slideContainer',
																			'style':'width: '+intSlideWidth+'px;'});
		obContID = obContSlide .identify();
		//insert slide container
		obContainerDiv.insert(obContSlide);
		
		// add each image to a continer that fixes it's display space to the smae height and with as the container
		aryImages.each(function(obImage){
				obImage.remove();
				obContImage = new Element('div',{	'class':'imageContainer',
																					'style': 'width: '+aryContDimensions.width+'px; height: '+aryContDimensions.height+'px;'});										
				obContImage.insert(obImage);
				obContSlide.insert(obContImage);				
		});
				
		// set up thumbnails
		if (obContainerDiv.hasClassName('thumbnail')){	
			obThumbnailContainer = new Element('div',{'class':'thumbnailContainer'});
			var thumbCount = 1;
			aryImages.each(function(thumbImage){
					obThumbHolder = new Element('div',{'class':'thumbnail'});
					obThumbnailContainer.insert(obThumbHolder);								

					obThumbImage = new Element('img',{'src':	thumbImage.readAttribute('src'),'class':'image_'+thumbCount});
					obThumbHolder.insert(obThumbImage);	
					
					thumbCount ++;
					
					// next click event
					Event.observe(obThumbHolder, 'click',function(){
						eventTransition(obContainerDiv.identify(),thumbCount,this);			
					});
			});
			
			obContainerDiv.insert({'after':obThumbnailContainer});
		}	
		
		//CREATE NAVIGATION
		//container
		if(obContainerDiv.previousSiblings()[0].hasClassName('imageSlideInfo')){
			//info container exisits
			obInfo = obContainerDiv.previousSiblings()[0];
		} else {
			// create info container
			obInfo = new Element('div',{'class':'imageSlideInfo'});
		}
		
		if(obContainerDiv.hasClassName('alttitles')){
			if(aryImages[0].readAttribute('alt') != null){
				var strNewTitle = aryImages[0].readAttribute('alt');
			} else{ 
				var strNewTitle = "";
			}
			//update title
			obInfo.childElements()[0].update(strNewTitle);
		}
		
		//nav info		
		obTotalLabel = new Element ('span',{'class':'total'}).update(intTotalImages);
		obInfo.insert({'bottom':obTotalLabel});
		
		spacer = new Element ('span',{'class':'spacer'}).update('/');
		obTotalLabel.insert({'before':spacer});
		
		obCurrentLabel = new Element ('span',{'class':'current'}).update('1');
		spacer.insert({'before':obCurrentLabel});
				
		//nav holder
		obNav = new Element('span',{'class':'imageSlideNavigation'});
		
		if(obContainerDiv.hasClassName('hidenav')){
			obNav.setStyle({'display':'none'});
		}
		
		obInfo.insert({'bottom':obNav});
		obNav.insert({'bottom':new Element('span').update('|')});
		
		//next arrow
		obNavNext = new Element ('span',{'class':'next'}).update('>')
		
		obNav.insert({'bottom':obNavNext});
				
		// next click event
		Event.observe(obNavNext, 'click',function(){
			eventTransition(obContainerDiv.identify(),'next');			
		});
		
		
	// set up pageNumber
	if(intTotalImages>1){
		for (i=intTotalImages;i>=1;i=i-1) {
				obPageLink = new Element('span',{'class':'page'}).update(i);
				if(i==1){ 
					obPageLink.addClassName('selected');
				}
				obNav.insert({'top':obPageLink});
			
				// next click event
				Event.observe(obPageLink, 'click',function(){
					// remove 'selected' classs
					$$('div.imageSlideInfo span.page').each(function(obButton){
						obButton.removeClassName('selected');																																										
					});
					this.addClassName('selected');
					eventTransition(obContainerDiv.identify(),'page',this);			
				});
			}
		}
	

		
		//prev arrow
		onNavPrev = new Element ('span',{'class':'prev'}).update('<');
		obNav.insert({'top':onNavPrev});
		
		// next prev event
		Event.observe(onNavPrev, 'click',function(){			
			eventTransition(obContainerDiv.identify(),'previous');		
		});
		
		//insert container
		obContainerDiv.insert({'before':obInfo});
		
		if(obContainerDiv.hasClassName('autoplay')){
			new PeriodicalExecuter(function(pe) {
				eventTransition(obContainerDiv.identify(),'next');		
			}, 5);
		}

		$$('iframe').each(function(ob_iframe){
			ob_iframe.hide();
		});
		
		var curCont = $$('div.imageTransition div.portfolio')[0];
		if($$('div#'+curCont.identify()+' iframe').size() >0){
			curFrame = $$('div#'+curCont.identify()+' iframe')[0];
			curFrame.show();
			curFrame.writeAttribute('src',curFrame.readAttribute('title'));
			//alert(curFrame.readAttribute('title'));
		}
		
		
	});	
	
	function eventTransition(imageContainer,mixRequest,button){
		
		// hide all iFrames
		$$('iframe').each(function(ob_iframe){
			ob_iframe.hide();
		});
		
		
		var navContainer = $(imageContainer).previousSiblings()[0];		
		var intTotal =0;
		var intCurrent =0;
		var dimensions = $(imageContainer).getDimensions();
		var intRequest = 1;
		
		var obHolder = $(imageContainer).descendants()[0];
		
		navContainer.descendants().each(function(navElement){												
			// total
			if(navElement.hasClassName('total')){
				obTotal = navElement;
				intTotal = obTotal.innerHTML;
			}
			// current
			if(navElement.hasClassName('current')){
				obCurrent = navElement;
				intCurrent = obCurrent.innerHTML;
				intRequest = intCurrent;
			}

		});
	
		switch(mixRequest)
		{
		case 'next':
			if((1*intCurrent) >= intTotal){
				intRequest = 1;
			} else {
				intRequest = (1*intCurrent)+1;
			}
			break;    
		case 'previous':
			if(intCurrent == 1){
				intRequest = intTotal;
			} else {
				intRequest = (1*intCurrent)-1;
			}
			break;
		case 'page':
			var intRequest = button.innerHTML.match("([0-9]+)")[1];
		break;
		default:
			//image
			var intRequest = button.descendants()[0].readAttribute('class').match("([0-9]+)")[1];
		}
		obCurrent.update(intRequest);
		
		
		if($(imageContainer).hasClassName('alttitles')){
			//does image have an alt tag?
			var obMoveToImage = obHolder.childElements()[intRequest-1].childElements()[0];
			
			if(obMoveToImage.readAttribute('alt') != null){
				var strNewTitle = obMoveToImage.readAttribute('alt');
			} else{ 
				var strNewTitle = "";
			}
			//update title
			navContainer.childElements()[0].update(strNewTitle);
		}
		
		if ($(imageContainer).hasClassName('fade')){
			obHolder.fade({ 	duration: 0.6,
				afterFinish: function(){
					obHolder.setStyle({'left':(1-intRequest)*dimensions.width+'px'});
					obHolder.appear({duration: 0.6});
					
				} 								
			})
													
		} else {
			// CHOOSE TRANSITION 
			new Effect.Move(obHolder,{ 
					x: (1-intRequest)*dimensions.width, 
					y: 0, 
					mode: 'absolute',
					afterFinish: function(){
						
						var curCont = $$('div.imageTransition div.portfolio')[intRequest-1];
						if($$('div#'+curCont.identify()+' iframe').size() >0){
							curFrame = $$('div#'+curCont.identify()+' iframe')[0];
							curFrame.show();
							curFrame.writeAttribute('src',curFrame.readAttribute('title'));
							//alert(curFrame.readAttribute('title'));
						}
						//$$('div#'+currCont.identify()+' div.embedContainer')[0].removeClassName('hidden');
					}
			});
		}
			
		
	
	}
	
});