$(document).ready(function(){
    
    $(".home-pic").hide();

	$('.chcolormenu a.hovertit').hover(  //change the menu images from home menu and inside menu
    
    function() {
            
             $('img', this).attr("src", "img/tit_" + $(this).attr("id") + "_hover.gif");
      
        
        },
    
    function() {

             $('img', this).attr("src", "img/tit_" + $(this).attr("id") + ".gif");
      
	

	});
	
	$('.chcolormenu .showit').hover(  //show pics associated with links
    
    function() {
        //alert("asd");
             $id = $(this).attr("id");
             if ($(this).hasClass("home")) $("#"+$id+"_pic").fadeIn(500);

        },

    function() {

             if ($(this).hasClass("home")) $("#"+$id+"_pic").fadeOut(500);


	});
	
	//graphic design show the lines to the pic, then the main photo and the pics menu
    $("#line1, #line2, #line3, #img-sample, #pics-menu, #description").hide();
    
     $("#line1").show("slide", { direction: "left" }, 1000, function() { 
     
        $("#line2").show("slide", { direction: "down" }, 1000, function() { 
            
            $("#line3").show("slide", { direction: "left" }, 1000, function() {
                
                $("#img-sample").fadeIn(4000);    
                $("#pics-menu").fadeIn(4000);        
                $("#description").fadeIn(4000);    
                
            } ) 
        
        }) 
    
    });
    
    //fade in pics menu
    $("#pics-menu a img").hover(
        function () {
          $(this).fadeTo("slow", 0.5);
        },
    
        function () {
          $(this).fadeTo("slow", 1);
        }
    
    );
    
    //graphic design, print: img & description changer
    $("#pics-menu a").click(function(){
        $id = $('img', this).attr("id");
        $info = $(this).attr("title").split("|");
        
        $("#img-sample img").fadeTo(500, 0.1, function() {
            //alert("img/img_" + $id + "_normal.jpg");
            $("#img-sample img").attr("src", "img/img_" + $id + "_normal.jpg");    
            $("#img-sample img").attr("alt", $info[0]);    
            $("#img-sample img").attr("title", $info[0]);    
        } ) ;
        
        $("#description").fadeTo(500, 0.1, function() {

            $("#description #designer-name").html($info[1]);
            //$("#description #designer-email").html('<a href="mailto:'+$info[2]+'">E: '+$info[2]+'</a>');
            $("#description #designer-email").html($info[2]);
        } ) ;
         
       
        
        $("#img-sample img").fadeTo(1000, 1);        
        $("#description").fadeTo(500, 1);        
    });
    
    //see what el se we do img changer
    $(".simply-img-changer-menu a").click(function(){
    //$id = $('img', this).attr("id");
    $(".simply-img-changer-pic img").attr("src", $(this).attr("href"));
    return false;    
    });

    //graphic design, card: animation
    $("#line4, #arrow1, #card1, #card2, #card3").hide();

     $("#line4").show("slide", { direction: "left" }, 2000, function() {

        $("#arrow1").show("slide", { direction: "down" }, 500, function() {

            $("#card3").fadeIn(1000, function() {
            
                $("#card2").fadeIn(1000, function() {

                    $("#card1").fadeIn(1000);

                } )    

            } )

        })

    });
    
    //fade in cards
    $(".cards").hover(
        function () {
          $(this).fadeTo("slow", 0.5);
        },

        function () {
          $(this).fadeTo("slow", 1);
        }

    );

    //logo animation logo-viewer
    $("#line5, #logo-viewer").hide();

     $("#line5").show("slide", { direction: "left" }, 2000, function() {

        $("#logo-viewer").fadeIn(1000);

    });
    
    $(".simply-img-changer-menu a").hover(
        function () {
          $(this).fadeTo("slow", 0.5);
        },

        function () {
          $(this).fadeTo("slow", 1);
        }

    );
    

    //logo img desc changer
    $("#logo-viewer a").click(function(){
        $ref = $(this).attr("href");
        $info = $(this).attr("title").split("|");

        $("#img img").fadeTo(500, 0.1, function() {
            //alert("img/img_" + $id + "_normal.jpg");
            $("#img img").attr("src", $ref);
            $("#img img").attr("alt", $info[0]);
            $("#img img").attr("title", $info[0]);
            
        } ) ;

        $("#desc").fadeTo(500, 0.1, function() {

            $("#desc #title").html('<span class="light2">Logo Design: </span>'+ $info[0]);
            $("#desc ul").html('<li id="tel" class="sifr-eras-type1"><span class="light2">Tel:</span>'+ $info[1]+'</li>');
            //alert($info[2].substring(0,1)) ;
            if(!($info[2] == undefined) && $info[2].substring(0,1) == "E") {
            //alert("concha");
                $("#desc ul").append('<li id="email" class="sifr-eras-type1"><span class="light3">E-mail:</span> <a class="dark1" href="mailto:'+ $info[2].substring(7)+'">'+$info[2].substring(7)+'</a></li>');    
            }else if(!($info[2] == undefined) && $info[2].substring(0,1) == "W"){
                $("#desc ul").append('<li id="web" class="sifr-eras-type1"><span class="light3">Web:</span> <a class="dark1" href="http://'+ $info[2].substring(4)+'">'+$info[2].substring(4)+'</a></li>');    
            }
            
            if(!($info[3] == undefined) && $info[3].substring(0,1) == "E") {
                $("#desc ul").append('<li id="email" class="sifr-eras-type1"><span class="light3">E-mail:</span> <a class="dark1" href="mailto:'+ $info[3].substring(7)+'">'+$info[3].substring(7)+'</a></li>');
            }else if(!($info[3] == undefined) && $info[3].substring(0,1) == "W"){
                $("#desc ul").append('<li id="web" class="sifr-eras-type1"><span class="light3">Web:</span> <a class="dark1" href="http://'+ $info[3].substring(4)+'">'+$info[3].substring(4)+'</a></li>');
            }

        } ) ;

        $("#img img").fadeTo(1000, 1);
        $("#desc").fadeTo(500, 1);
    });
    
    
});