/**
 * @author Mark.Kennard
 *
 * @description: Simple show hide panel control js calls jquery and apply behaviour to a DIV with the ID "accordion"
 * the "accordion" div must contain at least one div set constructed as follows..
 * 
 			<div>
				<div class="title">Experience</div>
				<div class="panel">
					<!-- toggle panel Stuff -->
						Toggling panel content goes here....
					<!-- end toggle panel Stuff -->
				</div>
 * 
 * 
 * 
 */

$(document).ready(function(){
	var toggleState = 0
	// add presentation class to enhance page with toggle all panels switching link
    $('#accordianSwitch').addClass('switchButton')
	// write text to it....
    $('#accordianSwitch').text('Toggle Panels')
    
	
	function toggleAll(){
		
		if(toggleState === 0){
				$('div.panel').show()
				toggleState = 1;
				$('div.title').addClass('selected')
				$('div.title').removeClass('title')
				 $('#accordianSwitch').text('Toggle Panels')
			}else{
				$('div.panel').hide()
				toggleState = 0;
				$('div.selected').addClass('title')
				$('div.title').removeClass('selected')
				 $('#accordianSwitch').text('Toggle Panels')
			}
		
			
			
		}
		
		
		
		
	
	$('#accordianSwitch').click(function(event){
		toggleAll()
	})
	
	// function to toggle the CSS class for the selected rows on click event...
    function toggleRow(el){
        var cssClassName = $(el).attr('class')
        if (cssClassName === 'title') {
            $(el).addClass('selected');
            $(el).removeClass('title');
        }
        else {
            $(el).addClass('title');
            $(el).removeClass('selected');
        }
    }
    // find and hide every sub panel....
    $('#accordion').find('div.panel').hide()
    
	// setup click eventhandler for every div with a class of 'title'
    $('div.title').click(function(event){
        $(this).next().slideToggle('fast')
        toggleRow($(this))
    })
});