/* 

if get s, figure out numeric code for species call aboutSpecies(1)


*/

function showSpecies(species){
	
	$("div#mainContent").empty();
	$("div#mainContent").append(
		"<div id='speciesDetail'>"+
			"<div id='speciesTab'><img id='speciesTabImg' src='/media/tabSpecies.gif' alt='Species'/></div>"+
			"<div id='speciesDetailListBox'><ul id='speciesDetailList'></ul><br class='cl' /></div>"+
			"<hr id='ideasRule' />"+
			"<div id='previousNext' class='previousNext'></div>"+
			"<div class='speciesContent'>"+
				"<div id='speciesVisuals' class='speciesVisuals'></div>"+
				"<div id='speciesInfo' class='speciesInfo'></div>"+
				"<div id='speciesLocal' class='speciesLocal'></div>"+
			"</div>"+
			"<div id='rightArrowNext' class='rightArrowNext'></div>"+
		"</div>"+
		"<div class='clear'>&nbsp;</div>"
	);
		

	$.getJSON('/data_speciesList.json', function(speciesData){

		var speciesLinksList = "";

		for (var k=0;k<speciesData.species.length;k++){
			
			
			/* Make Species Navigation with Here Label */
			if(k==species || species==speciesData.species[k].file){
				speciesLinksList += "<li class='speciesShowing'>"+speciesData.species[k].name+"</li>";
			} else{
				speciesLinksList += "<li class='speciesLink'><a href='javascript:showSpecies(\""+speciesData.species[k].id+"\");'>"+speciesData.species[k].name+"</a></li>";
			}
			
			
			if(k==species || species==speciesData.species[k].file){

				/* Write Next and Previous Links */
				var prev = (species-1); if(prev<0){ prev = speciesData.species.length; }
				var next = (species+1); if(next>=speciesData.species.length){ next = 0; }

				$("div#previousNext").append(
					"<span class='previous'><a href='javascript:showSpecies("+prev+");'>&lt; previous</a></span>"+
					"<span class='next'><a href='javascript:showSpecies("+next+");'>next &gt;</a></span>"
				);

				/* Write Species Info */
				$("div#speciesInfo").append(
					"<img class='speciesName' src='/media/species/"+speciesData.species[k].file+"/txt-"+speciesData.species[k].file+".gif' alt='"+speciesData.species[k].name+"' />"+
					"<span class='speciesStatus'>STATUS: "+speciesData.species[k].status+" // "+speciesData.species[k].count+"</span>"+ 
					"<p><span class='biu'>Description:</span> "+speciesData.species[k].desc+"</p>"+
					"<p><span class='biu'>Habitat:</span> "+speciesData.species[k].hab+"</p>"+
					"<p><span class='biu'>Threats:</span> "+speciesData.species[k].threats+"</p>"+
					"<p><span class='biu'>Solutions:</span> "+speciesData.species[k].solutions+"</p>"
				);

				/* Write Species Visuals */
				$("div#speciesVisuals").append(
					"<div class='speciesPics'>"+
						"<div class='specPicBox'>"+
							"<a class='specPic' id='st-"+speciesData.species[k].file+"-0' rel='"+speciesData.species[k].file+"' title='"+speciesData.species[k].caption0+"' href='/media/species/"+speciesData.species[k].file+"/"+speciesData.species[k].file+".jpg'><img class='speciesPic' src='/media/species/"+speciesData.species[k].file+"/tn-"+speciesData.species[k].file+".jpg' /></a>"+
						"</div>"+
						"<div class='speciesThumbnails'>"+
							"<div class='speciesThumbBoxBr'><a id='st-"+speciesData.species[k].file+"-1' href='/media/species/"+speciesData.species[k].file+"/"+speciesData.species[k].file+"-1.jpg' rel='"+speciesData.species[k].file+"' title='"+speciesData.species[k].caption1+"'><img class='speciesThumb1' src='/media/species/"+speciesData.species[k].file+"/tn-"+speciesData.species[k].file+"-1.jpg' /></a></div>"+
							"<div class='speciesThumbBoxBr'><a id='st-"+speciesData.species[k].file+"-2' href='/media/species/"+speciesData.species[k].file+"/"+speciesData.species[k].file+"-2.jpg' rel='"+speciesData.species[k].file+"' title='"+speciesData.species[k].caption2+"'><img class='speciesThumb2' src='/media/species/"+speciesData.species[k].file+"/tn-"+speciesData.species[k].file+"-2.jpg' /></a></div>"+
							"<div class='speciesThumbBox'><a id='st-"+speciesData.species[k].file+"-3' href='/media/species/"+speciesData.species[k].file+"/"+speciesData.species[k].file+"-3.jpg' rel='"+speciesData.species[k].file+"' title='"+speciesData.species[k].caption3+"'><img class='speciesThumb3' src='/media/species/"+speciesData.species[k].file+"/tn-"+speciesData.species[k].file+"-3.jpg' /></a></div>"+
						"</div>"+
					"</div>"+
					"<a class='tattooLink' href='/tattoos/?t="+speciesData.species[k].file+"'>see the tattoo of me &gt;&gt;</a>"+
					"<div class='speciesVideo'>"+
						"<object width='200' height='136'><param name='movie' value='"+speciesData.species[k].video+"&hl=en_US&fs=1&rel=0&color1=0xe1600f&color2=0xfebd01'></param><param name='allowFullScreen' value='true'></param><param name='allowscriptaccess' value='always'></param><embed src='"+speciesData.species[k].video+"&hl=en_US&fs=1&rel=0&color1=0xe1600f&color2=0xfebd01' type='application/x-shockwave-flash' allowscriptaccess='always' allowfullscreen='true' width='200' height='136'></embed></object>"+
					"</div>"
				);
				

				/* Initialize Lightbox w/Customizations */
				for(var i=0;i<=3;i++){
					$("a#st-"+speciesData.species[k].file+"-"+i).fancybox({
						'titleShow':true,
						'titlePosition':'inside',
						'showNavArrows':true,
						'overlayOpacity':.6,
						'overlayColor':'#000',
						'cyclic':true,
						'titleFormat': 
							function(title, currentArray, currentIndex, currentOpts) {
						  		return '<span id="fancybox-title-over">' + title + ' <span style="float:right;" class="fancybox-custom-nav"> ' + 
										(currentIndex + 1) + ' of ' + 
										currentArray.length + ' &nbsp; ' +
										'&lt; &nbsp; <a href="javascript:$.fancybox.prev();" class="custom-fancybox-left">prev</a> &nbsp; &nbsp;'+
										'<a href="javascript:$.fancybox.next();" class="custom-fancybox-right">next</a> &nbsp; &gt;'+'</span></span>'; }
					});
				}

				/* Write Species Local */
				$("div#speciesLocal").append(
					"<div class='speciesMapDetail'><img src='/media/species/"+speciesData.species[k].file+"/map-detail-"+speciesData.species[k].file+".gif' alt='Habitat Map' /></div>"+
					"<div class='speciesResidence'><span class='i'>RESIDENCE:</span> "+speciesData.species[k].residence+"</div>"+
					"<div class='localResources'>LOCAL RESOURCES:<ul id='localResourceList' class='localResourceList'></ul></div>"
				);

				/* Write Local Resource Links List */
				if(speciesData.species[k].resource){
					for (var j=0;j<speciesData.species[k].resource.length;j++){				
						$("ul#localResourceList").append(
							"<li class='localResourceItem'><a class='localResourceLink' target='resource' href='"+speciesData.species[k].resource[j].link+"'>" + speciesData.species[k].resource[j].name + "</a></li>"
						);
					}
				}
				
				/*  Write Next Link */
				$("div#rightArrowNext").append(
					"<a href='javascript:showSpecies("+next+");'><img class='rightArrow' src='/media/rightArrowBlue.gif' /></a>"
				);

			}
		} // end for k species

		/* Append Species Nav Links with Here Label */
		$("ul#speciesDetailList").append(speciesLinksList);

	});
}