$(document).ready(function(){
	
	var letter = '';
	
	$("#alphabet span").hover(
	  function () {
	    $('#'+this.id).css({'background':'#d30000','color':'#ffffff'});
	  }, 
	  function () {
	  	if(letter != this.id) {
	  		$('#'+this.id).css({'background':'none','color':'#CC0000'});
		  }
	  }
	);
	
	$("#alphabet span").click(function () {
		
		docPos = document.getElementById(this.id+'_hook');
    pos = findPosY(docPos);
        
		$("#slideme").animate({ marginTop: "-"+pos }, 500 );
		
		if(letter) {
	    $('#'+letter).css({'background':'none','color':'#CC0000'});
    }
    
		letter = this.id;
    $('#'+this.id).css({'background':'#d30000','color':'#ffffff'});
  });
  
 	var slidedown = function () {
		margintop = Number(document.getElementById('slideme').style.marginTop.replace('px',''))-300;

		if(margintop < '-'+document.getElementById('slideme').offsetHeight) {
			newmargintop = Number(document.getElementById('slideme').offsetHeight)-69;
			margintop = '-'+newmargintop;
		}
		
		$("#slideme").animate({ marginTop: margintop }, 500 );
	}
	
 	var slideup = function () {
		margintop = Number(document.getElementById('slideme').style.marginTop.replace('px',''))+300;
		
		if(margintop > 0) {
			 margintop = 0;
		}
		
		$("#slideme").animate({ marginTop: margintop }, 500 );
	}
 
	$("#slidedown").click(function () {
		slidedown();
	});
 
	$("#slideup").click(function () {
		slideup();
	});

});

function findPosY(obj)
{
  var curtop = 0;
  

if(obj.offsetParent) {
      while(1)
      {
        curtop += obj.offsetTop;
        if(!obj.offsetParent)
          break;
        obj = obj.offsetParent;
      }
      

  } else if(obj.y) {
  	curtop += obj.y;
  }
            
  replaceThis = document.getElementById('slideme').style.marginTop.replace('px','');      
  gohere			= Number(curtop)-Number(784)-Number(replaceThis)+1;

  return gohere;
}