var ie6Preload;
	var ieVersion = window.details.ieVersion();
	var isIE = ieVersion > -1;
	var isOpera = navigator.appName.toLowerCase().contains('opera');
	var isIE6 = ieVersion > -1 && ieVersion < 7;
	var isMacSafari = (navigator.appVersion.indexOf("Mac")!=-1&&navigator.appVersion.indexOf("Safari")!=-1);
	var isMacFF = (navigator.appVersion.indexOf("Mac")!=-1&&navigator.appVersion.indexOf("Safari")==-1);
	
	var viewBoxPaddingTop = 0;
	var viewBoxPaddingBottom = (isIE)?40:32;
	var viewBoxPaddingRight = 32;
	var viewBoxMaxHeight = 625;
	var viewBoxLoadLatency = 600;

	var tmrExpand;
	var itemDimensions;
	var intThumbnails = 0;
	var currentItemArgs;

	// IE RENDERS THINGS DIFFERENTLY.
	if(isIE){
		viewBoxPaddingRight += 8;
	}

	function viewItem(args,basePath){
		args.caption = fixEntities(args.caption).trim();
		args.name = fixEntities(args.name).trim();
		
		invoke_tracking(current_client_name + ' - ' + args.name + ' (' + args.id + ')');
		
		if(basePath) args.url = basePath + args.url;		
		
		itemDimensions = [];		
		var showBox = true;
		var viewBox = $('viewBox');
		var viewBoxDescription = $('viewBoxDescription');

		// RESET VIEWBOX TO LOADING
		if(isIE){
		    viewBox.style.width = '70px';
	    } else {
	        viewBox.style.width = '50px';
	    }
	    if(isIE){
		    viewBox.style.height = '70px';
	    } else {
	        viewBox.style.height = '50px';
	    }
		viewBox.style.backgroundImage = 'url(images/loading-snake.gif)';
		viewBox.update('');

		if(args.height>viewBoxMaxHeight&&args.type!='url') args.height = viewBoxMaxHeight;

		switch(args.type){
			case 'img':
				window.setTimeout(function(){
				    // PREPARE VIEWBOX CONTENTS
				    var viewBoxHtml = '<div id="viewBoxInner"><img src="' + args.url + '" id="viewBoxItem" onclick="javascript:closeViewBox();" /></div><div style="padding-left:16px;padding-right:16px;" id="viewBoxBottomInfo"></div></div>';
				    viewBox.update(viewBoxHtml);

				    // IMAGE EVENT HANDLING
				    if(isIE6){//isIE6||isOpera
					    // IE6 HAS IMAGE LOADING ISSUES
					    ie6Preload = new Image();
					    ie6Preload.src = args.url;
					    Event.observe(ie6Preload,'load',
						    function(){
							    var viewBoxItem = $('viewBoxItem');
							    viewBoxItem.src = ie6Preload.src;
							    image_loaded(viewBoxItem);
						    }
					    ,false);
					    Event.observe(ie6Preload,'error',function(){ closeViewBox(); },false);
				    }else{
					    Event.observe('viewBoxItem','error',function(){ closeViewBox(); },false);
					    Event.observe('viewBoxItem','load',function(){image_loaded($('viewBoxItem'));},false);
				    }
				},viewBoxLoadLatency);
			break;
				
			case 'swf':
				var width = args.width || 300;
				var height = args.height || 300;
				itemDimensions = [width,height];
		
				// PREPARE VIEWBOX CONTENTS
				viewBox.update('<div id="viewBoxInner"><div id="viewBoxItem"><img src="/images/spacer.gif" style="width:'+width+'px;height:'+height+'px" /></div></div>');

				writeFlashObject('viewBoxItem',args.url,width,height);
				window.setTimeout(sizeViewBoxToFit,viewBoxLoadLatency);
			break;
			
			case 'flv':
				var width = args.width || 320;
				var height = args.height || 240;
				itemDimensions = [width,height];
				
				// PREPARE VIEWBOX CONTENTS
				viewBox.update('<div id="viewBoxInner"><div id="viewBoxItem"><img src="/images/spacer.gif" style="width:'+width+'px;height:'+height+'px" /></div></div>');
				var fileExtension = args.url.getExtension();
				var fileName = args.url.getFileName();
				var imgUrl = '/portfolio/thumbnails/vid_' + fileName.replace(fileExtension,'jpg');
				writeVideoObject('viewBoxItem',imgUrl,'/'+args.url,width,height);
				window.setTimeout(sizeViewBoxToFit,viewBoxLoadLatency);
			break;
			
			case 'audio':
				var width = 300;
				itemDimensions = [width,0];
				
				// PREPARE VIEWBOX CONTENTS
				var viewBoxHtml = '<div id="viewBoxInner"><div id="viewBoxItem"></div>';
				if(args.name) viewBoxHtml += '<div id="popupTitle">'+args.name+'</div>';
				if(args.caption) viewBoxHtml += '<div id="popupCaption">'+args.caption+'</div>';
				viewBoxHtml += '</div>';
				viewBox.update(viewBoxHtml);
				writeAudioObject('viewBoxItem',args.url,width);

				// PREPARE TEXT TO ALLOW DESCRIPTION HEIGHT
				viewBoxDescription.style.width = itemDimensions[0] + 'px';
				$('viewBoxDescriptionTitle').update(args.name);
				$('viewBoxDescriptionCaption').update(args.caption);
				$('viewBoxDescriptionTitle').style.display = (args.name)?'block':'none';
				$('viewBoxDescriptionCaption').style.display = (args.caption)?'block':'none';					

				window.setTimeout(function(){
					// DESCRIPTION HEIGHT IS NOW AVAILABLE; SIZE BOX TO CORRECT DIMENSIONS
					viewBoxDescription.style.top = '-500px';
					viewBoxDescription.style.left = '-500px';
					showViewBoxDescription();
					showViewBox();
					itemDimensions[1] = viewBoxDescription.clientHeight + viewBoxPaddingBottom;
					
					// BROWSER-SPECIFIC HEIGHT ADJUSTMENT
					if(isIE){
						itemDimensions[1] -= 8;
					}
					
					// IE6 WASN'T APPLYING THESE STYLES FOR SOME REASON.
					// THEN IT HAPPENED IN FF, SO JUST COVERING MY BASES.
					with($('popupTitle').style){
						fontFamily = 'arial';
						fontSize = '9.5pt';
						fontWeight = 'bold';
						color = '#336699';
						paddingTop = '6px';
					}
					sizeViewBoxToFit();
				},500);
				
			break;
			
			case 'iframe':
				if(args.width) args.width += 32;
				var width = args.width || 800;
				var height = args.height || 600;
				itemDimensions = [width,height];
				
				// PREPARE VIEWBOX CONTENTS
				viewBox.update('<div id="viewBoxInner"><div id="viewBoxItem"><iframe src="' +args.url+'" style="width:'+width+'px;height:'+height+'px" frameborder=0></iframe></div></div>');
				
				window.setTimeout(sizeViewBoxToFit,viewBoxLoadLatency);
			break;
			
			case 'url':
				var width = args.width || 800;
				var height = args.height || 600;
				showBox = false;
				if(args.url.indexOf('http:')>-1) args.url = args.url.replace('portfolio/','');
				popWindow(args.url,width,height);
			break;
			
			default:
				// TODO
				//alert(args.type + ' not yet supported');
				showBox = false;
			
		}

		if(showBox){
			showViewBox();
			$('viewBoxDescriptionTitle').update(args.name);
			$('viewBoxDescriptionCaption').update(args.caption);
		}
		
		currentItemArgs = args;
		
	}
	
	function image_loaded(srcElement){
		$('viewBoxInner').style.display = 'block';
		itemDimensions = [srcElement.clientWidth,srcElement.clientHeight-viewBoxPaddingTop];
		sizeViewBoxToFit();
	}
	
	function sizeViewBoxToFit(){
		$('viewBoxInner').style.display = 'block';

		var viewBox = $('viewBox');

		// TEMPORARILY SET TO FULL DIMENSIONS
		var fullWidth = parseFloat(itemDimensions[0]) + parseFloat(viewBoxPaddingRight);
		var fullHeight = parseFloat(itemDimensions[1]) + parseFloat(viewBoxPaddingBottom) + parseFloat(viewBoxPaddingTop);
		viewBox.style.visibility = 'hidden';
		viewBox.style.height = fullHeight + 'px';
		viewBox.style.width = fullWidth + 'px';
		viewBox.style.backgroundImage = 'none';
		showViewBoxDescription();

		// SET VIEWBOX LOCATION
		resizeDarkScreen(true);

		// RESIZE BACK DOWN
		viewBox.style.width = '50px';
		viewBox.style.height = '50px';
		viewBox.style.visibility = 'visible';

		// SHOW ITEM
		$('viewBoxInner').style.visibility = 'visible';

		// BEGIN TO EXPAND VIEWBOX
		window.setTimeout(
			function(){
				tmrExpand = window.setInterval(expandViewBox,10);
			}
		,100);
	}

	function expandViewBox(){
		var increment = 48;
		
		// DETERMINE DIMENSIONS
		var viewBox = $('viewBox');
		var fullWidth = parseFloat(itemDimensions[0]) + parseFloat(viewBoxPaddingRight);
		var fullHeight = parseFloat(itemDimensions[1]) + parseFloat(viewBoxPaddingBottom) + parseFloat(viewBoxPaddingTop);
		var currentWidth = viewBox.clientWidth;
		var currentHeight = viewBox.clientHeight;

		if(currentWidth+increment<fullWidth||currentHeight+increment<fullHeight){
			if(currentWidth+increment<fullWidth){
				viewBox.style.width = (currentWidth+increment) + 'px';				
			}
			
			if(currentHeight+increment<fullHeight){
				viewBox.style.height = (currentHeight+increment) + 'px';
			}
		}else{
			// FULL SIZE REACHED; STOP EXPANDING
			viewBox.style.width = fullWidth + 'px';
			viewBox.style.height = fullHeight + 'px';
			
			window.clearInterval(tmrExpand);
			$('viewBoxCloseAnchor').style.display = "block";
			resizeDarkScreen(true);
			showViewBoxDescription();
			if(!currentItemArgs.type.isAnyOf(['audio'])){
				var viewBoxDescription = $('viewBoxDescription');
				viewBoxDescription.style.visibility = 'visible';
			}
			if(currentItemArgs.type=='iframe'){
				// FORCE REFRESH IFRAME TO CIRCUMVENT INTERMITTENT FF/IE6 BUG
				var iframe = $$('#viewBoxInner iframe')[0];
				iframe.src = iframe.src;
			}
		}
	}

	function showViewBoxDescription(){
		var viewBox = $('viewBox');
		var viewBoxDescription = $('viewBoxDescription');
		var viewBoxDescriptionTitle = $('viewBoxDescriptionTitle');
		var viewBoxDescriptionCaption = $('viewBoxDescriptionCaption');

		var title = viewBoxDescriptionTitle.innerHTML;
		var description = viewBoxDescriptionCaption.innerHTML;

		// HIDE OR SHOW TITLE DIV
		if(title){
			viewBoxDescriptionTitle.update(title);
			viewBoxDescriptionTitle.style.display = 'block';
		}else{
			viewBoxDescriptionTitle.style.display = 'none';
		}
		
		// HIDE OR SHOW DESCRIPTION DIV
		if(description){
			viewBoxDescriptionCaption.update(description);
			viewBoxDescriptionCaption.style.display = 'block';
		}else{
			viewBoxDescriptionCaption.style.display = 'none';
		}
		
		// SHOW AND POSITION INFO DIV IF INFO TO SHOW
		if(title||description){
			if(itemDimensions[0]>300){
				//viewBoxDescription.style.width = itemDimensions[0] + 'px';
			}else{
				//viewBoxDescription.style.width = '300px';
			}
			viewBoxDescription.style.display = 'block';
		}else{
			viewBoxDescription.style.display = 'none';
		}
		resizeDarkScreen(true);
	}

	function showViewBox(){
		$('viewBox').style.display = "block";
		$('dark_screen').style.display = "block";
		resizeDarkScreen(true);
		return void(0);
	}

	function closeViewBox(){
		$('dark_screen').hide();
		$('viewBox').hide();
		$('viewBoxCloseAnchor').hide();
		$('viewBoxDescription').hide();
		$('viewBoxDescriptionTitle').hide();
		$('viewBoxDescriptionCaption').hide();
		$('viewBox').update('');
		$('viewBoxDescription').style.visibility = 'hidden';

		window.clearInterval(tmrExpand);
	}

	function fixEntities(txt){
		if(!txt) return '';
		txt = txt.replaceAll('&amp;39;','&#39;');
		txt = txt.replaceAll('&amp;34;','&#34;');
		txt = txt.replaceAll('&39;','&#39;');
		txt = txt.replaceAll('&34;','&#34;');
		return txt;
	}

	function getDescriptionHeight(){
		var ret = 0;
		var viewBoxDescription = $('viewBoxDescription');
		if(!itemDimensions[0]) return 0;
		if(!$('viewBoxDescriptionTitle').empty()||!$('viewBoxDescriptionCaption').empty()){
			viewBoxDescription.style.width = (parseFloat(itemDimensions[0]) + parseFloat(viewBoxPaddingRight)) + 'px';				
			if(viewBoxDescription.style.display!='block'){
				viewBoxDescription.style.display = 'block';
				ret = viewBoxDescription.clientHeight;
				viewBoxDescription.style.display = 'none';
			}else{
				ret = viewBoxDescription.clientHeight;
			}
		}

		return ret;
	}

	function resizeDarkScreen(repositionViewBox){
		var dark_screen_top, dark_screen_left;
		var dark_screen = $('dark_screen');
		var viewBox = document.getElementById('viewBox');
		var viewBoxCloseAnchor = $('viewBoxCloseAnchor');
		var viewBoxDescription = $('viewBoxDescription');

		// IF DARK SCREEN ISN'T VISIBLE, BAIL OUT
		if(dark_screen.style.display!='block') return;

		with (dark_screen) {
			var visibleHeight = window.details.innerHeight();
			var visibleWidth = window.details.innerWidth();
			
			dark_screen_left = (document.body.scrollLeft||document.documentElement.scrollLeft);
			dark_screen_top = (document.body.scrollTop||document.documentElement.scrollTop);
			
			if(isIE){
				style.position = 'absolute';
				style.left = dark_screen_left + 'px';
				style.top = dark_screen_top + 'px';
			}

			style.width = visibleWidth + "px";
			style.height = visibleHeight + "px";
			
			var viewBoxCoords;

			viewBoxCoords = [(((dark_screen.clientWidth - viewBox.clientWidth) / 2) + dark_screen_left),(((dark_screen.clientHeight - viewBox.clientHeight) / 2) + dark_screen_top)];
			
			// DO NOT REPOSITION VIEWBOX IF SCROLLING
			if(repositionViewBox===true){
				viewBoxCoords[1] -= getDescriptionHeight() / 2;
				viewBox.style.left = viewBoxCoords[0] + "px";
				viewBox.style.top = viewBoxCoords[1] + "px";
				
				viewBoxCloseAnchor.style.top = (parseInt(viewBox.style.top) - viewBoxCloseAnchor.clientHeight - 2) + 'px';
				viewBoxCloseAnchor.style.left = (parseInt(viewBox.style.left) + viewBox.clientWidth - viewBoxCloseAnchor.clientWidth) + 'px';
				viewBoxDescription.style.left = viewBoxCoords[0] + 'px';
				viewBoxDescription.style.top = (viewBoxCoords[1]+viewBox.clientHeight+8) + 'px';
			}
		}

	}

	// RESIZE/REPOSITION WHEN NEEDED
	Event.observe(window,'resize',resizeDarkScreen);
	Event.observe(window,'scroll',resizeDarkScreen);

function monitorThumbnails(){
	var thumbnails = $$('.thumbnail');
	thumbnails.each(
		function(item){
				var rawParams = '';
			try{
				rawParams = item.getAttribute("params");
				// GET AND DESERIALIZE RAW DATA
				var params = JSON.parse(rawParams);
				if(params){
					if(!item.getAttribute('id')){
						intThumbnails++;
						item.setAttribute('id','thumbnail_'+intThumbnails);
					}
					var id = item.getAttribute('id');
					Event.observe(id,'click',function(){viewItem(params);},false);
					item.setAttribute('params','');
				}				
			}catch(ex){
				// TODO
				if(rawParams){
					//alert('error: ' + rawParams);
				}else{
					//alert('error: ' + item.inspect());
				}
			}
		}
	);
}