$(document).ready( function( ) {

	var geneID = $("#geneID").val( );
	var siteURL = document.location.hostname;

	$("#sequence-info")
		.html( '<img src="http://' + siteURL + '/images/ajax-loader.gif" alt="Loading..." />' )
		.load( 'http://' + siteURL + '/scripts/buildSequence.php', {id: geneID}, function ( ) {
			
			$('a.phospho-site').cluetip({
				local: true, 
				arrows: true, 
				titleAttribute: 'title', 
				width: 225,
				closePosition: 'title',
				closeText: '<img src="http://' + siteURL + '/images/agt_stop1.gif" alt="collapse" />',
				sticky: true
			});
			
			$(".side-motif").mouseover( function( ) {
				$(this).css( { 'background-color' : '#666', 'color' : '#FFF' } );
				
				var range = $(this).attr( 'title' );
				var rangeSplit = new Array( );
				rangeSplit = range.split( "|" );
				
				rangeSplit[0] = parseInt( rangeSplit[0] );
				rangeSplit[1] = parseInt( rangeSplit[1] );
				
				$("#residue" + rangeSplit[0] + " > .motif" ).css( { 'border-bottom' : '2px solid red' } );
				$("#residue" + rangeSplit[1] + " > .motif" ).css( { 'border-bottom' : '2px solid red' } );
				
				for( var i = rangeSplit[0]+1; i < rangeSplit[1]; i++ ) {
					$("#residue" + i + " > .motif").css( { 'border-bottom' : '2px solid red' } );	
				}
				
			}).mouseout( function( ) { 
				$(this).css( { 'background-color' : '#CFF', 'color' : '#666' } ); 
				
				var range = $(this).attr( 'title' );
				var rangeSplit = new Array( );
				rangeSplit = range.split( "|" );
				
				rangeSplit[0] = parseInt( rangeSplit[0] );
				rangeSplit[1] = parseInt( rangeSplit[1] );
				
				$("#residue" + rangeSplit[0] + " > .motif" ).css( { 'border-bottom' : 'none' } );
				$("#residue" + rangeSplit[1] + " > .motif" ).css( { 'border-bottom' : 'none' } );
				
				for( var i = rangeSplit[0]+1; i < rangeSplit[1]; i++ ) {
					$("#residue" + i + " > .motif").css( { 'border-bottom' : 'none' } );	
				}
				
			});
			
		});
		
	$("#phospho-info")
		.html( '<img src="http://' + siteURL + '/images/ajax-loader.gif" alt="Loading..." />' )
		.load( 'http://' + siteURL + '/scripts/buildPhosphoDetails.php', {id: geneID}, function ( ) {																					 
			$("#phospho-details").tablesorter({ 
				headers: {
					2: { sorter: false },
					3: { sorter: false },
					4: { sorter: false }
				}
			});
			
			$('.viewnote').cluetip({
					splitTitle: '|',
					showTitle: false,
					cluetipClass: 'jtip'
				});
			});
		
	$("#relationship-info")
		.html( '<img src="http://' + siteURL + '/images/ajax-loader.gif" alt="Loading..." />' )
		.load( 'http://' + siteURL + '/scripts/buildRelationshipDetails.php', {id: geneID}, function ( ) {
			$("#relationship-details").tablesorter({ 
				headers: {
					1: { sorter: false }
				}
			});
			
			$("#reverse-relationship-details").tablesorter({ 
				headers: {
					1: { sorter: false }
				}
			});
			
		});

});