/*-----------------------------------------------------------------------------------
Third tab  - panel toggling script
-----------------------------------------------------------------------------------*/
$(document).ready(function() {
    $('span[id^=cc]').click(function(event)
    {
        var $target = $(event.target);
        togglesidepanel($target.attr('id'));
    });
    });

function togglediv(divtotoggle)
{
    var togglediv = divtotoggle.toString().replace('cc_', '');
    togglediv = togglediv.replace('ImageDiv', 'ContentDiv');
    $('div[id$=' + togglediv + ']').slideToggle("slow");
}

function togglesidepanel(passedindiv)
{
    var divsplit = passedindiv.toString().split('_');
    var divID = divsplit[divsplit.length - 1].toString();
    
    //prep the ID for changing the class on the image div. Have we clicked on the header?
    if (divID == "HeaderDiv")
    {
	passedindiv = passedindiv.toString().replace('HeaderDiv', 'ImageDiv');
	togglesidepanelclass(passedindiv);
	togglediv(passedindiv);
    }
    else if (divID == "ImageDiv")
    {
	togglesidepanelclass(passedindiv);
	togglediv(passedindiv);
    }
}

function togglesidepanelclass(spanID)
{
    //To check whether the other panels are open, if so collapse it
    if(spanID == "cc_Dyn1_ImageDiv")
    {			
	toggleotherpanel(spanID,"cc_Dyn2_ImageDiv","cc_Dyn3_ImageDiv")
    }
    else if (spanID == "cc_Dyn2_ImageDiv")
    {
	toggleotherpanel(spanID,"cc_Dyn3_ImageDiv","cc_Dyn1_ImageDiv")
    }
    else
    {
	toggleotherpanel(spanID,"cc_Dyn2_ImageDiv","cc_Dyn1_ImageDiv")
    }
    
    var $HeaderDiv = spanID.toString().replace('ImageDiv', 'cc_container_header_div');
    if ($('span[id=' + spanID + ']').attr('class') == "cc_container_expand")
    {
	$('span[id=' + spanID + ']').removeClass('cc_container_expand');
	$('div[id=' + $HeaderDiv + ']').removeClass('cc_container_header_expand');
	$('span[id=' + spanID + ']').addClass('cc_container_collapse');
	$('div[id=' + $HeaderDiv + ']').addClass('cc_container_header_collapse');
    }
    else
    {
	$('div[id=' + $HeaderDiv + ']').removeClass('cc_container_header_collapse');
	$('span[id=' + spanID + ']').removeClass('cc_container_collapse');
	$('span[id=' + spanID + ']').addClass('cc_container_expand');
	$('div[id=' + $HeaderDiv + ']').addClass('cc_container_header_expand');
    }  
}

/*-----------------------------------------------------------------------------------
To close otehr panel when we try to open the other panel
-----------------------------------------------------------------------------------*/ 	
function toggleotherpanel(spanID,spanID2,spanID3)
{

    if($('span[id=' + spanID + ']').attr('class') == "cc_container_expand" )
    {
        var $HeaderDiv2 = spanID2.toString().replace('ImageDiv', 'cc_container_header_div');
	if ($('span[id=' + spanID2 + ']').attr('class') == "cc_container_collapse")
	{
	    $('div[id=' + $HeaderDiv2 + ']').removeClass('cc_container_header_collapse');
	    $('span[id=' + spanID2 + ']').removeClass('cc_container_collapse');
	    $('span[id=' + spanID2+ ']').addClass('cc_container_expand');
	    $('div[id=' + $HeaderDiv2 + ']').addClass('cc_container_header_expand');
	    togglediv(spanID2);
	}
	var $HeaderDiv3 = spanID3.toString().replace('ImageDiv', 'cc_container_header_div');
	if ($('span[id=' + spanID3 + ']').attr('class') == "cc_container_collapse")
	{
	    $('div[id=' + $HeaderDiv3 + ']').removeClass('cc_container_header_collapse');
	    $('span[id=' + spanID3 + ']').removeClass('cc_container_collapse');
	    $('span[id=' + spanID3+ ']').addClass('cc_container_expand');
	    $('div[id=' + $HeaderDiv3 + ']').addClass('cc_container_header_expand');
	    togglediv(spanID3);
	} 
    }
}