// JavaScript Document

$(document).ready( function( ) {

		$("#topSearch").click( function( ) {
				if( this.value == "Search PhosphoGRID..." ) {
						this.value = "";
				}
		});
		
		$("#topSearch").blur( function( ) {
				if( $(this).val( ) == "" ) {
						$(this).val( "Search PhosphoGRID..." );
				}
		});
		
		$("#frontSearch").click( function( ) {
				if( this.value == "Search PhosphoGRID..." ) {
						this.value = "";
				}
		});
		
		$("#frontSearch").blur( function( ) {
				if( $(this).val( ) == "" ) {
						$(this).val( "Search PhosphoGRID..." );
				}
		});
});

function submitTopSearch( ) {

	var searchKeyword = $('#topSearch').val( );
	$("#topSearchForm").submit( );
	
}

function submitFrontSearch( ) {

	var searchKeyword = $('#frontSearch').val( );
	$("#frontSearchForm").submit( );
	
}

function highlightSite( location ) {
	
	var toChange = document.getElementById( "residue" + location );
	
	//toChange.innerHTML = "<a class='jTip' id='" + location + "' name='" + toChange.innerHTML + location + "'>" + toChange.innerHTML + "</a>";
	toChange.innerHTML = "<a title='WHOA' class='phospho-site' id='" + location + "' rel='#ResidueSummary" + location + "'>" + toChange.innerHTML + "</a>";
	
}

function clearHighlights( ) {
	
	var cssObj = {
			"background-color": "transparent"
	}

	$(".residue").css( cssObj );

}

function highlightRange( start, end, color, clear ) {
	
	if( clear ) {
		clearHighlights( );
	}
	
	var cssObj = {
			"background-color": color
	}

	for( i = start; i <= end; i++ ) {
		var toChange = this.document.getElementById( "residue" + i );

		$(toChange).css( cssObj );
		
	}

}

function changeWeight( styleToChange ) {
	
	var toChange = this.document.getElementById( styleToChange );
	
	if( $(toChange).css( "backgroundColor" ) == "rgb(255, 255, 204)" ||
		$(toChange).css( "backgroundColor" ) == "rgb(204, 255, 204)" ||
		$(toChange).css( "backgroundColor" ) == "#ffffcc" ||
		$(toChange).css( "backgroundColor" ) == "#ccffcc" ||
		$(toChange).css( "backgroundColor" ) == "transparent" ) {
		
		$(".domain").css( "backgroundColor", "transparent" );
		$(".motif" ).css( "backgroundColor", "transparent" );
		$(toChange).css( "backgroundColor", "#99CCFF" );
		
	} else {
		
		$(".domain").css( "backgroundColor", "#FFFFCC" );
		$(".motif").css( "backgroundColor", "#CCFFCC" );
		
	}
	
}