$(document).ready(function(){
      //We do an AJAX post to get the list of all clients
      $.post("/ajax/list.php?catId="+intPage, {}, function(xml) {

        //Get the count and work out how big the scrolling banner will be
        var intCount=Math.ceil($(xml).find('client').size()/2);
        var intImageWidth=338*($(xml).find('client').size()-1);
        var intWidth=338*$(xml).find('client').size()+(3*338);

        //Go through each one and build the banner
        var intI=0;
        $(xml).find('client').each(function()
        {
            $("#menu1").append("<a href='http://www.greensplashdesign.com/Clients/"+$(this).find('filename').text()+".php'><img src='"+$(this).find('image').text()+"' width='336' height='253'></a>");
        });
        $(xml).find('client').each(function()
        {
            if(intI<3)
            {
              $("#menu1").append("<a href='http://www.greensplashdesign.com/Clients/"+$(this).find('filename').text()+".php'><img src='"+$(this).find('image').text()+"' width='336' height='253'></a>");
            }
            intI++;
        });




        //Set the attributes for width to the wrapper
        $("#menuwrapper").attr("style", "width:"+intWidth+"px;");
        $("#menu1").attr("style", "width:"+intWidth+"px;");

        //If one of the menu images is clicked on
        //$("#visual a").click(function(e)
        $("#menu1 a").click(function(e)
        {
          e.preventDefault();
          closeLink();
          displayContent($(this).attr("href"));
        });

        /*
        //If one of the sub-menus is clicked on
        $(".clientsmenu").click(function(e)
        {
          e.preventDefault();
          closeLink();
          displayContent($(this).attr("href"));
        });
		*/

        function displayContent(strContentId)
        {
          //Fade out old content and display loading wheel
          //$("#content_fullwidth").fadeOut(200);
          $("#content_clientswidth").fadeOut(200);
          $("#loading").addClass("loadanimation");
          $("#loading").fadeIn(1);
          $("#image").attr("src",  "/images/clients/wdot.gif" );
          //Do an AJAX post to get and display new content
          $.post("/ajax/client.php", {id: strContentId}, function(xml)
          {
            // document.title=$("title",xml).text();
            $("#theH1").html( "<h1>"+$("h1",xml).text()+"</h1>" );
            $("#test").html( $("content",xml).text() );

            $("#clients_images").html("");

           $(xml).find('image').each(function()
            {
              strImg=$(this).text();
              $("#clients_images").append("<a href='/images/clients/main/"+strImg+"' onclick='return(displayLink(this,  \""+strImg+"\"));'><img onmouseover='changeColor(this, 1, \""+strImg+"\");' onmouseout='changeColor(this, 0, \""+strImg+"\");' src='/images/clients/graythumb/"+strImg+"' /></a><br />");
            });
              strContent=document.getElementById("clients_images").innerHTML;
            //Fade new content in
            $("#loading").fadeOut(100);
            $("#loading").removeClass("loadanimation");
            //$("#content_fullwidth").fadeIn(200);
            $("#content_clientswidth").fadeIn(200);
          });
        }


      //If one of top images is hovered, do nice fade animation - also STOP the timer and restart on mouseOut
      $("#menu1 img").hover
      (
        function(){ if($(this).queue()==0) { $(this).fadeOut(200); $(this).fadeIn(300); $("#menu1").stopTime("controlled");} },
        function(){  $("#menu1").everyTime(10000, "controlled", function() {moveRight()} ); }
      );

      //Move the images right function
      function moveRight(e)
      {
        if($("#menu1").queue("fx")==0)
        {
          var pos = $("#menu1").position();
          if(pos.left<=(0-(intImageWidth+338-intCount)))
          { document.getElementById("menu1").style.left=0; }
          $("#menu1").animate({left: "-=338px"}, 1500 );
        }
      }

      //Move the images left function
      function moveLeft(e)
      {
        if($("#menu1").queue("fx")==0)
        {
          var pos = $("#menu1").position();
          if(pos.left>=0)
          {
            var num=0-intImageWidth-338
            document.getElementById("menu1").style.left=num+"px";
          }
          $("#menu1").animate({left: "+=338px"}, 1500 );
        }
      }

      //Click left
      $("#left").click(function(e){
        e.preventDefault();
        moveLeft(e);
      });

      //Click right
      $("#right").click(function(e){
        e.preventDefault();
        moveRight(e);
      });

      //Timer to auto scroll every 7 seconds
      $("#menu1").everyTime(10000, "controlled", function() {moveRight()} );

      //Kill auto scroll on "left" hover
      $("#left").hover(
        function() {
          $("#menu1").stopTime("controlled"); },
        function() {
          $("#menu1").everyTime(10000, "controlled", function() {moveRight()} ); }
        );

      //Kill auto scroll on "right" hover
      $("#right").hover(
        function() {
          $("#menu1").stopTime("controlled"); },
      function() {
        $("#menu1").everyTime(10000, "controlled", function() {moveRight()} );
      });
    });
  });



  function changeColor(theImage, intOn, strImage)
  {
    if(intOn==1)
    {
      var myDiv=document.getElementById("imageHolder");

      if(myDiv.style.display!="block")
      {
        theImage.src="/images/clients/colorthumb/"+strImage;
      }
    }
    else
    {
      var myDiv=document.getElementById("imageHolder");
      if(myDiv.style.display!="block")
      {
        theImage.src="/images/clients/graythumb/"+strImage;
      }
    }
  }

  function displayLink(theLink, strImage)
  {
    var myDiv=document.getElementById("imageHolder");
    if(myDiv.style.display!="block") {
      theLink.innerHTML="<img src='/images/clients/colorthumb/"+strImage+"' />";
      var myDiv=document.getElementById("imageHolder");
      var imageDiv=document.getElementById("imageHolderImage");
      imageDiv.innerHTML="<img src='/images/clients/main/"+strImage+"' />";
      myDiv.style.display="block";
      myDiv.style.width="635px";
      myDiv.style.height="500px";
      document.getElementById("test").style.display="none";
    }
    return false;
  }

  function closeLink()
  {
    document.getElementById("clients_images").innerHTML=strContent;
    var myDiv=document.getElementById("imageHolder");
    myDiv.style.display="none";
    myDiv.style.width="0px";
    myDiv.style.height="0px";
    document.getElementById("test").style.display="block";
    return false;
  }