// Created by Vilas Tewari
// These functions enable sorting projects by tags in the project viewer

ProjectViewer = new VkiddProjectViewer();
var msie = ( navigator.appName == "Microsoft Internet Explorer" );

// Setup references to all projectThumbnails
function VkiddProjectViewer()
{
	var mFadeSpeed = 400; //ms
	var mProjects = [];
	var mProjectTags = [];
	var mProjectCount = 0;
	
	var mActiveTags = "";
	var mDebugging = false;
	
	// Setup Member Functions
	this.ToggleTag = ToggleTagState;
	this.RegisterProject = RegisterProjectAndTags;
	
	// Register a project div and it's set of tags to be managed by the Project Viewer
	function RegisterProjectAndTags( projectId, tags )
	{
		mProjects[mProjectCount] = document.getElementById( projectId );
		mProjectTags[mProjectCount] = tags;
		
		if( mProjects[mProjectCount] == null )
			alert( "mProjectElement is null" );
		
		++mProjectCount;
	}
	
	
    function ToggleTagState( tagElement, tag )
    {
		// Turn ON Tag
		if( mActiveTags.indexOf(tag) == -1 )
		{
			mActiveTags = mActiveTags.concat( "," + tag );
			tagElement.className = "projectTagON";
		}
		// Turn OFF Tag
		else
		{
			mActiveTags = mActiveTags.replace( "," + tag, "" );
			tagElement.className = "projectTagOFF";
		}
		
		if( mDebugging )
			alert( mActiveTags );
		
		SetProjectsDisplayState();
	}
	
	function SetProjectsDisplayState()
    {
		// Create tags array
		var tags = mActiveTags.split(",");
		// remove leading ""
		tags.shift();
		
		if( mDebugging )
			alert( tags );
		
		// Iterate thru each project
		for( i=0; i < mProjectTags.length; i++ )
		{
			var showProject = false;
			// Easy exit, if no tags show all
			if( tags.length == 0 )
			{
				showProject = true;
			}
			// Else if a project has one of the selected tags show it ( OR )
			else
			{
				for( t=0; t < tags.length; ++t )
				{
					if( mProjectTags[i].indexOf( tags[t] ) != -1 )
						showProject = true;
				}
			}
			
			// change div display state
			if( showProject )
			{
				mProjects[i].style.display = "";
				FadeInElement( mProjects[i].id, mFadeSpeed );
			}
			else
			{
				SetOpacity( mProjects[i].id, 0 );
				mProjects[i].style.display = 'none';
			}
		}
    }
}

// Static Functions

function SetOpacity( elementId, value )
{
	var element = document.getElementById( elementId );
	if( msie )
		element.style.filter = 'alpha(opacity=' + value * 100 + ')';
	else
		element.style.opacity = value;
}

function FadeInElement( elementId, fadeSpeed )
{
	var s = Math.round( fadeSpeed / 20 ); // 20ms increments
	var timer = 0;
	var i;
	
	SetOpacity( elementId, 0 );
	
	for( i = 0; i <= s; i++ )
	{
		setTimeout( "SetOpacity('" + elementId + "'," + ( i / s )  + ")", timer++ * fadeSpeed / s );	
	}
}