$(document).ready(function(){
    $(".clickImage").click(function(event){
        var id = $(this).attr( "id" );
        $("#quote").hide();
        $("#bio_name").hide();
        $.get("script/getData.php?id="+id,function(data){
            var src = ""
            var alt = ""
            var myClass = "";
                        
            for(var i = data.search("src=")+5; data[i] != "'" && data[i] != '"' ; i++ ){
                src += data[i];
            }
            for(i = data.search("alt=")+5; data[i] != "'" && data[i] != '"' ; i++ ){
                alt += data[i];
            }
            for(i = data.search("class=")+7; data[i] != "'" && data[i] != '"' ; i++ ){
                myClass += data[i];
            }
            $("#bio").attr("src",src);
            $("#bio").attr("alt",alt);
            $("#bio").attr("class",myClass);
            $("#bio_name").attr("src",src.replace("bio","bio/name"));
            $("#bio_name").attr("alt",alt);
            $("#bio_name").fadeIn(400)
            $.get("script/getData.php?bio_questions="+id,function(data){
                
                data = data.split(";");
                for(i = 0;i<data.length-1;i++){
                    var temp = "#tooltip"+i
                    $(temp).html(data[i]);
                    //$(temp).attr("title",data[i]);
                }
                $("#quote").fadeIn(500);
            })
        })
        
    });
    $("#bio").hover(
        function(event){  
            var src = $(this).attr("src")
            src = src.replace("bio","bio/alt");
            $(this).attr("src",src);
        },
        function(event){
            var src = $(this).attr("src")
            src = src.replace("bio/alt","bio");
            $(this).attr("src", src);
        }
    )

    $('.toolTip').hover(
        function() {
        this.tip = this.title;
        $(this).append(
                '<div class="toolTipWrapper">'
                        +'<div class="toolTipTop"></div>'
                        +'<div class="toolTipMid">'
                                +this.tip
                        +'</div>'
                        +'<div class="toolTipBtm"></div>'
                +'</div>'
        );
        this.title = "";
        this.width = $(this).width();
        $(this).find('.toolTipWrapper').css({left:this.width-500})
        //$('.toolTipWrapper').fadeIn(300);
        $('.toolTipWrapper').toggle("300");
    },
    function() {
        $('.toolTipWrapper').fadeOut(300);
        //$('.toolTipWrapper').toggle("fast");
        $(this).children().remove();
        this.title = this.tip;
        }
    );

 });