$(function() {
    //set height function
    function setElemHeight(elem, h) {
        $(elem).height(h);
    }

    //Function to clear form details
    $.fn.clearForm = function() {
        return this.each(function() {
            var type = this.type, tag = this.tagName.toLowerCase();
            if (tag == 'form')
                return $(':input', this).clearForm();
            if (type == 'text' || type == 'password' || tag == 'textarea')
                this.value = '';
            else if (type == 'checkbox' || type == 'radio')
                this.checked = false;
            else if (tag == 'select')
                this.selectedIndex = -1;
        });
    };
    ////////////////////////////////////////////////  


    //////////////////////////////////////////////// 
    //show the map and transparency div
    $("#showMap").click(function() {

        //first set the initial opacity, and the height of the trans to match the page 'container'
        $("#trans").css({
            opacity: 0
        });
        setElemHeight("#trans", $(".contentMain").height());
        //setElemHeight("#trans", $("container").height()); 

        //Then animate to higher opacity
        $("#trans").animate({
            width: "956px",
            opacity: 0.7
        }, 250);
        $("#mapOverlay").css("visibility", "visible");

    });
    ////////////////////////////////////////////////  


    //////////////////////////////////////////////// 
    //show services info the map and transparency div
    $("#showServices").click(function() {

        //first set the initial opacity, and the height of the trans to match the page 'container'
        $("#trans").css({
            opacity: 0
        });
        setElemHeight("#trans", $(".contentMain").height());
        //setElemHeight("#trans", $("container").height()); 

        //Then animate to higher opacity
        $("#trans").animate({
            width: "956px",
            opacity: 0.7
        }, 250);
        $("#servicesOverlay").css("visibility", "visible");

    });

    //////////////////////////////////////////////// 
    //show FAQ on live remote assist page and transparency div
    $("#showFAQ").click(function() {

        //first set the initial opacity, and the height of the trans to match the page 'container'
        $("#trans").css({
            opacity: 0
        });
        setElemHeight("#trans", $(".contentMain").height());
        //setElemHeight("#trans", $("container").height()); 

        //Then animate to higher opacity
        $("#trans").animate({
            width: "956px",
            opacity: 0.7
        }, 250);
        $("#FAQOverlay").css("visibility", "visible");

    });

    //////////////////////////////////////////////// 
    //hide the map and transparency
    $("#closeMap").click(function() {
        $("#mapOverlay").css("visibility", "hidden");
        $("#trans").animate({ opacity: 'hide' }, "fast");
    });
    ////////////////////////////////////////////////  
    //////////////////////////////////////////////// 
    //hide the services overlay and transparency
    $("#closeServices").click(function() {
        $("#servicesOverlay").css("visibility", "hidden");
        $("#trans").animate({ opacity: 'hide' }, "fast");
    });
    ////////////////////////////////////////////////  
    //hide the services overlay and transparency
    $("#closeFAQ").click(function() {
        $("#FAQOverlay").css("visibility", "hidden");
        $("#trans").animate({ opacity: 'hide' }, "fast");
    });
    //////////////////////////////////////////////// 

    //News items hover effect

    $(".newsLink").hover(
      function() {
          $(this).css("background-image", "url(http://www.capitalsupport.com/images/bgNewsArrowOver.gif)");
          $(this).css("color", "#454648");
      },
      function() {
          $(this).css("background-image", "url(http://www.capitalsupport.com/images/bgNewsArrow.gif)");
          $(this).css("color", "#7f8183");
      }
    );
    ////////////////////////////////////////////////  
    //Print icon hover effect

    $("#printIcon").hover(
      function() {
          $(this).addClass("hover");
      },
      function() {
          $(this).removeClass("hover");
      }
    );
    ////////////////////////////////////////////////  
    //clear field with reset button
    $("#reset").click(function() {
        $('form').clearForm();
    });
    ////////////////////////////////////////////////  


    //button hover effects
    $(".btnASP").hover(
      function() {
          $(this).css("background-image", "url(../images/bgButtonOver.gif)");
      },
      function() {
          $(this).css("background-image", "url(../images/bgButton.gif)");
      }
    );
    $(".btnJS").hover(
      function() {
          $(this).css("background-image", "url(../images/bgButtonOver.gif)");
      },
      function() {
          $(this).css("background-image", "url(../images/bgButton.gif)");
      }
    );




});