(function($) {
	jQuery.fn.viewport = function(options) {
	
		stg = jQuery.extend({
			vpbgop: 0.85,
			vpfgh: 70,
			vpfgw: 70
		}, options);
		
		
		$('body').append('<div id="vpbg"></div>');
		$('body').append('<div id="vpfg"></div>');
		$('#vpfg').append('<div id="vpmain"><div id="vpcontent"></div><div id="vpcontrols"><a id="dn" href="">&lt;&lt;</a> <span id="count"></span> <a id="up" href="">&gt;&gt;</a> <a id="cls" href="">X</a></div>');
		$('#vpfg').css({'opacity':0,'width':0,'height':0});
		$('#vpbg').css({'opacity':0,'width':0,'height':0});
	
	
		$('a[rel*=viewport]').click (function() {

			/*-- set vars from screen and links --*/
			var vp = new Array('');
			vp['a'] = $(this).attr('rel').split(';');
			
			/*-- check for type --*/
			for (var idxtmp in vp['a']){ 
				if (vp['a'][idxtmp]=="image") {vp['tp']="image"; break;}
				else if (vp['a'][idxtmp]=="youtube"){vp['tp']="youtube"; break;}
				else if (vp['a'][idxtmp]=="iframe"){vp['tp']="iframe"; break;}

			
			}
			
			
			vp['noidx'] = ((vp['a'][0].indexOf('[')<0)) ? true : false;
			vp['l'] = $(this).attr('href');
			vp['i'] = 0;
			vp['b'] = new Array('');
			vp['dw'] = $(document).width();
			vp['dh'] = $(document).height();
			vp['ww'] = $(window).width();
			vp['wh'] = $(window).height();
			vp['top'] = $(document).scrollTop();
			vp['ctl'] = $('#vpcontrols').height();
	

			/*-- if image has an index, find all links with matching rel --*/
			if (vp['noidx']) {
				vp['b'][0] = vp['l']; 
			}
			else {
			$('a[rel*='+vp['a'][0]+']').each (function(i) {
				vp['b'][i] = this.getAttribute('href');
				if (vp['b'][i].indexOf(vp['l'])>-1) vp['i']=i; /*IE6 returns full path from the getAttribute above, FF and IE8 don't, so == won't work*/
			});
			}
			
			/*-- show nav depending on link amount --*/
			if (vp['b'].length==1) {
				$('#dn').hide();
				$('#up').hide();
				$('#count').hide();
			}
			else
			{
				$('#dn').show();
				$('#up').show();
				$('#count').show();
			}
			
			vpSetScrn(vp);
			vpSetNav(vp);

			return false;
		});
		
	};


	function vpSetNav(vp) {
		
		/*-- set up left and right nav links and close link--*/
		$('#up').unbind('click').click (function() {
			vp['i'] = (vp['i']+1)>vp['b'].length-1 ? 0 : vp['i']+1;
			vpShoImg(vp);
			return false;	
		});
		
		$('#dn').unbind('click').click (function() {
			vp['i'] = (vp['i']-1)<0 ? vp['b'].length-1 : vp['i']-1;
			vpShoImg(vp);
			return false;	
		});		

		$('#cls, #vpbg').unbind('click').click (function() {
			vpCloseAll(vp);		
		});

		/*-- set left right and esc keys for nav --*/
		$(document).unbind('keyup').keyup(function(event){
			if (event.keyCode == 27) {
				vpCloseAll(vp);
			}
			if (event.keyCode == 37) {
				vp['i'] = (vp['i']-1)<0 ? vp['b'].length-1 : vp['i']-1;
				vpShoImg(vp);
			}
			if (event.keyCode == 39) {
				vp['i'] = (vp['i']+1)>vp['b'].length-1 ? 0 : vp['i']+1;
				vpShoImg(vp);
			}
		});	

	}

	function vpCloseAll(vp) {
		
		/*-- hide fg anfd bg, clear image --*/
		$('#vpfg').animate({opacity:0,width:0,height:0},0);
		$('#vpbg').animate({opacity:0,width:0,height:0},0);
		$('#vpcontent').html('');
		return false;
	}
	

	function vpSetScrn(vp) {
		
		

		/*-- display vp bg and fg  --*/
		$('#vpbg').height(vp['dh']).width(vp['dw']).animate({opacity:stg.vpbgop}, 800, function() {
			var vpfgt = vp['top'] + ((vp['wh'] - stg.vpfgh)/2);
			var vpfgl = (vp['ww'] -  stg.vpfgw)/2;
			$('#vpfg').css({'opacity':1,'height':stg.vpfgh,'width':stg.vpfgw,'top':vpfgt,'left':vpfgl});
			
			vpShoImg(vp);
				
		});
	}

	function vpShoImg(vp) {
		
		if (vp['tp']=='image') {
		
			/*-- hide elements while fg is resized --*/
			$('#vpcontent').html('<img src="">');
			$('#vpmain').hide();
			$('#vpcontrols').hide();
			var imgObj = new Image();
			
			$(imgObj).load( function() {
				var vih = this.height;
				var viw = this.width;
				var viasp = this.width/this.height;
	
				vih = (vih>(vp['wh']-(100+vp['ctl'])))? vp['wh']-(100+vp['ctl']) : vih ;
				viw = vih * viasp;
		
				var vit = vp['top'] + ((vp['wh']-vih)/2);
				var vil = (vp['ww']-viw)/2;
	
				/*-- resize fg then show elements --*/
				$('#vpfg').animate({height:vih+vp['ctl'], width:viw, top:vit, left:vil}, 800, function() {
				
					$('#vpmain').show();
					$('#vpcontrols').show();
	
					$('#vpcontent img').attr('src', vp['b'][vp['i']]).height(vih).width(viw);
					$('#count').text((vp['i']+1)+' of '+ (vp['b'].length));
					
				});
			});
			imgObj.src = vp['b'][vp['i']];


		} else if (vp['tp']=='youtube') {
			
			/*-- hide elements while fg is resized --*/
			$('#vpcontent').html('<object width="425" height="344"><param name="movie" value="'+vp['b'][vp['i']]+'"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="'+vp['b'][vp['i']]+'" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>');
			$('#vpmain').hide();
			$('#vpcontrols').hide();
			
			
			var vih = 344;
			var viw = 425;
			
			var vit = vp['top'] + ((vp['wh']-vih)/2);
			var vil = (vp['ww']-viw)/2;
	
			/*-- resize fg then show elements --*/
			$('#vpfg').animate({height:vih+vp['ctl'], width:viw, top:vit, left:vil}, 800, function() {
				$('#vpmain').show();
				$('#vpcontrols').show();
				$('#count').text((vp['i']+1)+' of '+ (vp['b'].length));
				
			});

		} else if (vp['tp']=='iframe') {
			
			/*-- hide elements while fg is resized --*/
			$('#vpcontent').html('<iframe width="500" height="500" src="'+vp['b'][vp['i']]+'" />');
			$('#vpmain').hide();
			$('#vpcontrols').hide();
			
			
			var vih = 500;
			var viw = 500;
			
			var vit = vp['top'] + ((vp['wh']-vih)/2);
			var vil = (vp['ww']-viw)/2;
	
			/*-- resize fg then show elements --*/
			$('#vpfg').animate({height:vih+vp['ctl'], width:viw, top:vit, left:vil}, 800, function() {
				$('#vpmain').show();
				$('#vpcontrols').show();
				$('#count').text((vp['i']+1)+' of '+ (vp['b'].length));
				
			});
		}
	}

})(jQuery);