// JavaScript Document
// Metlen functions

function buildGallery(gallery, subgallery) {
	
	var $slideshow = $('#slideshow').cycle('stop').empty(); 
		 

	$("#loader"+gallery+"").fadeTo("fast", 1); 


	if(subgallery == undefined) {
	
	 $.getJSON('wp-content/themes/metlen/AJAX/slidelist.php?category='+gallery+'', startSlideshow);
	 
	} else {
		
	$.getJSON('wp-content/themes/metlen/AJAX/slidelist.php?subcategory='+subgallery+'', startSlideshow);

	}

	   	var images = new Array();
		var titles = new Array();
		var types = new Array();
		var descriptions = new Array();

		var thumbs = new Array();
		var years = new Array();	
		var sizes = new Array();		
		
	function startSlideshow(multiarray) {
		
			for (i=0; i<multiarray.image.length; i++) {
			
	
			images.push(multiarray.image[i]);
			titles.push(multiarray.title[i]);
			types.push(multiarray.type[i]);
			descriptions.push(multiarray.description[i]);
		
		}
		
       var totalSlideCount = multiarray.image.length;
	           
        var $slideshow = $('#slideshow');
      
		for(j=0; j<totalSlideCount; j++) {
			
			$slideshow.append('<img src="'+multiarray.image[j]+'" />');
			//alert(j);
		   	//$slideshow.append('<img  />');	
		
			
			}	
			
		
		
        // start slideshow
         $('#slideshow').cycle({ 
            fx: 'fade',
            timeout:  0,
            speed:    500,
			prev: 	'#prev',
			after: 	onAfter,
            next:    '#next, #slideshow',
			pager:    '#carousel'+gallery+'',
			
		 pagerAnchorBuilder: function(idx, slide) { 
       	  // return selector string for existing anchor
	      	//This works when we're not resetting the Carousel
			// return '#carousel'+gallery+' li:eq(' + [idx] + ') a'; } 
			
			if(idx==totalSlideCount-1) {
				 
				$("#loader"+gallery+"").fadeTo("fast", 0); 	 
			 	
				}
			
			//FIND OUT WHY WE MUST  MULTIPLY  BY 2? 
			 return '#carousel'+gallery+' li:eq(' + [idx*2] + ') a'; 
			 
			 
			 } 
			 

	
		});		

    };

	 function onAfter(curr, next, opts, fwd) {
			
    $('#description').html("") 
     .append('<h4>'+ titles[opts.currSlide] + '</h4>'
				+'<p>'+ types[opts.currSlide] + '</p>'
				+'<p>'+ descriptions[opts.currSlide] + '</p>');
	
	obj = document.getElementById("description");
	obj.style.opacity = 100;
	obj.style.filter = 'alpha(opacity=' + 100 + ')';
	obj.style.height = "102px";
	
	obj = document.getElementById("prev");
	obj.style.opacity = 100;
	obj.style.filter = 'alpha(opacity=' + 100 + ')';
	
	obj = document.getElementById("next");
	obj.style.opacity = 100;
	obj.style.filter = 'alpha(opacity=' + 100 + ')';

				
	}


}



//declare array for carousels to determine size   
var mycarousel_itemList = [];
var carouselSize = null;

//declare array of carousel objects
var theModelCarousel = new Array();

 //Add list items
 function mycarousel_getItemHTML(item, i){
	
	if(i < 9 ){
			
	return '<li><a  class="screenshot" rel="'+item+'"  href="#">0'+[parseInt(i)+1]+'</a></li>';
	
	}else if(i >= 9){
		
	return '<li><a  class="screenshot" rel="'+item+'" href="#">'+[parseInt(i)+1]+'</a></li>';

	}
		
};

function resetCarousel(pieces) {
		
	
	//pieces object is two-level array: thumbs and projectID;
	//pieces.carouselID[0] is what we use to target the right carousel
	
	//declare the array
	mycarousel_itemList = pieces.thumb;
	

	//reset the right carousel
	theModelCarousel[pieces.carouselID[0]].reset();
	
			
	//set carousel size
	if(pieces.thumb.length/12 % 12 == 0 && pieces.thumb.length > 12 ) {
				
	theModelCarousel[pieces.carouselID[0]].size(Math.ceil(pieces.thumb.length/6))
				 
					}else if(pieces.thumb.length/12 % 12 != 0 && pieces.thumb.length > 12 ) {
			
	theModelCarousel[pieces.carouselID[0]].size(Math.ceil(pieces.thumb.length/6+1))
					
					}else if ( pieces.thumb.length < 12) {
						
						theModelCarousel[pieces.carouselID[0]].size(1);
						
					}
				}


 
function mycarousel_itemLoadCallback(carouselID, carousel, state) { 

   
   //carouselID passed from carousel initialization
	theModelCarousel[carouselID] = carousel;
		
	if(state == 'init') {
	for (i in mycarousel_itemList) {

       // carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i-1], i));
        theModelCarousel[carouselID].add(i, mycarousel_getItemHTML(mycarousel_itemList[i], i));
 
		}
	}
	
	screenshotPreview();

}; 


function jsonMenu( menuURL ) {
   
   $.ajax({
  type: "GET",
  url: menuURL,
  success: resetCarousel,
  dataType: "json",
  cache: false
     });
}


//DOCUMENT READY

