//Help notes:
//http://docs.jquery.com/Tutorials:Introducing_$(document).ready()
//http://api.jquery.com/child-selector/
//http://api.jquery.com/mouseover/
//There is also a jquery hover function that would probably do the trick
//See also specGuide_panels.js
//=================================================================================
$(document).ready(function() {

      //change the color of the text in the div when user mouses over    
      $("div.HeaderContent").mouseover(function () {
        $(this).css("color","red");
        $(this).css("text-decoration","underline");
      });

      $("div.HeaderContent").mouseout(function () {
        $(this).css("color","#354A07");
        $(this).css("text-decoration","none");
      });

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////                
      //now apply the collapse/expand effect of the div, as well as change the arrow:
//      $("DIV.ContainerPanel > DIV.collapsePanelHeader").toggle(

//        function() {
//                
//            $(this).next("div.Content").show("slow");
//            $(this).children("div.ArrowExpand").attr("class", "ArrowClose");
//               
//            },
//            
//            function() {                   

//                $(this).next("div.Content").hide("slow");
//                $(this).children("div.ArrowClose").attr("class", "ArrowExpand");
//                
//            });           
            
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////   
         
            //Task#306 link into specfic jQuery section for Green Section questions
            //Had to alter the way the divs were shown and hidden to accomodate above task, since the jQuery toggle() was getting broken.
            //Explicitly attached a click event to the specified element instead
            
            //now apply the collapse/expand effect of the div, as well as change the arrow:
            $("DIV.ContainerPanel > DIV.collapsePanelHeader").click(

            function() {
              
              //window.alert('event added-testing.');              
              
              //http://stackoverflow.com/questions/1085457/jquery-check-whether-an-element-is-hidden-from-the-user
              if($(this).next("div.Content").is(':hidden'))
              {
                //window.alert('content is hidden.  now showing.');
                $(this).next("div.Content").show("slow");
                $(this).children("div.ArrowExpand").attr("class", "ArrowClose");
              }
              else
              {
                //window.alert('content is shown.  now hiding.');
                $(this).next("div.Content").hide("slow");
                $(this).children("div.ArrowClose").attr("class", "ArrowExpand");
              
              }
               
            });   
        
});//close main function