/*


Sabertooth Interactive LLC
Author: Jesse Barrueta & Jesse Pinuelas
File: Project Gallery


*/

var debugMode = false;

if(debugMode){alert("Project Gallery Javascript loaded");}


var url = [];
var currentPage = 0;
var thumbsPerPage = 8;
var totalThumbs;
var lastPage;
var targetProjectThumbnail;



/*
	Set indicator dot to selected class on click
	Remove selected class from siblings
	Set current page  
*/
function setPageIndicator(indicatorId)
{
		//alert("id? "+$(indicatorId).attr('id').substr(-1));
		currentPage = parseInt($(indicatorId).attr('id').substr(-1));
		parseGalleryXML( currentPage );
		$(indicatorId).siblings().removeClass('selected');
		$(indicatorId).addClass('selected');
}



/*
	Parse through xml find project tags <project></project>
*/
function countThumbs()
{
	$.get('data/galleryProjects.xml', function(d)
	{
		var thumbCount = 0;
		$(d).find('project').each(function()
		{	
			thumbCount++;
		});
		totalThumbs = thumbCount;
		lastPage = Math.floor( totalThumbs / thumbsPerPage ) - 1;
	});
}

countThumbs();


/*
	Parse xml set project,image,alt,title and URL to XML nodes
	Create html list items inside UL #gmList
	TO DO: take mark up out of function
*/
function parseGalleryXML(targetPage)
{
	$.get('data/galleryProjects.xml', function(d)
	{
		var thumbCount = 0;
		var firstViewableThumb = targetPage * thumbsPerPage;
		var lastViewableThumb = firstViewableThumb + thumbsPerPage;
		var stripCount = 0;
		
		// empty list items insde UL element #gmList
		$('#gmList').empty();
		
		$(d).find('project').each(function()
		{	
			if(thumbCount >= firstViewableThumb && thumbCount < lastViewableThumb)
			{
				var $project = $(this); 
				var image = $project.attr("image");
				var imageAltText = $project.find("imageAltText").text();
				/*
					Even though XML has no predefined tags, the browser displaying
					the HTML with XML data does. Before we were using $project.find('title').text();
					I updated the XML to read <titleText></titleText> and all was well in Safari
				*/
				var title = $project.find('titleText').text();
				targetProjectThumbnail = '#galleryThumb' + thumbCount;
				url.push($project.find('url').text());
				
				
				var html = '<li id="galleryThumb'+thumbCount+'">';
				html += '<div id="overlay'+stripCount+'" class="gmOverlay"></div>';
				html += '<div class="gmProject">';
				html += '<div class="gmProjectInfo">';
				html += '<div class="gmTitle"><a href="'+url+'" target="_self">'+title+'</a></div>';
				html += '<div class="gmBottomStrip'+stripCount+'"></div>';
				html += '</div>';
				
				html += '<div class="gmImg"><img src="'+ image +'" alt="'+ imageAltText +'"></div>';
				html += '</div>';
				html += '</li>';
				$('#gmList').append($(html));
				
				/* When these event listeners were added when the DOM was ready it did not work on any browsers but mozilla */         
				$('.gmOverlay').mouseover(function() { showOverLay( $(this)) });
				$('.gmOverlay').mouseout(function() { hideOverLay( $(this)) });
				$('.gmOverlay').mouseover(function() { var currentStrip = '.gmBottomStrip'+this.id.substr(-1); showStrip( $(currentStrip) ) });
				$('.gmOverlay').mouseout(function()  { var currentStrip = '.gmBottomStrip'+this.id.substr(-1); hideStrip( $(currentStrip) ) });
        		
				$(targetProjectThumbnail).bind('mouseover', {index:thumbCount},overProjectThumb);
        		$(targetProjectThumbnail).bind('mouseout', {index:thumbCount},outProjectThumb);
        		$(targetProjectThumbnail).bind('click', {index:thumbCount},launchProject);
				$(targetProjectThumbnail).delay(thumbCount * 100).animate({opacity:1},300);
				stripCount++;
			}
			thumbCount++;
		});
	});
};
parseGalleryXML(0);

function launchProject(e)
{
  location.href = url[e.data.index];
}

function overProjectThumb(e)
{
 $('#galleryThumb'+e.data.index).css('cursor', 'pointer');
 $('#overlay'+e.data.index).stop(true, false).animate({opacity:.4},300);
 $('.gmBottomStrip'+e.data.index).stop(true, false).animate({ "bottom" : '-5px'},300);
 console.log("show overlay");
}

function outProjectThumb(e)
{
 $('#galleryThumb'+e.data.index).css('cursor', 'cursor');
 $('#overlay'+e.data.index).stop(true, false).animate({opacity:0},300);
 $('.gmBottomStrip'+e.data.index).stop(true, false).animate({ "bottom" : '-10px'},300);
}


function highlightPageIndicator(targetPage)
{
	$('.gmIndicatorNav li').each(function(index) 
	{
		if( (index - 1) == targetPage)
		{
    		$(this).addClass('selected');
		}else
		{
			$(this).removeClass('selected');
		}
  	});
}



function previousProjectGallery(galleryId)
{
	if(debugMode){alert("Gallery to animate: " + galleryId.attr("id"));}
	
	currentPage--;
	if(currentPage < 0)
	currentPage = 0;
	
	parseGalleryXML(currentPage);
	highlightPageIndicator(currentPage);
	
}


function nextProjectGallery(galleryId)
{
	if(debugMode){alert("Gallery to animate: " + galleryId.attr("id"));}

	currentPage++;
	if(currentPage > lastPage)
	currentPage = lastPage;
	
	parseGalleryXML(currentPage);
	highlightPageIndicator(currentPage);
}


/*
	Get DOM Element by id, based on id fade and show overlay
	To avoid animations to getting stuck in unwanted states.
	Use .stop( [ clearQueue ], [ jumpToEnd ] )
	By using the stop method  it will remove queued animation
*/
function showOverLay(overLayId)
{
	overLayId.stop(true, false).animate({opacity:.4},300);
}

function hideOverLay(overLayId)
{
	overLayId.stop(true, false).animate({opacity:0},300);
}

function showStrip(stripId)
{
	stripId.stop(true, false).animate({ "bottom" : '-5px'},300);
}

function hideStrip(stripId)
{
	stripId.stop(true, false).animate({ "bottom" : '-10px'},300);
}



/*
	When DOM is ready add event listeners to controls
*/
$(function uiInit() {
		$(document).ready(function(){
			$('.prev').click(function() { previousProjectGallery( $('.gmNav')) });
			$('.next').click(function() { nextProjectGallery( $('.gmNav')) });
			$('#dot0').click(function() { setPageIndicator( $(this)) });
			$('#dot1').click(function() { setPageIndicator( $(this)) });
		
			return false;
		});
});