jQuery(document).ready(function() {
								
var featuredOpen = true; 										
										
	$("img.loader").fadeTo("fast", 0); 									
										
	
	function setLanding() { 
	
		$("div.landing-window").hover(
	  function(){
		$(this).find("div.landing-image").fadeTo("fast", 0.25);
		$(this).find("div.landing-caption").fadeIn(400);
	  },
	  function(){
		$(this).find("div.landing-image").fadeTo("fast", 1);
		$(this).find("div.landing-caption").fadeOut(400);
	  }
	);		
		
		
		
$(".landing-link").click(function(){ 
									  
		 category = $(this).attr("href").slice(1);
		 subcategory = $(this).attr("id").slice(7);
	
		
		//Open Work
		$("#accordion").accordion( "activate" , 0);
		
		//Open Gallery
		$("#acc-head"+category+"").trigger('click');
		
		$("#h3"+category+"").trigger('click');


if($('#subnav'+category+'').children().size() == 0) {
		
	//	$.getJSON('wp-content/themes/metlen/AJAX/menu-json.php?category='+category+'', resetCarousel);
	
	jsonMenu('wp-content/themes/metlen/AJAX/menu-json.php?category='+category+''); 
	
	buildGallery(category);
		
	
	}else{
					
	jsonMenu('wp-content/themes/metlen/AJAX/submenu-json.php?subcategory='+subcategory+''); 

		
		buildGallery(category, subcategory );
		$(".subnav a").removeClass('selected');	
		
		//Highighlight Subgallery
		$('#subgallery'+subcategory+'').addClass('selected');		
		
		}
		
	closeFeatured(); 
																	  			
});

					
		
		
	
	}
										
			
	setLanding(); 		
						
				
				

function openFeatured() {
	
	$('#featured').removeClass('hidden');	
	
	$('#featured').fadeIn(700);
	$("h2.home").addClass('selected');
	
	$('#slideshow').cycle('stop').empty(); 
	$('#slideshow').html(''); 
	$('#slideshow').addClass('hidden');	
	
	setLanding(); 
	
	featuredOpen = true; 

}
	

function closeFeatured() {
	
	$('#slideshow').removeClass('hidden');		
	$('#featured').fadeOut(700);
	$('#featured').addClass('hidden');	
	
	$("#home-btn").removeClass('selected');
	
	featuredOpen = false;	
	
}
		
						
		
		
		
$("#home-btn").click(function(){ 

openFeatured(); 
//close all
$("#accordion").accordion("activate", -1);


}); 

//Set the stage properly in the event that a user clicks bio or contact first

$("h2").click(function(){ 

	if( ($(this).attr('id') == 'contact-btn' || $(this).attr('id') == 'bio-btn') && featuredOpen == true) {
		
		closeFeatured(); 
		
	}

}); 
		
					
$("h3").click(function(){ 
	
category = $(this).attr("id").slice(7);

	if( featuredOpen == true) {
		
		closeFeatured(); 
		
	}

if($('#subnav'+category+'').children().size() == 0) {
		

	//Ajax method is better to prevent caching

 	jsonMenu('wp-content/themes/metlen/AJAX/menu-json.php?category='+category+''); 

		
		buildGallery(category);
		
	}else{
				
		
 	jsonMenu('wp-content/themes/metlen/AJAX/submenu-json.php?subcategory='+$('#subnav'+category+'').children(":first").attr('id').slice(10)+''); 

		
		subcategory = $('#subnav'+category+'').children(":first").attr('id').slice(10); 
		
		buildGallery(category, subcategory );
		$(".subnav a").removeClass('selected');	
		$('#subnav'+category+'').children(":first").addClass('selected');		
		
		}
	
		$('#featured').fadeOut(700);
		

}); 

$(".subnav a").click(function(){ 
				
	id = $(this).attr("id").slice(10);
	
 	jsonMenu('wp-content/themes/metlen/AJAX/submenu-json.php?subcategory='+$(this).attr("id").slice(10)); 
		
	
	buildGallery($(this).closest("div").attr("id").slice(6), id);

	$(".subnav a").removeClass('selected');
	$(this).addClass('selected');
 
}); 
	 


//Initialize the carousels:
// first parameter in mycarousel_itemLoadCallback let's us extract the appropriarte carousel object for later use during reset
//Do it like so, 'manually' until we can sort out the ID issue



jQuery('#carousel4').jcarousel({ 
	vertical: true,
	scroll: 2,
    itemLoadCallback: function (carousel, state) { mycarousel_itemLoadCallback(4, carousel, state); } 
}); 

jQuery('#carousel5').jcarousel({ 
	vertical: true,
	scroll: 2,
    itemLoadCallback: function (carousel, state) { mycarousel_itemLoadCallback(5, carousel, state); } 
}); 

jQuery('#carousel6').jcarousel({ 
	vertical: true,
	scroll: 2,
    itemLoadCallback: function (carousel, state) { mycarousel_itemLoadCallback(6, carousel, state); } 
});


jQuery('#carousel7').jcarousel({ 
	vertical: true,
	scroll: 2,
    itemLoadCallback: function (carousel, state) { mycarousel_itemLoadCallback(7, carousel, state); } 
});


jQuery('#carousel8').jcarousel({ 
	vertical: true,
	scroll: 2,
    itemLoadCallback: function (carousel, state) { mycarousel_itemLoadCallback(8, carousel, state); } 
}); 

jQuery('#carousel9').jcarousel({ 
	vertical: true,
	scroll: 2,
    itemLoadCallback: function (carousel, state) { mycarousel_itemLoadCallback(9, carousel, state); } 
}); 
//IMPORTANT: Accordion must be set AFTER carousels have been initiated
	$("#accordion").accordion({autoHeight:false, active: false, collapsible: true});
	 $("#nest").accordion( { header: '.acc-head', autoHeight:false, active: false, });
	
	
});