(function($){ 
    $.fn.extend({
		
		clickItemsTwice: function() {
			
			//when the user clicks the item a second time
			this.children('li').click(function() {
				
				//if its been already clicked
				var canOpen = jQuery(this).attr('class').split(' ');
				if(canOpen[1] == 'clicked' || canOpen[0] == 'clicked') {
					
					jQuery(this).loadItem();
					
				}
				
			});
			
		},
		
		loadItem: function(type) {
			
			//loads our item
			//gets all the possible things this item can be / image / video / page / link
			var liItem = this;
			if(liItem.children('.content-image').length > 0) {
				
				liItem.addClass('currentlyClicked');
				
				var imageCont = liItem.children('.content-image');
				initialWindow = 'image';
				
				//activates the content over
				contentOver.css({ display: 'block', width: (windowWidth-fWidth), height: windowHeight, opacity: 0 }).animate({ opacity: (1-attr.hoverOpacity) }, attr.duration/2);
				content.addClass('loading').css({ display: 'block', left: ((windowWidth-fWidth)/2)-35, top: (windowHeight/2-35), opacity: 0 }).animate({ opacity: 1 }, attr.duration/2);
				
				//our first image
				imageCont.children('span:first').addClass('current');
				var firstImage = imageCont.children('span:first').text();
				liItem.loadImage(firstImage);
				
				
			} else if(liItem.children('.content-video').length > 0) {
				
				liItem.addClass('currentlyClicked');
				
				var videoCont = liItem.children('.content-video').children('div').attr('class');
				var videoCode = liItem.children('.content-video').children('div').text();
				initialWindow = 'video';
				
				//activates the content over
				contentOver.css({ display: 'block', width: (windowWidth-fWidth), height: windowHeight, opacity: 0 }).animate({ opacity: (1-attr.hoverOpacity) }, attr.duration/2);
				content.addClass('loading').css({ display: 'block', left: ((windowWidth-fWidth)/2)-35, top: (windowHeight/2-35), opacity: 0 }).animate({ opacity: 1 }, attr.duration/2);
				
				//our video
				liItem.loadVideo(videoCont, videoCode);
				
			} else if(type == 'page') {
				
				wrapper.openPage();
				initialWindow = 'page';
				
			}
			
			jQuery('#content-over').click(function() { liItem.closeContent(); });
			
		},
		
		loadImage: function(myImage) {
			
			//creates our image object
			var thisMainCont = this;
			var newImage = new Image();
			
			jQuery(newImage).attr('src', myImage);
			
			if(newImage.complete) {
				
				//loaded
				content.append(newImage);
				var imageWidth = jQuery(newImage).width();
				var imageHeight = jQuery(newImage).height();
				
				//content.removeClass('loading');
				
				thisMainCont.centerNewImage(imageWidth, imageHeight);
				
			} else {
				
				jQuery(newImage).load(function() {
				
					//loaded
					content.append(this);
					var imageWidth = jQuery(this).width();
					var imageHeight = jQuery(this).height();
					
					//content.removeClass('loading');
					
					thisMainCont.centerNewImage(imageWidth, imageHeight);
					
				});
				
			}
			
		},
		
		loadVideo: function(type, code) {
			
			//main container
			var thisMainCont = this;
			content.append('<div id="content-video"></div>');
			var videoCont = content.children('#content-video');
			
			//if its vimeo
			if(type == 'vimeo') {
				
				var videoUrl = 'http://player.vimeo.com/video/'+code;
				var imageWidth = 560;
				var imageHeight= 315;
				
			} else if(type == 'youtube') {
				
				var videoUrl = 'http://www.youtube.com/embed/'+code;
				var imageWidth = 560;
				var imageHeight= 349;
				
			} else if(type == 'self') {
				
				var videoUrl = code;
				var imageWidth = 560;
				var imageHeight= 315;
				
			}
			
			//if the user has set an specific width and height
			if(thisMainCont.children('.content-video').children('.width').length > 0) { var imageWidth = thisMainCont.children('.content-video').children('.width').text(); }
			if(thisMainCont.children('.content-video').children('.height').length > 0) { var imageHeight = thisMainCont.children('.content-video').children('.height').text(); }
			
			//checks whether the image fits in the window or not
			var maximumHeight = (windowHeight - 200);
			var maximumWidth = ((windowWidth-fWidth) - 200);
			
			//if they're bigger
			if((imageHeight > maximumHeight) || (imageWidth > maximumWidth)) {
				
				var extraWidth = imageWidth - maximumWidth;
				var extraHeight = imageHeight - maximumHeight;
				
				//if height is bigger
				if(extraHeight >= extraWidth) {
					
					//sets the new height and width proportionally
					var thisNewHeight = (maximumHeight-60);
					var thisNewWidth = (thisNewHeight / imageHeight) * imageWidth;
					var imageHeight = thisNewHeight;
					var imageWidth = thisNewWidth;
					
				} else {
					
					//sets the new height and width proportionally
					var thisNewWidth = (maximumWidth-60);
					var thisNewHeight = (thisNewWidth / imageWidth) * imageHeight;
					var imageHeight = thisNewHeight;
					var imageWidth = thisNewWidth;
					
				}
				
			}
			
			if(type == 'vimeo') { videoCont.html('<iframe src="'+videoUrl+'" width="'+imageWidth+'" height="'+imageHeight+'" frameborder="0"></iframe>'); }
			if(type == 'youtube') { videoCont.html('<iframe src="'+videoUrl+'" width="'+imageWidth+'" height="'+imageHeight+'" frameborder="0"></iframe>'); }
			if(type == 'self') { videoCont.html('<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="'+imageHeight+'" width="'+imageWidth+'"> <param name="src" value="'+videoUrl+'"> <param name="autoplay" value="true"> <param name="type" value="video/quicktime" height="'+imageHeight+'" width="'+imageWidth+'"> <embed src="'+videoUrl+'" height="'+imageHeight+'" width="'+imageWidth+'" autoplay="true" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/"></object>'); }
			
			var newContHeight = (imageHeight);
			var newContWidth = (imageWidth);
			var newContLeft = (((windowWidth-fWidth)/2)-30)-((imageWidth/2));
			var newContTop =  (windowHeight/2-30)-((imageHeight/2));
			
			content.animate({ width: newContWidth, height: newContHeight, left: newContLeft+'px', top: newContTop+'px' }, 400, function() {
				
				videoCont.fadeIn(300);
				
			});
			
		},
		
		centerNewImage: function(imageWidth, imageHeight) {
			
			var thisMainCont = this;
			content.children('img');
			
			//checks whether the image fits in the window or not
			var maximumHeight = (windowHeight - 200);
			var maximumWidth = ((windowWidth-fWidth) - 200);
			
			//stores the original size
			content.children('img').addClass('w_'+imageWidth).addClass('h_'+imageHeight);
			
			//if they're bigger
			if((imageHeight > maximumHeight) || (imageWidth > maximumWidth)) {
				
				var extraWidth = imageWidth - maximumWidth;
				var extraHeight = imageHeight - maximumHeight;
				
				//if height is bigger
				if(extraHeight >= extraWidth) {
					
					//sets the new height and width proportionally
					var thisNewHeight = (maximumHeight-60);
					var thisNewWidth = (thisNewHeight / imageHeight) * imageWidth;
					var imageHeight = thisNewHeight;
					var imageWidth = thisNewWidth;
					
				} else {
					
					//sets the new height and width proportionally
					var thisNewWidth = (maximumWidth-60);
					var thisNewHeight = (thisNewWidth / imageWidth) * imageHeight;
					var imageHeight = thisNewHeight;
					var imageWidth = thisNewWidth;
					
				}
				
			}
			
			var newContHeight = (imageHeight);
			var newContWidth = (imageWidth);
			var newContLeft = (((windowWidth-fWidth)/2)-30)-((imageWidth/2));
			var newContTop =  (windowHeight/2-30)-((imageHeight/2));
			content.children('img').css({ width: imageWidth, height: imageHeight });
			
			content.animate({ width: newContWidth, height: newContHeight, left: newContLeft+'px', top: newContTop+'px' }, 400, function() {
				
				content.children('img').fadeIn(200, function() { isPlaying = 0; });
				content.children('#open-externally').attr('href', content.children('img').attr('src'));
				content.children('img, #open-externally').hover(function() {
					
					content.children('#open-externally').show();
					
				}, function() {
					
					content.children('#open-externally').hide();
					
				});
				
				//if theres more than one image
				if(thisMainCont.children('.content-image').children('span').length > 1) {
					
					var sliderSelector = content.children('#slider-selector');
					var arrowTop = ((imageHeight+60)/2)-50;
					
					//show arrows
					content.children('#left-arrow, #right-arrow').css({ top: arrowTop+'px' }).fadeIn(200);
					content.children('#slider-selector').fadeIn(200);
					
					content.children('#right-arrow').click(function() { if(isPlaying === 0) { thisMainCont.nextAjaxImageSlide('next', 0); isPlaying = 1; } });
					content.children('#left-arrow').click(function() { if(isPlaying === 0) { thisMainCont.nextAjaxImageSlide('prev', 0); isPlaying = 1; } });
					
					jQuery(document).keydown(function(e) {
						if(e.keyCode == 37) { if(initialWindow == 'image') { if(isPlaying === 0) { thisMainCont.nextAjaxImageSlide('prev', 0); isPlaying = 1; } } }
						else if(e.keyCode == 39) { if(initialWindow == 'image') { if(isPlaying === 0) { thisMainCont.nextAjaxImageSlide('next', 0); isPlaying = 1; } } }
					});
					
					//our selector - appends our li items
					sliderSelector.html('');
					
					//finds the number of the current image
					var selectorCountCurrent = 1; var selectorCurrentImage = 0;
					thisMainCont.children('.content-image').children('span').each(function() { if(jQuery(this).attr('class') == 'current') { selectorCurrentImage = selectorCountCurrent; } selectorCountCurrent++; });
					
					var selectorCount = 1; thisMainCont.children('.content-image').children('span').each(function() {
						
						if(selectorCount === selectorCurrentImage) {
							
							sliderSelector.append('<span id="sliderSelector_'+selectorCount+'" class="current"></span>');
							
						} else {
							
							sliderSelector.append('<span id="sliderSelector_'+selectorCount+'"></span>');
							
						}
						
						selectorCount++;
						
					});
					
					//centers our selector
					var selectorLeft = ((imageWidth+60)/2)-((sliderSelector.children('span').length*19)/2)+3;
					sliderSelector.css({ left: selectorLeft+'px' });
					
					content.children('#slider-selector').children('span:not(.current)').click(function() {
						
						//gets the number of the selector
						var clickedSelNumber = jQuery(this).attr('id').split('_');
						var clickedSelNumber = (clickedSelNumber[1]-1);
						
						if(isPlaying === 0) { thisMainCont.nextAjaxImageSlide('sel', clickedSelNumber); isPlaying = 1; }
						
					});
					
				}
				
			});
			
		},
		
		nextAjaxImageSlide: function(mode, num) {
			
			var thisMainCont = ul.children('.currentlyClicked');
			
			//fadesout arrows and current content
			content.children('#left-arrow, #right-arrow, #slider-selector').fadeOut(200);
			content.children('img').fadeOut(200, function() {
				
				content.children('img').remove();
				
				//finds next image item
				if(mode == 'prev') {
					
					var currentImageItemSlide = thisMainCont.children('.content-image').children('span.current');
					var nextImageItemSlide = currentImageItemSlide.prev();
					
					if(nextImageItemSlide.length > 0) {} else { var nextImageItemSlide = thisMainCont.children('.content-image').children('span:last'); }
					
					currentImageItemSlide.removeClass('current');
					nextImageItemSlide.addClass('current');
					
					
					
				} else if(mode == 'next') {
					
					var currentImageItemSlide = thisMainCont.children('.content-image').children('span.current');
					var nextImageItemSlide = currentImageItemSlide.next();
					
					if(nextImageItemSlide.length > 0) {} else { var nextImageItemSlide = thisMainCont.children('.content-image').children('span:first'); }
					
					currentImageItemSlide.removeClass('current');
					nextImageItemSlide.addClass('current');
					
				} else {
					
					var currentImageItemSlide = thisMainCont.children('.content-image').children('span.current');
					var nextImageItemSlide = thisMainCont.children('.content-image').children('span:eq('+num+')');
					
					currentImageItemSlide.removeClass('current');
					nextImageItemSlide.addClass('current');
					
				}
				
				thisMainCont.loadImage(nextImageItemSlide.text());
				
			});
			
		},
		
		closeContent: function() {
			
			var liItem = this;
			 if(initialWindow == 'page') {
				
				isPlaying = 1;
				
				contentOver.fadeOut(300);
				jQuery('#fixed .menu').children('li').children('a.current').removeClass('current');
				jQuery('#fixed .menu').children('li').children('a.currentTemp').removeClass('currentTemp').addClass('current');
				jQuery('#content-page').hide();
					
					//removes all the classes and content previously there
					jQuery('#content-page > div').remove();
					initialWindow = 1; isPlaying = 0;
				
			} else if(liItem.children('.content-image').length > 0) {
				
				isPlaying = 1;
				
				//if its an image item;
				contentOver.fadeOut(300);
				content.fadeOut(300, function() {
					
					//removes all the classes and content previously there
					content.addClass('loading').css({ left: ((windowWidth-fWidth)/2)-35, top: (windowHeight/2-35), width: 15, height: 15 }).children('img').remove();
					content.children('#slider-selector, #left-arrow, #right-arrow').hide();
					liItem.children('.content-image').children('span').each(function() { jQuery(this).removeClass('current'); });
					initialWindow = 1; isPlaying = 0;
					ul.children('.currentlyClicked').removeClass('currentlyClicked');
					
				});
				
			} else if(liItem.children('.content-video').length > 0) {
				
				isPlaying = 1;
				
				//if its an video item;
				contentOver.fadeOut(300);
				content.fadeOut(300, function() {
					
					//removes all the classes and content previously there
					content.addClass('loading').css({ left: ((windowWidth-fWidth)/2)-35, top: (windowHeight/2-35), width: 15, height: 15 }).children('#content-video').remove();
					initialWindow = 1; isPlaying = 0;
					ul.children('.currentlyClicked').removeClass('currentlyClicked');
					
				});
				
			}
			
		},
		
		centerImageResize: function() {
			
			//resizes or content over
			contentOver.css({ width: (windowWidth-fWidth), height: windowHeight});
			
			//vars
			var imageClasses = content.children('img').attr('class').split(' ');
			
			var imageWidth = imageClasses[0].split('_');
			var imageWidth = imageWidth[1];
			
			var imageHeight = imageClasses[1].split('_');
			var imageHeight = imageHeight[1];
			
			//checks whether the image fits in the window or not
			var maximumHeight = (windowHeight - 200);
			var maximumWidth = ((windowWidth-fWidth) - 200);
			
			//if they're bigger
			if((imageHeight > maximumHeight) || (imageWidth > maximumWidth)) {
				
				var extraWidth = imageWidth - maximumWidth;
				var extraHeight = imageHeight - maximumHeight;
				
				//if height is bigger
				if(extraHeight >= extraWidth) {
					
					//sets the new height and width proportionally
					var thisNewHeight = (maximumHeight-60);
					var thisNewWidth = (thisNewHeight / imageHeight) * imageWidth;
					var imageHeight = thisNewHeight;
					var imageWidth = thisNewWidth;
					
				} else {
					
					//sets the new height and width proportionally
					var thisNewWidth = (maximumWidth-60);
					var thisNewHeight = (thisNewWidth / imageWidth) * imageHeight;
					var imageHeight = thisNewHeight;
					var imageWidth = thisNewWidth;
					
				}
				
			}
			
			var newContHeight = (imageHeight);
			var newContWidth = (imageWidth);
			var newContLeft = (((windowWidth-fWidth)/2)-30)-((imageWidth/2));
			var newContTop =  (windowHeight/2-30)-((imageHeight/2));
			var newArrowTop = ((parseInt(imageHeight)+60)/2)-50;
			var newSelectorLeft = ((parseInt(imageWidth)+60)/2)-((content.children('#slider-selector').children('span').length*19)/2)+3;
			content.css({ left: newContLeft+'px', top: newContTop+'px', width: newContWidth, height: newContHeight }).children('img').css({ width: imageWidth, height: imageHeight });
			content.children('#left-arrow, #right-arrow').css({ top: newArrowTop+'px' });
			content.children('#slider-selector').css({ left: newSelectorLeft+'px' });
			
		},
		
		centerVideoResize: function() {
			
			//resizes or content over
			contentOver.css({ width: (windowWidth-fWidth), height: windowHeight});
			
			//main container
			var videoCont = content.children('#content-video');
			
			//vars
			var imageWidth = 560;
			var imageHeight = 315;
			var iFrame = true;
			
			if(ul.children('.currentlyClicked').children('.content-video').children('div').attr('class') == 'self') { var iFrame = false; }
			
			if(ul.children('.currentlyClicked').children('.content-video').children('.width').length > 0) { var imageWidth = ul.children('.currentlyClicked').children('.content-video').children('.width').text(); }
			if(ul.children('.currentlyClicked').children('.content-video').children('.height').length > 0) { var imageHeight = ul.children('.currentlyClicked').children('.content-video').children('.height').text(); }
			
			//checks whether the image fits in the window or not
			var maximumHeight = (windowHeight - 200);
			var maximumWidth = ((windowWidth-fWidth) - 200);
			
			//if they're bigger
			if((imageHeight > maximumHeight) || (imageWidth > maximumWidth)) {
				
				var extraWidth = imageWidth - maximumWidth;
				var extraHeight = imageHeight - maximumHeight;
				
				//if height is bigger
				if(extraHeight >= extraWidth) {
					
					//sets the new height and width proportionally
					var thisNewHeight = (maximumHeight-60);
					var thisNewWidth = (thisNewHeight / imageHeight) * imageWidth;
					var imageHeight = thisNewHeight;
					var imageWidth = thisNewWidth;
					
				} else {
					
					//sets the new height and width proportionally
					var thisNewWidth = (maximumWidth-60);
					var thisNewHeight = (thisNewWidth / imageWidth) * imageHeight;
					var imageHeight = thisNewHeight;
					var imageWidth = thisNewWidth;
					
				}
				
			}
			
			var newContHeight = (imageHeight);
			var newContWidth = (imageWidth);
			var newContLeft = (((windowWidth-fWidth)/2)-30)-((imageWidth/2));
			var newContTop =  (windowHeight/2-30)-((imageHeight/2));
			content.css({ left: newContLeft+'px', top: newContTop+'px', width: newContWidth, height: newContHeight }).children('#content-video').css({ width: imageWidth, height: imageHeight });
			if(iFrame == true) { content.children('#content-video').children('iframe').attr('width', imageWidth).attr('height', imageHeight); }
			
		},
		
		openPage: function() {
			
			//var
			var pageCont = jQuery('#content-page');
			
			//let's find the size of our page and set it up
			var pageHeight = windowHeight-160;
			var pageWidth = 840; if(pageWidth > (windowWidth-(fWidth+100))) { var pageWidth = (windowWidth-(fWidth+100)); }
			var pagePosInit = pageWidth;
			
			//sets up our css
			contentOver.css({ display: 'block', width: (windowWidth-fWidth), height: windowHeight, opacity: 0 }).stop().animate({ opacity: (1-attr.hoverOpacity) }, attr.duration/2);
			if(jQuery('#fixed').css('float') == 'left') {
				
				pageCont.css({ width: pageWidth, height: pageHeight, left: '-'+pagePosInit+'px', display: 'block', opacity: 0 }).animate({ left: 0, opacity: 1 }, attr.duration, function() { initialWindow = 'page'; });
				pageCont.children('div').css({ width: (pageWidth), height: (pageHeight), 'padding-right': '20px' }).animate({ opacity: 1 }, attr.duration, function() { initialWindow = 'page'; });
				jQuery('#content-page > div').jScrollPane();
				
			} else {
				
				pageCont.css({ width: pageWidth, height: pageHeight, right: '-'+pagePosInit+'px', display: 'block', opacity: 0 }).animate({ right: (jQuery('#container').width()-windowWidth+fWidth), opacity: 1 }, attr.duration, function() { initialWindow = 'page'; });
				pageCont.children('div').css({ width: (pageWidth), height: (pageHeight), 'padding-left': '20px' }).animate({ opacity: 1 }, attr.duration, function() { initialWindow = 'page'; });
				jQuery('#content-page > div').jScrollPane();
				
			}
			submitContactForm();
			
		},
		
		centerPageResize: function() {
			
			//var
			var pageCont = jQuery('#content-page');
			
			//let's find the size of our page and set it up
			var pageHeight = windowHeight-160;
			var pageWidth = 840; if(pageWidth > (windowWidth-(fWidth+100))) { var pageWidth = (windowWidth-(fWidth+100)); }
			var pagePosInit = pageWidth;
			contentOver.css({ display: 'block', width: (windowWidth-fWidth), height: windowHeight });
			if(jQuery('#fixed').css('float') == 'left') {
				
				pageCont.css({ width: pageWidth, height: pageHeight, left: 0 });
				pageCont.children('div').css({ width: (pageWidth), height: (pageHeight), 'padding-right': '20px' });
				jQuery('#content-page > div').jScrollPane();
				
			} else {
				
				pageCont.css({ width: pageWidth, height: pageHeight, right: (jQuery('#container').width()-windowWidth+fWidth) });
				pageCont.children('div').css({ width: (pageWidth), height: (pageHeight) });
				
			}
			
		}
		
	});
	
})(jQuery);
