var DK = {
	
	// determine if the large size viewer is active
	viewerActive: false,
	
	// the current image id
	currentImage: false,
	
	
	// center some content, or something
	centerContent: function() {
		var 
		vpDimensions = document.viewport.getDimensions(),
		children = $('wrap').childElements(), // get the children of the wrap element
		element, // key during the for loop
		totalHeight = 0, // a place to save the total height of the child elements
		top;

		for (var i=0; i<children.length; i++)
		{
		    totalHeight += children[i].getHeight();
		}
		
		top = (vpDimensions.height / 2) - (totalHeight / 2);
		
		$('wrap').setStyle({ "top": top+"px", "visibility":"visible" });
	},
	
	
	// create the portfolio thumbnails
	portfolioThumbnails: function() {
		var 
		imageLength = portfolioImages.length, // the number of images 
		imageCount, // a couont variable to use during the loop
		image, // the current image
		thumbnailsEl = new Element( 'span', { "id":"thumbnails" }), // an element to store thumbnails
		thumbnailEl; // an element for the current image during the loop
		
		// loop over all the images
		for (imageCount=0; imageCount<imageLength; imageCount++)
		{			
			// create the thumbnail element
			thumbnailEl = new Element( 'img', {
				"src":"/images/tn"+(imageCount+1)+".jpg",
				"class":"tn",
				"id":"image_"+imageCount
			});
			
			// inser the element into the thumbnails element
			thumbnailsEl.insert( thumbnailEl );
		}
		
		// update the portfolio div with the thumbnails
		$('portfolio').update( thumbnailsEl );
		
		// add the copyright image
		$('portfolio').insert( new Element( 'img', { src:"/assets/img/copyrights.png", "class":"copyright" }));
		$('portfolio').insert( '<div class="fb-like" style="float:right; margin-top:2px;" data-href="www.dancingkangaroo.com/portfolio.php" data-send="false" data-layout="button_count" data-show-faces="false" data-font="arial"></div>' );
		
		// observe clicks on the portfolio span
		Event.observe( 'portfolio', 'click', function( ev ) {
			var el = ev.element();

			// if the element was an image
			if (el.tagName == "IMG") DK.open( el.id.replace( "image_", "" ));
		});
	},
	
	
	// view the high res version of an image
	open: function( imageId ) {

		if (DK.viewerActive == false)
		{
			DK.viewerActive = true;
			$( "portfolio" ).setStyle({ "opacity":".3" });
			DK.view( imageId );
		}
	},
	
	
	// close the image viewer
	close: function( ev, opacity ) {
		var 
		arrowLeft = $( "wrap" ).down('.arrow_left'),
		arrowRight = $( "wrap" ).down('.arrow_right');
		
		if (arrowLeft != undefined) arrowLeft.hide().remove();
		if (arrowRight != undefined) arrowRight.hide().remove();
		$( "image_popup" ).hide().remove();
	
		if (opacity == undefined)
		{
			DK.viewerActive = false;
			$( "portfolio" ).setStyle({ "opacity":"1" });
		}
	},
	
	
	// view an image
	view: function( imageId ) {
		var 
		vpDimensions = document.viewport.getDimensions(),
		portfolioDimensions = $( "portfolio" ).getDimensions(),
		height = portfolioImages[ imageId ][2],
		width = portfolioImages[ imageId ][1],
		path = portfolioImages[ imageId ][0],
		top = parseInt( $("portfolio").getStyle( "top" )),
		left = (((parseInt( $("portfolio").getStyle( "left" ))+portfolioDimensions.width) / 2) - ( width / 2 )-10).round(),
		whiteEl = new Element( 'span', { "id":"image_popup" }).setStyle({ top: top+"px",left: left+"px", height: height+20+"px", width:width+"px" }),
		closeEl = new Element( 'img', { src:"/assets/img/close.png", "class":"close" }),
		imageEl = new Element( 'img', { src:path }).setStyle({ "float":"left" }),
		leftArrowEl,
		rightArrowEl;
		
		DK.currentImage = parseInt( imageId );
		
		// observe clicks on the close 
		closeEl.observe( "click", DK.close );
				
		whiteEl.insert( closeEl ).insert( imageEl );
		
		$( "wrap" ).insert( whiteEl );
		
		// if there is a previous image
		if (imageId > 0)
		{
			leftArrowEl = new Element( 'img', { src: "/assets/img/arrow_left.png", "class":"arrow_left" });
			top = parseInt( whiteEl.getStyle( "top" )) + (height/2)-30+"px";
			left = parseInt( whiteEl.getStyle( "left" )) - 54+"px";
			leftArrowEl.setStyle({ top: top, left:left });
			
			leftArrowEl.observe( "click", DK.prev );
			
			$('wrap').insert( leftArrowEl );
		}
		
		// if there is a next image
		if (imageId < (portfolioImages.length-1))
		{
			rightArrowEl = new Element( 'img', { src: "/assets/img/arrow_right.png", "class":"arrow_right" });
			top = parseInt( whiteEl.getStyle( "top" )) + (height/2)-30+"px";
			left = parseInt( whiteEl.getStyle( "left" )) + width+20 +"px";
			rightArrowEl.setStyle({ top: top, left:left });
			
			rightArrowEl.observe( "click", DK.next );
			
			$('wrap').insert( rightArrowEl );
		}
	},
	
	
	// move to the previous image
	prev: function() {
		DK.close( false, true );
		
		DK.view(( DK.currentImage-1 ));
	},
	
	
	// move to the next image
	next: function() {
		DK.close( false, true );
		
		DK.view(( DK.currentImage+1 ));
	}
	
}