var applets = {};
	var current_filter = 'everything';
	var current_page = 0;
	var current_applet_name;
	
	
	if(!Array.indexOf){
	    Array.prototype.indexOf = function(obj){
	        for(var i=0; i<this.length; i++){
	            if(this[i]==obj){
	                return i;
	            }
	        }
	        return -1;
	    }
	}

	$(document).ready(function() {
		
		// get the name of the current applet
		current_applet_name = $('#applets div.current_applet').attr('data-id');
		
		// constrain the applets display
		$('#applets_scroller').css( 'height', '640px' );
		
		// and make it scrolly
		$('#applets_scroller').bind( 'mouseover', mouseoverApplets );
		$('#applets_scroller').bind( 'mouseleave', mouseleaveApplets );
		
		// progressive enhancement means replacing static links with js equivalents
		$('#stepper_links a').each( replacePageturn );
		$('#filter a').each( replaceFilter );
		
		// load the applet cache
		$.post( '/loadapplets/', didLoadApplets );
		
		// make links inside applet_content open in a new tab
		$('#applet_content a').each( function(){ $(this).attr('target', '_new') });
	});
	
	var dscroll = 0;
	
	function mouseoverApplets( event )
	{
		// where in the applet display is the mouse?
		var y_position = event.pageY;
		var top = $('#applets_scroller').offset().top;
		var bottom = $('#applets_scroller').height() + top;
		var latitude = 100;
		var step = 10;
		var new_dscroll = 0;
		
		if( y_position < top + latitude )
		{
			new_dscroll = step;
		}
		else if( y_position > bottom - latitude )
		{
			new_dscroll = -step;
		}
		else
		{
			dscroll = 0;
		}
		
		// only invoke the scroll animation if we're changing direction
		if( new_dscroll != dscroll )
		{
			dscroll = new_dscroll;
			scrollApplets();
		}
		
		return false;
	}
	
	function mouseleaveApplets( event )
	{
		dscroll = 0;
	}
	
	function scrollApplets()
	{
		var top = $('#applets').position().top;
		var padding = 10;
		var range = $('#applets').height() - $('#applets_scroller').height();
		
		if( dscroll		// are we scrolling? 
			&& top + dscroll > -( range + padding)
			&& top + dscroll < padding )
		{
			$('#applets').animate( { 'top' : top + dscroll + 'px' }, 1, scrollApplets );
		}
		
	}
	
	function didLoadApplets( response )
	{
		var raw_applets = eval( response );
		
		for( var i in raw_applets )
		{
			var raw = raw_applets[i];
			var filters;
			
			if( raw[3] != undefined )
			{
				filters = raw[3].split(',');
				
				applets[raw[0]] = { name: raw[1],
									icon: raw[2],
									filters: filters };
			}
		}
	}
	
	function replaceFilter( index )
	{
		$(this).removeAttr( 'href' );
		$(this).bind( 'click', function(){ loadFilter( this.id ) } );
	}
	
	function loadFilter( filtername )
	{
		// remember the current applet is selected
		var selected_applet_name = $('#applets div.current').attr('data-id');
		
		// (if it is in the current set)
		if( selected_applet_name )
		{
			current_applet_name = selected_applet_name;
		}
		
		// keep track of the filter
		current_filter = filtername;
		
		// update the filter selector
		$('#filter a').removeClass( 'selected' );
		$('#filter a#' + filtername).addClass( 'selected' );
		
		// build the new list
		$('#sidebar').append( "<div id='new_applets'></div>" );
		
		// get a list of applets and display them
		for( var i in applets )
		{
			var applet = applets[i];
			
			if( applet.filters.indexOf( filtername ) != -1 )
			{
				// display applet
				var html = "<div data-id='" + i + "' class='applet";
				
				// remember to apply the selection decoration to the current applet
				if( i == current_applet_name )
				{
					html += " current";
				}
				
				html += "'>"
							 + " <a href='/" + i + "' class='applet_icon'>"
							 	 + applet.name
								 + " <img src='/static/" + applet.icon + "' />"
							 + " </a>"
						 + " </div>"
				$('#new_applets').append( html );
			}
		}
		
		$('#applets').animate( { 'top' : '0px' }, 50 );
		
		$('#applets').quicksand( $('#new_applets div'), 
								 {  },
								 function(){ $('#new_applets').remove(); } );
		
		// tell the app that we changed the filter
		$.post( '/setvalues/', 
				{ 'filtername': filtername } );
	}
	
	function replacePageturn( index )
	{
		// remove the link
		this.href = "#";
		
		if( $(this).hasClass( 'next_page' ) )
		{
			// if we have to do a replace on this, then we're on page 0
			// so the next page is page 1
			$(this).bind( 'click', function(){ loadPage( 1 ) } );
		}
		else
		{
			$(this).bind( 'click', function(){ loadPage( index ) } );
		}
	}
	
	function loadPage( pagenumber )
	{
		current_page = pagenumber;
		
		var ie_sux = new Date();
		$.post( '/loadpage/?a=' + ie_sux.getTime(),
				{ 'applet_name': current_applet_name,
				  'pagenumber': pagenumber },
				didLoadPage );
	}
	
	function didLoadPage( response )
	{
		var json = eval( '(' + response + ')' );
		
		// slide out
		$('#applet_content').animate( { left: '1000px' }, 250, function(){ insertPageContent( json ); } );
	}
	
	function insertPageContent( json )
	{
		// put the response in the target div
		$('#applet_content').html("<div class='" + json.style + "'>" + json.html + "</div>");
		
		// update the page indicator
		$('#stepper_links a').removeClass( 'current_page' );
		$('#stepper_links a').eq(json.pagenumber).addClass( 'current_page' );
		
		// update the nextpage link
		$('#stepper_links a.next_page').unbind();
		$('#stepper_links a.next_page').bind( 'click', function(){ loadPage( json.nextpage ); } );
		
		// slide back in
		$('#applet_content').animate( { left: '0px' }, 250 );
	}
	
	// Mailing list functions
	
	function verifyRequired()
	{
		// this is legacy code from last site
		if( document.icpsignup["email_address"].value.indexOf('@') == -1 )	
		{
			document.icpsignup["email_address"].focus();
			alert("The Email field is required.");
			return false;
		}
		
		return true;
	}