/**
 * @@@@
 * This script is handmade and fresh-baked by Kristi Bonner for
 * inkjetcanvas.us and theresnobox.net. Use as-is is discouraged and prohibited
 * for professional and client use, but dissecting it and learning from it
 * to come to your own solution is perfectly fine.
 * Please drop me a line if you've found my work helpful to you.
 * @@@@
 * 
 * If you're a potential employer or client checking under the hood, good for you!
 * You're probably the kind of gig I'm looking to work with. Call me. :)
 * 
 */
 
 
var slideWidth = 500;
var thumbSlideWidth = 510;
 
 $(document).ready(function(){
	
	loadThumbs();
	
	$('#loadingDiv')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    });

// / Click Hooks ///
	$('a[class=gallery]').click(function(){
		var tId = $(this).attr("id");
		var tClass = $(this).attr("class");
		galleryLoad(tId, tClass);

	});
	
	$('a[class=content]').click(function(){
		var tCont = $(this).attr("id");
		contentLoad(tCont);
	});
	
	$('a[class=content-ajax]').click(function() { 
		var tPage = $(this).attr("id");
		ajaxContentLoad(tPage);
		
	});
	
	$('#thumbbox a').click(function(){
		var thumID =  $(this).attr("id");
		loadPage(thumID);
	});
	
	$('#thumbControls span').click(function(){
		var clickedID = $(this).attr("id");
		thumbControl(clickedID);
	});

});

///// Click Functions /////

	function galleryLoad(targetID, targetClass) {
				
				var activeThumbs = $('#ThumbnailBox div[class=active]').attr("id");
				var targetThumbs = $('#ThumbnailBox div[class=inactive]').attr("id");

				var baseMargin = 117;
				var marginMeasure = targetClass * -42;
				var targetMargin = baseMargin + marginMeasure;
				
				if ($('#viewport div[class=active]').length > 0) {
					//animate the removal of active div
					$('#viewport div[class=active]').hide();
					$('#viewport div[class=active]').attr('class', 'inactive');
				} else {
					$('#viewport div[id=projectPort]').empty();
				}
				$('#ThumbnailBox div[class=inactive]').each(function(index){

					if (targetID == $(this).attr("id")) {	
						$('#ThumbnailBox div[class=active]').hide("drop", {direction: "left"}, 150);
						$('#ThumbnailBox div[class=active]').attr('class', 'inactive');
						$(this).show("drop", {direction: "right"}, 1050);
						$(this).attr('class', 'active');
					}
				$('.thumbSlideInner').css('marginLeft', 0);

				});
				$('#ThumbnailBox div[class=active]').each(function(index){
					var thisSlideInnerWidth = parseInt($('#ThumbnailBox div[class=active] div[class=thumbSlideInner]').css("width"));
					if (thisSlideInnerWidth > thumbSlideWidth) {
						$('#ctrlRight').css('display', 'inline')
					}
						if (thisSlideInnerWidth == thumbSlideWidth){
							$('#ctrlRight').css('display', 'none')
							$('#ctrlLeft').css('display', 'none')
						}
				});
				

	
				$('#viewport div[class=inactive]').each(function(index){

					if (targetID == $(this).attr("id")) {
						
						//hide the thumbnails & remove arrows
						$('#ThumbnailBox div[class=active]').hide("drop", {
							direction: "left"
						}, 150);
						$('#ThumbnailBox div[class=active]').attr('class', 'inactive');
						$('#ctrlRight').css('display', 'none')
						$('#ctrlLeft').css('display', 'none')
						
						//animate the removal of active div
						$('#viewport div[class=active]').hide();
						$('#viewport div[class=active]').attr('class', 'inactive');
						
						//animate the showing of selected div
						$(this).show("drop", {
							direction: "down"
						}, 800);
						$(this).attr('class', 'active');
																					
					}		
								
				});
				
		};
	
		function contentLoad(targetContent){
			
				if ($('#viewport div[class=active]').length > 0) {
					//animate the removal of active div
					$('#viewport div[class=active]').hide();
					$('#viewport div[class=active]').attr('class', 'inactive');
				} else {
					$('#viewport div[id=projectPort]').empty();
				}
				
			$('#viewport div[class=inactive]').each(function(index){
				if (targetContent == $(this).attr("id")) {
								
						//hide the thumbnails & remove arrows
						$('#ThumbnailBox div[class=active]').hide("drop", {
							direction: "left"
						}, 150);
						$('#ThumbnailBox div[class=active]').attr('class', 'inactive');
						$('#ctrlRight').css('display', 'none')
						$('#ctrlLeft').css('display', 'none')
						
						//animate the removal of active div
						$('#viewport div[class=active]').hide();
						$('#viewport div[class=active]').attr('class', 'inactive');
						
						//animate the showing of selected div
						$(this).show("drop", {
							direction: "down"
						}, 800);
						$(this).attr('class', 'active');							
				}		
			});
		};
		
		//if not a gallery or seo-based inline content, load em up here.
		function ajaxContentLoad(targetPage){
			emptyThumbs();
				$('#viewport div[id=projectPort]').empty();
				$('#projectPort').load('/page/' + targetPage, function(){
					$(this).show("drop", {
						direction: "down"
						}, 800);
				});
				
		};

		function emptyThumbs(){
			
			if ($('#viewport div[class=active]').length > 0) {
				//animate the removal of active div
				$('#viewport div[class=active]').hide();
				$('#viewport div[class=active]').attr('class', 'inactive');
			} else {
				$('#viewport div[id=projectPort]').empty();
			}

			//hide the thumbnails & remove arrows
			$('#ThumbnailBox div[class=active]').hide("drop", {
				direction: "left"
			}, 150);
			$('#ThumbnailBox div[class=active]').attr('class', 'inactive');
			$('#ctrlRight').css('display', 'none');
			$('#ctrlLeft').css('display', 'none');
				
			//animate the removal of active div
			$('#viewport div[class=active]').hide();
			$('#viewport div[class=active]').attr('class', 'inactive');
			
		};
			
				
		function loadPage(thumbID) {
				$('#viewport div[id=projectPort]').empty();

				$('#projectPort').load('/page/' + thumbID, function (){
					//// Viewport Slider Functions \\\\\
					var numberofSlides = $('div[class=slide]').length;

					$('div[id=slidesContainer]').css('overflow', 'hidden');
					
					// Wrap slides with #slideInner(index)
					$('div[id=slidesContainer]').wrapInner('<div id="slideInner"></div>');
					
					$('div[id=slideInner]').css({
								'float': 'left',
								'width': slideWidth
					});
					
					$('div[id=slideInner]').css({'width': slideWidth * numberofSlides});
					

					// Populate a list in the slideshowNav for each list item in the slidescontainer
					$('#viewport div[id=projectWrapper]').each(function(index){
						var numberofSlides = $('div[id=slideInner] div[class=slide]', this);
						var howmanySlides = $('div[id=slideInner] div[class=slide]', this).length;
						var currentNav = $('div[class=slideshowNav]', this);
						
						if (howmanySlides >= 2) {
							$(numberofSlides, this).each(function(index){
							
								$(currentNav).append('<li class="slide' + ((index) + 1) + '">' + '<a onclick="slideclick(' + ((index) + 1) + ')">' + ((index) + 1) + '</a>' + '</li>');                                
							});
						}
						// wrap the list items inside slideshowNav in a ul
						$('div[class=slideshowNav] li', this).wrapAll('<ul class="slidenavul">');
						
						
						
				});
				
				//animate the showing of selected div
				$(this).show("drop", {
					direction: "down"
				}, 800);		
				});
                             
				};
							

		
	

