
(function($) {
	/**
	 * $ is an alias to jQuery object
	 *
	 */
	$.fn.gallery = function(settings) {
		// Settings to configure the jQuery lightBox plugin how you like
		settings = jQuery.extend({
			imageArray:				[],
			activeImage:			0
		},settings);
		// Caching the jQuery object with all elements matched
		var jQueryMatchedObj = this; // This, in this context, refer to jQuery object
		/**
		 * Initializing the plugin calling the start function
		 *
		 * @return boolean false
		 */
		
		for ( var i = 0; i < jQueryMatchedObj.length; i++ ) {
			settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'), jQueryMatchedObj[i].getAttribute('name'), jQueryMatchedObj[i].getAttribute('alt'), jQueryMatchedObj[i].getAttribute('link')));
			//hide anchor tags
			jQueryMatchedObj.css({ 'visibility' : 'hidden' });
		}
		
		//hide bio
		$('#bio').hide();
		//init show/hide var
		var open = false;
		//click/show bio
		$('a.bio').click(function() {
			if(open){
				$('#bio').slideUp();
				$('a.bio').html('BIO');
				open = false;
			}else{
				$('#bio').slideDown();
				$('a.bio').html('CLOSE');
				open = true;
			}
			
		});
		
		//init variables
		var firstLoop = true;
		var image_interval;
		
		//initial image display	
		$('#gallery').append('<div class="nav"><a id="left" href="#"></a><img class="blank" src="images/blank.gif" height="410px" width="415px" /><a id="right" href="#"></a></div><div class="rewind"><img src="images/rewind.png" /></div><div class="frame"><img></div><div class="holder"><div class="project"><img src="' + settings.imageArray[0][0] + '" width="460" height="300" /><img class="link" src="images/view.png" /><div class="sub"><h1>' + settings.imageArray[0][1] + '</h1><p>' + settings.imageArray[0][2] + '</p></div></div></div>');	
		
		$('img.link').css({ 'visibility' : 'hidden' });
		//view click
		setLink();
		
		//initial hide	
		$('div.frame').hide();
		$('div.rewind img').hide();
		$('div.sub').hide();
		//mouse over/out sub content
		$('div.nav').mouseout(function(){
			image_interval = window.setInterval(_slideNextImage,4000);
		}).mouseover(function(){
			$('div.sub').fadeIn();
			window.clearInterval(image_interval);
		});
		//prev/next nav
		$('#left').unbind();
		$('#right').click(function() {
			_slideNextImage();
		});
		$('#right').mouseout(function(){
			$('#right').css({ 'opacity' : '0.1', 'filter' : 'alpha(opacity=10)' });
		}).mouseover(function(){
			$('#right').css({ 'opacity' : '1', 'filter' : 'alpha(opacity=100)' });
		});
		// Image preload process
		var img = new Image();
		$(img).load(function () {
			$('#gallery .frame img').attr('src','images/frame.png');
		    $('div.frame').show();
			//start timed image rotation 
			_start_rotation();
		 }).error(function () {
		     // notify the user that the image could not be loaded
		 }).attr('src', 'images/frame.png');
		
		//gallery CSS
		$('#gallery').css({ 'margin' : '0px', 'padding' : '0px', 'display' : 'block', 'width' : '815px', 'height' : '410px', 'overflow' : 'hidden' });
		$('div.nav').css({ 'display' : 'block', 'position' : 'relative', 'top' : '0px', 'left' : '0px', 'z-index' : '40', 'width' : '815px', 'height' : '410px', 'background' : 'url("images/blank.gif") top left' });
		$('div.nav img').css({ 'margin' : '0px', 'padding' : '0px', 'float' : 'left' });
		$('#left').css({ 'margin' : '0px', 'padding' : '0px', 'display' : 'inline', 'width' : '200px', 'height' : '410px', 'float' : 'left', 'outline' : 'none', 'opacity' : '0.1', 'filter' : 'alpha(opacity=10)' });
		$('#right').css({ 'margin' : '0px', 'padding' : '0px', 'display' : 'inline', 'width' : '200px', 'height' : '410px', 'float' : 'right', 'outline' : 'none', 'background' : 'url("images/rt.png") center right no-repeat', 'opacity' : '0.1', 'filter' : 'alpha(opacity=10)' });
		$('div.rewind').css({ 'display' : 'block', 'position' : 'relative', 'top' : '-410px', 'left' : '0px', 'z-index' : '30', 'width' : '184px', 'height' : '72px' });
		$('div.frame').css({ 'display' : 'block', 'position' : 'relative', 'top' : '-482px', 'left' : '0px', 'z-index' : '20' });
		$('div.holder').css({ 'display' : 'block', 'position' : 'relative', 'top' : '-877px', 'left' : '140px', 'z-index' : '10', 'width' : 815 * settings.imageArray.length });
		
		function _start_rotation(){
			//setInterval
			image_interval = window.setInterval(_slideNextImage,4000);
		};
		
		function _slideNextImage() {
			//advance image counter by 1
			settings.activeImage++;
			if(settings.activeImage == settings.imageArray.length)
			{
				$('#left').unbind();
				//turn on PREV button
				$('#left').css({ 'background' : 'url("images/lt.png") center left no-repeat' });
				$('#left').click(function() {
					_slidePrevImage();
				});
				$('#left').mouseout(function(){
					$('#left').css({ 'opacity' : '0.1', 'filter' : 'alpha(opacity=10)' });
				}).mouseover(function(){
					$('#left').css({ 'opacity' : '1', 'filter' : 'alpha(opacity=100)' });
				});
				//all images have been loaded
				firstLoop = false;
				settings.activeImage = 0;
			}
			
			slideImage("left");
			
		 };
		
		function _slidePrevImage() {
			//advance image counter by 1
			settings.activeImage--;
			if(settings.activeImage == -1)
			{
				settings.activeImage = 0;
			}else{
				slideImage("right");
			}

		 };
		
		function slideImage(direction){
			if(direction == "left"){
				
				//add image
				if(firstLoop){
					$("div.holder").append('<div class="project"><img src="' + settings.imageArray[settings.activeImage][0] + '" width="460" height="300" /><img class="link" src="images/view.png" /><div class="sub"><h1>' + settings.imageArray[settings.activeImage][1] + '</h1><p>' + settings.imageArray[settings.activeImage][2] + '</p></div></div>');
					$('div.sub').fadeOut();
					$('img.link').css({ 'visibility' : 'hidden' });
					// Image preload process
					var img = new Image();
					$(img).load(function () {
						$(img.nextImage).attr('src',settings.imageArray[settings.activeImage][0]);

						if(settings.activeImage == 0){
							$('div.rewind img').fadeIn();
							$("div.holder").animate({'left' : '140px' }, 1000, setLink );
							window.setTimeout(hideRewind, 1000);
						}else{
							$("div.holder").animate({'left' : '-=815px' }, 1000, setLink );
						}

					}).error(function () {
					     // notify the user that the image could not be loaded
					 }).attr('src', settings.imageArray[settings.activeImage][0]);
				}else{
					$('div.sub').fadeOut();
					if(settings.activeImage == 0){
						$('div.rewind img').fadeIn();
						$("div.holder").animate({'left' : '140px' }, 1000, setLink );
						window.setTimeout(hideRewind, 1000);
					}else{
						$("div.holder").animate({'left' : '-=815px' }, 1000, setLink );
					}
				}
				
			}
			else if(direction == "right"){
				
				$('div.sub').fadeOut();
				$("div.holder").animate({'left' : '+=815px' }, 1000, setLink);
			
			}
		}
		
		function setLink(){
			//view click
			if(settings.imageArray[settings.activeImage][3] == "#")
			{
				$('.blank').unbind();
				$('img.link').css({ 'visibility' : 'hidden' });
			} 
			else if(settings.imageArray[settings.activeImage][3] != "#")
			{
				$('img.link').css({ 'visibility' : 'visible' });
				$('.blank').unbind();
				$('.blank').click(function(){
					window.open(settings.imageArray[settings.activeImage][3]);
					//window.location = settings.imageArray[settings.activeImage][3];
				});
			}
		}
		
		function hideRewind(){
			$('div.rewind img').fadeOut();
		};
		
	};
})(jQuery); // Call and execute the function immediately passing the jQuery object