///// Thumbnails Slide Functions \\\\\
function loadThumbs(){
	$('#ThumbnailBox div[id=thumbwrapper]').each(function(index){	
		$(this).css('overflow', 'hidden');
		 
		// Wrap slides with #thumbSlideInner(index) and .thumbSlideInner
		$(this).wrapInner('<div id="thumbSlideInner' + ((index)+ 1) + '" class="thumbSlideInner"></div>');
				
	});
							
							
	$('div[id=thumbwrapper] div[class=thumbSlideInner]').each(function(){	
		$(this).css({
			   'float': 'left',
			   'width': thumbSlideWidth
		});					 
	});
				
	$('div[class=thumbSlideInner]').each(function(){
		var numberofThumbSlides = $('div[class=slide]', this).length;	
		$(this).css ("width", thumbSlideWidth * numberofThumbSlides);
	});
	
	// Insert left and right arrow controls in the DOM
	  $('#thumbControls')
		.prepend('<span class="thumbControl" id="ctrlLeft">Move left</span>')
		.append('<span class="thumbControl" id="ctrlRight">Move right</span>');
};	

	
	function thumbControl(tId){
		var activeThumbSlideInner = $('#ThumbnailBox div[class=active] div[class=thumbSlideInner]');
		var slidesActiveLength = $('#ThumbnailBox div[class=active] div[class=thumbSlideInner] div[class=slide]').length;
		var currentMarginLeft = parseInt($('#ThumbnailBox div[class=active] div[class=thumbSlideInner]').css("margin-left"));
		var thumbSlideInnerWidth = parseInt($('#ThumbnailBox div[class=active] div[class=thumbSlideInner]').css("width"));

		if (tId == "ctrlLeft" && currentMarginLeft < 0) {
			
			activeThumbSlideInner.animate({
				'marginLeft': currentMarginLeft +  thumbSlideWidth
					
			});
			$('#ctrlRight').css('display', 'inline')
			$('#ctrlLeft').css('display', 'none')

		} if (tId == "ctrlRight" && currentMarginLeft > (-slidesActiveLength * thumbSlideWidth)) {
			
			activeThumbSlideInner.animate({
				'marginLeft': currentMarginLeft -  thumbSlideWidth
			});
			$('#ctrlLeft').css('display', 'inline')
			$('#ctrlRight').css('display', 'none')
		}
		
	};
				
 			             

 
// on click of an anchor("index number"), do the following:
 function slideclick(index){

	var activeSlideInner = $('div[id=slideInner]');

	activeSlideInner.animate({
		'marginLeft' : -slideWidth * (index - 1)

    });
	
 };