{AJAXCONTENT}
<!-- CSS for Strips starts -->
<style type="text/css">
li:nth-child(even) {
 background-color:#FFF;
}
</style>
<!-- CSS for Strips Ends -->

<!-- Code within Head Tag -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(window).load(function(){
$("#loading").hide();
})
</script>
<!-- Code within Head Tag -->
<!-- Loading Div starts-->
<div align="center" id="loading">
Loading content, please wait..
<img src="{SKINS}images/loader.gif" alt="loading.." />
</div>
<!-- Loading Div ends -->
<link rel="stylesheet" href="dashboard/jquery.ui.all.css"> 
<script src="dashboard/jquery-1.4.2.js"></script> 
<script src="dashboard/jquery.ui.core.js"></script> 
<script src="dashboard/jquery.ui.widget.js"></script> 
<script src="dashboard/jquery.ui.accordion.js"></script> 
<link rel="stylesheet" href="dashboard/demos.css"> 

<!-- <h3 align="center"><font color="#81ACCD">  Business Intelligence Report</font></h3> -->
<div class="demo"> 
 	<div id="accordion">
	  <h3><a href="#">Total projects&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;{TOTALPROJECTS}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Business Intelligence Report</a></h3> 
			<div>
			 <canvas id="chart" width="500" height="400"></canvas>
			 <table id="chartData" cellpadding="5">
				<tr>
					<th width="25%" align="center"><b>Project Details</b></th>
					<th width="5%" align="center"><b>Count</b></th>
				</tr>
				<tr style="color:#008000">
					<td>Completed Projects </td>
					<td>{COMPLTETEDPROJECTS}</td>
				</tr>
				<tr  style="color:#FFA500">
					<td>Work in Progress Projects </td>
					<td>{WORKINPROGRESS}</td>
				</tr>
				<tr  style="color:#9933FF">
					<td>Yet to start Projects </td>
					<td>{YET2STARTPROJECTS}</td>
				</tr>
				<tr  style="color:#0000FF">
					<td>File in Process Projects </td>
					<td>{FILEINPROCESSPROJECTS}</td>
				</tr>
				<tr style="color:#FF0000">
					<td>Projects Without Workcode</td>
					<td>{WITHOUTWORKCODE}</td><br>
				</tr>
				<tr style="color:#FF8585">
					<td>POW 2009/10 Projects </td>
					<td>{POWWORKS}</td>
				</tr>
				<tr style="color:#914E1F">
					<td>POW 2008/09 Projects </td>
					<td>{PCODE}</td>
				</tr>
				<tr style="color:#800000">
					<td>Projects Without Zone</td>
					<td>{NOZONE}</td>
				</tr>
				<tr  style="color:#4B0082">
					<td>Cost Over Run Projects</td>
					<td>{COSTOVERRUNPROJECTS}</td>
				</tr>
				<tr  style="color:#EE82EE">
					<td>Cost Saving Projects</td>
					<td>{SAVINGPROJECTS}</td>
				</tr>
				<tr  style="color:#D100E8">
					<td>Time Overrun Projects</td>
					<td>{TIMEOVERRUNPROJECTS}</td>
				</tr>
			</table>
		</div>
		<h3><a href="#">Total Head Office Projects :&nbsp;{HEADOFFZCOUNT}</a></h3> 
		<div> 
			<!-- <table border="0" class="" align="center" cellpadding="2" cellspacing="1" width="100%" style="border-collapse:collapse;border:1px solid {TABLEBORDERCOLOR}">
		<tr>
			<td width="100%" colspan="2" class="heading" height="20" background="{SKINS}images/table_header.png" align="center">&nbsp;&nbsp;</td>
	    </tr>	
		<tr>
			<td valign="top">
				<table>
				<tr>
					<td>Head Office Name</td>
					<td>Total</td>
				</tr>
				<tr>
					<td background="{SKINS}images/table_header.png"><a href="javascript:loadTwo('?module=home&action=ceprojects1&nomenu=1')">
					<b>CE Projects-1:</a></td><td>{CEPROJECTS1}</td>
				</tr>
				<tr>
					<td background="{SKINS}images/table_header.png"><a href="javascript:loadTwo('?module=home&action=&nomenu=1')"><b>CE Projects-2:</a></td>
					<td>{}</td>
				</tr>
				<tr>
					<td background="{SKINS}images/table_header.png"><a href="javascript:loadTwo('?module=home&action=&nomenu=1')"><b>CE Projects-3:</a></td>
					<td>{}</td>
				</tr>
				<tr>
					<td background="{SKINS}images/table_header.png"><a href="javascript:loadTwo('?module=home&action=&nomenu=1')"><b>CE Major Roads:</a>
					</td><td>{}</td>
				</tr>
				<tr>
					<td background="{SKINS}images/table_header.png"><a href="javascript:loadTwo('?module=home&action=&nomenu=1')"><b>CE SWD-1:</a>
					</td><td>{}</td>
				</tr>
				<tr>
					<td background="{SKINS}images/table_header.png"><a href="javascript:loadTwo('?module=home&action=&nomenu=1')"><b>CE SWD-2:</a>
					</td><td>{}</td>
				</tr>
				<tr>
					<td background="{SKINS}images/table_header.png"><a href="javascript:loadTwo('?module=home&action=&nomenu=1')"><b>CE SWM:</a>
					</td><td>{}</td>
				</tr>
				<tr>
					<td background="{SKINS}images/table_header.png"><a href="javascript:loadTwo('?module=home&action=&nomenu=1')"><b>CE Infrastructure</a>
					</td><td>{}</td>
				</tr>
				<tr>
					<td background="{SKINS}images/table_header.png"><a href="javascript:loadTwo('?module=home&action=&nomenu=1')"><b>CE BSUP-2</a>
					</td><td>{}</td>
				</tr>
				</table>
			</td>
			<td width="80%">
			
			<iframe name="FRAME_LIST" frameborder="0" width="100%" height="400px" src="?module=home&action=east&nomenu=1" scrolling="no"></iframe> 
			</td>
		</tr>
		 
	</table> -->
		</div> 
		<h3><a href="#">Total Zone Projects &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;{ZONECOUNT}</a></h3> 
		<div> 
		<table border="0" class="" align="center" cellpadding="2" cellspacing="1" width="100%" style="border-collapse:collapse;border:1px solid {TABLEBORDERCOLOR}">
		<tr>
			<td width="100%" colspan="2" class="heading" height="20" background="{SKINS}images/table_header.png" align="center">&nbsp;&nbsp;</td>
	    </tr>	
		<tr>
			<td valign="top">
				<table>
				<tr>
					<td>Zone Name</td>
					<td>Total</td>
				</tr>
				<tr>
					<td background="{SKINS}images/table_header.png"><a href="javascript:loadTwo('?module=home&action=east&nomenu=1')"><b>East:</a></td>
					<td>{EAST}</td>
				</tr>
				<tr>
					<td background="{SKINS}images/table_header.png"><a href="javascript:loadTwo('?module=home&action=west&nomenu=1')"><b>West:</a></td>
					<td>{WEST}</td>
				</tr>
				<tr>
					<td background="{SKINS}images/table_header.png"><a href="javascript:loadTwo('?module=home&action=south&nomenu=1')"><b>South:</a></td>
					<td>{SOUTH}</td>
				</tr>
				<tr>
					<td background="{SKINS}images/table_header.png"><a href="javascript:loadTwo('?module=home&action=rajarajeshwarinagar&nomenu=1')"><b>Rajarajeshwarinagar:</a>
					</td><td>{RAJARAJESHWARINAGAR}</td>
				</tr>
				<tr>
					<td background="{SKINS}images/table_header.png"><a href="javascript:loadTwo('?module=home&action=bommanahalli&nomenu=1')"><b>Bommanahalli:</a>
					</td><td>{BOMMANAHALLI}</td>
				</tr>
				<tr>
					<td background="{SKINS}images/table_header.png"><a href="javascript:loadTwo('?module=home&action=yelahanka&nomenu=1')"><b>Yelahanka</a>
					</td><td>{YELAHANKA}</td>
				</tr>
				<tr>
					<td background="{SKINS}images/table_header.png"><a href="javascript:loadTwo('?module=home&action=dasarahalli&nomenu=1')"><b>Dasarahalli</a>
					</td><td>{DASARAHALLI}</td>
				</tr>
				<tr>
					<td background="{SKINS}images/table_header.png"><a href="javascript:loadTwo('?module=home&action=mahadevapura&nomenu=1')"><b>Mahadevapura</a>
					</td><td>{MAHADEVAPURA}</td>
				</tr>
				</table>
			</td>
			<td width="80%">
				<iframe name="FRAME_LIST" frameborder="0" width="100%" height="400px" src="?module=home&action=east&nomenu=1" style="overflow:hidden"></iframe> 
			</td>
		</tr>
	</table>
</div>
	  <h3><a href="#">Total Wards&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;{WARDCOUNT}</a></h3> 
			<div> 
				<a href="#" onClick="showSlidingDiv(); return false;">Click Here for Details : </a><br />
				<div id="slidingDiv">
					<table  border="1" width="100%">
						<tr>
							<td width="5%" align="center"><b>Ward No.</b></td>
							<td width="35%" align="center"><b>Ward Names</b></td>
							<td width="10%" align="center"><b>Total Projects</b></td>
							<td width="10%" align="center"><b>Complted Projects</b></td>
							<td width="10%" align="center"><b>Work in Progress Projects</b></td>
							<td width="10%" align="center"><b>Yet to Start Projects</b></td>
							<td width="10%" align="center"><b>File in Process Projects</b></td>
							<td width="10%" align="center"><b>Projects without Work Status</b></td>
						</tr>
						<tr align="left">
							<td>
								<!-- BEGIN dbvalues2 -->
								<li>{WARDNO}</li>
								<!-- END dbvalues2 -->
							</td>
							<td>
								<!-- BEGIN dbvalues2 -->
								<li>{WARDNAME}</li>
								<!-- END dbvalues2 -->
							</td>
							<td align="center">
								<!-- BEGIN dbvalues2 -->
								<li>{COUNT2}</li>
								<!-- END dbvalues2 -->
							</td>
							<td align="center">
								<!-- BEGIN dbvalues16 -->
								<li>{COUNT16}</li>
								<!-- END dbvalues16 -->
							</td>
							<td align="center">
								<!-- BEGIN dbvalues17 -->
								<li>{COUNT17}</li>
								<!-- END dbvalues17 -->
							</td>
							<td align="center">
								<!-- BEGIN dbvalues18 -->
								<li>{COUNT18}</li>
								<!-- END dbvalues18 -->
							</td>
							<td align="center">
								<!-- BEGIN dbvalues19 -->
								<li>{COUNT19}</li>
								<!-- END dbvalues19 -->
							</td>
							<td align="center">
								<!-- BEGIN dbvalues20 -->
								<li>{COUNT20}</li>
								<!-- END dbvalues20 -->
							</td>
						</tr>
					</table>  
				</div> 
			</div>
		</div><!-- End demo --> 
	
</div>
<script> 
	$(function() {
		$( "#accordion" ).accordion();
	});
</script>
	
<!-- Sliding Div for Ward starts -->
<style>
	body{
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;}

	#slidingDiv {
		display: none;
		height:2980px;
		width:750px;
		padding:2px;
	}
</style>
<script type="text/javascript">
	//<![CDATA[
	function showSlidingDiv(){
	$("#slidingDiv").animate({"height": "toggle"}, { duration: 1000 });
	}
//]]>
</script>
<!-- Sliding Div for Ward Ends -->

<!-- Sliding Div for total projects starts -->
<style>
	body{
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;}

	#slidingDiv1 {
		display: none;
		height:2980px;
		width:750px;
		padding:2px;
	}
</style>
<script type="text/javascript">
	//<![CDATA[
	function showSlidingDiv1(){
	$("#slidingDiv1").animate({"height": "toggle"}, { duration: 1000 });
	}
//]]>
</script>
<!-- Sliding Div for total projects Ends -->

<!-- Sliding Div for Complted projects starts -->
<style>
	body{
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;}

	#slidingDiv2 {
		display: none;
		height:2980px;
		width:750px;
		padding:2px;
	}
</style>

<script type="text/javascript">
	//<![CDATA[
	function showSlidingDiv2(){
	$("#slidingDiv2").animate({"height": "toggle"}, { duration: 1000 });
	}
//]]>
</script>
<!-- Sliding Div for Complted projects Ends -->

<!-- Sliding Div for Work in progress projects starts -->
<style>
	body{
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;}

	#slidingDiv3 {
		display: none;
		height:2980px;
		width:750px;
		padding:2px;
	}
</style>

<script type="text/javascript">
	//<![CDATA[
	function showSlidingDiv3(){
	$("#slidingDiv3").animate({"height": "toggle"}, { duration: 1000 });
	}
//]]>
</script>
<!-- Sliding Div for Work in progress projects Ends -->


<!-- Sliding Div for Yet to Start projects starts -->
<style>
	body{
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;}

	#slidingDiv4 {
		display: none;
		height:2980px;
		width:750px;
		padding:2px;
	}
</style>

<script type="text/javascript">
	//<![CDATA[
	function showSlidingDiv4(){
	$("#slidingDiv4").animate({"height": "toggle"}, { duration: 1000 });
	}
//]]>
</script>
<!-- Sliding Div for Yet to Start projects Ends -->

<!-- Sliding Div for File in Process projects starts -->
<style>
	body{
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;}

	#slidingDiv5 {
		display: none;
		height:2980px;
		width:750px;
		padding:2px;
	}
</style>
<script type="text/javascript">
	//<![CDATA[
	function showSlidingDiv5(){
	$("#slidingDiv5").animate({"height": "toggle"}, { duration: 1000 });
	}
//]]>
</script>
<!-- Sliding Div for File in Process projects Ends -->

<!-- Sliding Div for Projects Without Work Status starts -->
<style>
	body{
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;}

	#slidingDiv6 {
		display: none;
		height:2980px;
		width:750px;
		padding:2px;
	}
</style>

<script type="text/javascript">
	//<![CDATA[
	function showSlidingDiv6(){
	$("#slidingDiv6").animate({"height": "toggle"}, { duration: 1000 });
	}
//]]>
</script>
<!-- Sliding Div for Projects Without Work Status Ends -->

<!-- Sliding Div for Projects Without Workcode starts -->
<style>
	body{
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;}

	#slidingDiv7 {
		display: none;
		height:2980px;
		width:750px;
		padding:2px;
	}
</style>

<script type="text/javascript">
	//<![CDATA[
	function showSlidingDiv7(){
	$("#slidingDiv7").animate({"height": "toggle"}, { duration: 1000 });
	}
//]]>
</script>
<!-- Sliding Div for Projects Without Workcode Ends -->


<style type="text/css">
/*body {
  background: #fff;
  color: #333;
  font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.9em;
  padding: 40px;
}
*/
.wideBox {
  clear: both;
  text-align: center;
  margin-bottom: 50px;
  padding: 10px;
  background: #ebedf2;
  border: 1px solid #433;
  line-height: 100%;
}

#chart, #chartData {
  border: 1px solid #233;
  background: #ebedf2 url("images/gradient.png") repeat-x 0 0;
}

#chart {
  display: block;
  margin: 0 0 30px 0;
  float: right;
  cursor: pointer;
}

#chartData {
  width: 300px;
  margin: 0 40px 0 0;
  float: left;
  border-collapse: collapse;
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 1em rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.5);
  background-position: 0 -100px;
}

#chartData th, #chartData td {
  padding: 0.5em;
  border: 1px dotted #666;
  text-align: left;
}

#chartData th {
  border-bottom: 2px solid #333;
  text-transform: uppercase;
}

#chartData td {
  cursor: pointer;
}

#chartData td.highlight {
  background: #e8e8e8;
}

#chartData tr:hover td {
  background: #f0f0f0;
}

</style>
<script src="dashboard/jquery.min.js"></script>

<script src="dashboard/excanvas.js"></script>

<script>

// Run the code when the DOM is ready
$( pieChart );

function pieChart() {

  // Config settings
  var chartSizePercent = 55;                        // The chart radius relative to the canvas width/height (in percent)
  var sliceBorderWidth = 1;                         // Width (in pixels) of the border around each slice
  var sliceBorderStyle = "#fff";                    // Colour of the border around each slice
  var sliceGradientColour = "#ddd";                 // Colour to use for one end of the chart gradient
  var maxPullOutDistance = 5;                      // How far, in pixels, to pull slices out when clicked
  var pullOutFrameStep = 4;                         // How many pixels to move a slice with each animation frame
  var pullOutFrameInterval = 35;                    // How long (in ms) between each animation frame
  var pullOutLabelPadding = 50;                     // Padding between pulled-out slice and its label  
  var pullOutLabelFont = " 16px 'Trebuchet MS', Verdana, sans-serif";  // Pull-out slice label font
  var pullOutValueFont = " 12px 'Trebuchet MS', Verdana, sans-serif";  // Pull-out slice value font
  var pullOutValuePrefix = "";                     // Pull-out slice value prefix
  var pullOutShadowColour = "rgba( 0, 0, 0, .5 )";  // Colour to use for the pull-out slice shadow
  var pullOutShadowOffsetX = 5;                     // X-offset (in pixels) of the pull-out slice shadow
  var pullOutShadowOffsetY = 5;                     // Y-offset (in pixels) of the pull-out slice shadow
  var pullOutShadowBlur = 5;                        // How much to blur the pull-out slice shadow
  var pullOutBorderWidth = 2;                       // Width (in pixels) of the pull-out slice border
  var pullOutBorderStyle = "#333";                  // Colour of the pull-out slice border
  var chartStartAngle = -.5 * Math.PI;              // Start the chart at 12 o'clock instead of 3 o'clock

  // Declare some variables for the chart
  var canvas;                       // The canvas element in the page
  var currentPullOutSlice = -1;     // The slice currently pulled out (-1 = no slice)
  var currentPullOutDistance = 0;   // How many pixels the pulled-out slice is currently pulled out in the animation
  var animationId = 0;              // Tracks the interval ID for the animation created by setInterval()
  var chartData = [];               // Chart data (labels, values, and angles)
  var chartColours = [];            // Chart colours (pulled from the HTML table)
  var totalValue = 0;               // Total of all the values in the chart
  var canvasWidth;                  // Width of the canvas, in pixels
  var canvasHeight;                 // Height of the canvas, in pixels
  var centreX;                      // X-coordinate of centre of the canvas/chart
  var centreY;                      // Y-coordinate of centre of the canvas/chart
  var chartRadius;                  // Radius of the pie chart, in pixels

  // Set things up and draw the chart
  init();


  /**
   * Set up the chart data and colours, as well as the chart and table click handlers,
   * and draw the initial pie chart
   */

  function init() {

    // Get the canvas element in the page
    canvas = document.getElementById('chart');

    // Exit if the browser isn't canvas-capable
    if ( typeof canvas.getContext === 'undefined' ) return;

    // Initialise some properties of the canvas and chart
    canvasWidth = canvas.width;
    canvasHeight = canvas.height;
    centreX = canvasWidth / 2;
    centreY = canvasHeight / 2;
    chartRadius = Math.min( canvasWidth, canvasHeight ) / 2 * ( chartSizePercent / 100 );

    // Grab the data from the table,
    // and assign click handlers to the table data cells
    
    var currentRow = -1;
    var currentCell = 0;

    $('#chartData td').each( function() {
      currentCell++;
      if ( currentCell % 2 != 0 ) {
        currentRow++;
        chartData[currentRow] = [];
        chartData[currentRow]['label'] = $(this).text();
      } else {
       var value = parseFloat($(this).text());
       totalValue += value;
       value = value.toFixed(2);
       chartData[currentRow]['value'] = value;
      }

      // Store the slice index in this cell, and attach a click handler to it
      $(this).data( 'slice', currentRow );
      $(this).click( handleTableClick );

      // Extract and store the cell colour
      if ( rgb = $(this).css('color').match( /rgb\((\d+), (\d+), (\d+)/) ) {
        chartColours[currentRow] = [ rgb[1], rgb[2], rgb[3] ];
      } else if ( hex = $(this).css('color').match(/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/) ) {
        chartColours[currentRow] = [ parseInt(hex[1],16) ,parseInt(hex[2],16), parseInt(hex[3], 16) ];
      } else {
        alert( "Error: Colour could not be determined! Please specify table colours using the format '#xxxxxx'" );
        return;
      }

    } );

    // Now compute and store the start and end angles of each slice in the chart data

    var currentPos = 0; // The current position of the slice in the pie (from 0 to 1)

    for ( var slice in chartData ) {
      chartData[slice]['startAngle'] = 2 * Math.PI * currentPos;
      chartData[slice]['endAngle'] = 2 * Math.PI * ( currentPos + ( chartData[slice]['value'] / totalValue ) );
      currentPos += chartData[slice]['value'] / totalValue;
    }

    // All ready! Now draw the pie chart, and add the click handler to it
    drawChart();
    $('#chart').click ( handleChartClick );
  }


  /**
   * Process mouse clicks in the chart area.
   *
   * If a slice was clicked, toggle it in or out.
   * If the user clicked outside the pie, push any slices back in.
   *
   * @param Event The click event
   */

  function handleChartClick ( clickEvent ) {

    // Get the mouse cursor position at the time of the click, relative to the canvas
    var mouseX = clickEvent.pageX - this.offsetLeft;
    var mouseY = clickEvent.pageY - this.offsetTop;

    // Was the click inside the pie chart?
    var xFromCentre = mouseX - centreX;
    var yFromCentre = mouseY - centreY;
    var distanceFromCentre = Math.sqrt( Math.pow( Math.abs( xFromCentre ), 2 ) + Math.pow( Math.abs( yFromCentre ), 2 ) );

    if ( distanceFromCentre <= chartRadius ) {

      // Yes, the click was inside the chart.
      // Find the slice that was clicked by comparing angles relative to the chart centre.

      var clickAngle = Math.atan2( yFromCentre, xFromCentre ) - chartStartAngle;
      if ( clickAngle < 0 ) clickAngle = 2 * Math.PI + clickAngle;
                  
      for ( var slice in chartData ) {
        if ( clickAngle >= chartData[slice]['startAngle'] && clickAngle <= chartData[slice]['endAngle'] ) {

          // Slice found. Pull it out or push it in, as required.
          toggleSlice ( slice );
          return;
        }
      }
    }

    // User must have clicked outside the pie. Push any pulled-out slice back in.
    pushIn();
  }


  /**
   * Process mouse clicks in the table area.
   *
   * Retrieve the slice number from the jQuery data stored in the
   * clicked table cell, then toggle the slice
   *
   * @param Event The click event
   */

  function handleTableClick ( clickEvent ) {
    var slice = $(this).data('slice');
    toggleSlice ( slice );
  }


  /**
   * Push a slice in or out.
   *
   * If it's already pulled out, push it in. Otherwise, pull it out.
   *
   * @param Number The slice index (between 0 and the number of slices - 1)
   */

  function toggleSlice ( slice ) {
    if ( slice == currentPullOutSlice ) {
      pushIn();
    } else {
      startPullOut ( slice );
    }
  }

 
  /**
   * Start pulling a slice out from the pie.
   *
   * @param Number The slice index (between 0 and the number of slices - 1)
   */

  function startPullOut ( slice ) {

    // Exit if we're already pulling out this slice
    if ( currentPullOutSlice == slice ) return;

    // Record the slice that we're pulling out, clear any previous animation, then start the animation
    currentPullOutSlice = slice;
    currentPullOutDistance = 0;
    clearInterval( animationId );
    animationId = setInterval( function() { animatePullOut( slice ); }, pullOutFrameInterval );

    // Highlight the corresponding row in the key table
    $('#chartData td').removeClass('highlight');
    var labelCell = $('#chartData td:eq(' + (slice*2) + ')');
    var valueCell = $('#chartData td:eq(' + (slice*2+1) + ')');
    labelCell.addClass('highlight');
    valueCell.addClass('highlight');
  }

 
  /**
   * Draw a frame of the pull-out animation.
   *
   * @param Number The index of the slice being pulled out
   */

  function animatePullOut ( slice ) {

    // Pull the slice out some more
    currentPullOutDistance += pullOutFrameStep;

    // If we've pulled it right out, stop animating
    if ( currentPullOutDistance >= maxPullOutDistance ) {
      clearInterval( animationId );
      return;
    }

    // Draw the frame
    drawChart();
  }

 
  /**
   * Push any pulled-out slice back in.
   *
   * Resets the animation variables and redraws the chart.
   * Also un-highlights all rows in the table.
   */

  function pushIn() {
    currentPullOutSlice = -1;
    currentPullOutDistance = 0;
    clearInterval( animationId );
    drawChart();
    $('#chartData td').removeClass('highlight');
  }
 
 
  /**
   * Draw the chart.
   *
   * Loop through each slice of the pie, and draw it.
   */

  function drawChart() {

    // Get a drawing context
    var context = canvas.getContext('2d');
        
    // Clear the canvas, ready for the new frame
    context.clearRect ( 0, 0, canvasWidth, canvasHeight );

    // Draw each slice of the chart, skipping the pull-out slice (if any)
    for ( var slice in chartData ) {
      if ( slice != currentPullOutSlice ) drawSlice( context, slice );
    }

    // If there's a pull-out slice in effect, draw it.
    // (We draw the pull-out slice last so its drop shadow doesn't get painted over.)
    if ( currentPullOutSlice != -1 ) drawSlice( context, currentPullOutSlice );
  }


  /**
   * Draw an individual slice in the chart.
   *
   * @param Context A canvas context to draw on  
   * @param Number The index of the slice to draw
   */

  function drawSlice ( context, slice ) {

    // Compute the adjusted start and end angles for the slice
    var startAngle = chartData[slice]['startAngle']  + chartStartAngle;
    var endAngle = chartData[slice]['endAngle']  + chartStartAngle;
      
    if ( slice == currentPullOutSlice ) {

      // We're pulling (or have pulled) this slice out.
      // Offset it from the pie centre, draw the text label,
      // and add a drop shadow.

      var midAngle = (startAngle + endAngle) / 2;
      var actualPullOutDistance = currentPullOutDistance * easeOut( currentPullOutDistance/maxPullOutDistance, .8 );
      startX = centreX + Math.cos(midAngle) * actualPullOutDistance;
      startY = centreY + Math.sin(midAngle) * actualPullOutDistance;
      context.fillStyle = 'rgb(' + chartColours[slice].join(',') + ')';
      context.textAlign = "center";
      context.font = pullOutLabelFont;
      context.fillText( chartData[slice]['label'], centreX + Math.cos(midAngle) * ( chartRadius + maxPullOutDistance + pullOutLabelPadding ), centreY + Math.sin(midAngle) * ( chartRadius + maxPullOutDistance + pullOutLabelPadding ) );
      context.font = pullOutValueFont;
      context.fillText( pullOutValuePrefix + chartData[slice]['value'] + " (" + ( parseInt( chartData[slice]['value'] / totalValue * 100 + .5 ) ) +  "%)", centreX + Math.cos(midAngle) * ( chartRadius + maxPullOutDistance + pullOutLabelPadding ), centreY + Math.sin(midAngle) * ( chartRadius + maxPullOutDistance + pullOutLabelPadding ) + 20 );
      context.shadowOffsetX = pullOutShadowOffsetX;
      context.shadowOffsetY = pullOutShadowOffsetY;
      context.shadowBlur = pullOutShadowBlur;

    } else {

      // This slice isn't pulled out, so draw it from the pie centre
      startX = centreX;
      startY = centreY;
    }

    // Set up the gradient fill for the slice
    var sliceGradient = context.createLinearGradient( 0, 0, canvasWidth*.75, canvasHeight*.75 );
    sliceGradient.addColorStop( 0, sliceGradientColour );
    sliceGradient.addColorStop( 1, 'rgb(' + chartColours[slice].join(',') + ')' );

    // Draw the slice
    context.beginPath();
    context.moveTo( startX, startY );
    context.arc( startX, startY, chartRadius, startAngle, endAngle, false );
    context.lineTo( startX, startY );
    context.closePath();
    context.fillStyle = sliceGradient;
    context.shadowColor = ( slice == currentPullOutSlice ) ? pullOutShadowColour : "rgba( 0, 0, 0, 0 )";
    context.fill();
    context.shadowColor = "rgba( 0, 0, 0, 0 )";

    // Style the slice border appropriately
    if ( slice == currentPullOutSlice ) {
      context.lineWidth = pullOutBorderWidth;
      context.strokeStyle = pullOutBorderStyle;
    } else {
      context.lineWidth = sliceBorderWidth;
      context.strokeStyle = sliceBorderStyle;
    }

    // Draw the slice border
    context.stroke();
  }


  /**
   * Easing function.
   *
   * A bit hacky but it seems to work! (Note to self: Re-read my school maths books sometime)
   *
   * @param Number The ratio of the current distance travelled to the maximum distance
   * @param Number The power (higher numbers = more gradual easing)
   * @return Number The new ratio
   */

  function easeOut( ratio, power ) {
    return ( Math.pow ( 1 - ratio, power ) + 1 );
  }

};

</script>

<!-- ////////////////////////////////////////////////////////////////////////////////////////// -->


<style type="text/css">
/*body {
background: #fff;
color: #333;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size: 0.9em;
padding: 40px;
}
*/
.wideBox {
clear: both;
text-align: center;
margin-bottom: 50px;
padding: 10px;
background: #ebedf2;
border: 1px solid #433;
line-height: 100%;
}

#chart1, #chartData1 {
border: 1px solid #233;
background: #ebedf2 url("images/gradient.png") repeat-x 0 0;
}

#chart1 {
display: block;
margin: 0 0 30px 0;
float: right;
cursor: pointer;
}

#chartData1 {
width: 300px;
margin: 0 40px 0 0;
float: left;
border-collapse: collapse;
box-shadow: 0 0 1em rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 1em rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.5);
background-position: 0 -100px;
}

#chartData1 th, #chartData1 td {
padding: 0.5em;
border: 1px dotted #666;
text-align: left;
}

#chartData1 th {
border-bottom: 2px solid #333;
text-transform: uppercase;
}

#chartData1 td {
cursor: pointer;
}

#chartData1 td.highlight {
background: #e8e8e8;
}

#chartData1 tr:hover td {
background: #f0f0f0;
}

</style>
<script src="dashboard/jquery.min.js"></script>

<script src="dashboard/excanvas.js"></script>

<script>

// Run the code when the DOM is ready
$( pieChart );

function pieChart() {

// Config settings
var chartSizePercent = 55; // The chart radius relative to the canvas width/height (in percent)
var sliceBorderWidth = 1; // Width (in pixels) of the border around each slice
var sliceBorderStyle = "#fff"; // Colour of the border around each slice
var sliceGradientColour = "#ddd"; // Colour to use for one end of the chart gradient
var maxPullOutDistance = 5; // How far, in pixels, to pull slices out when clicked
var pullOutFrameStep = 4; // How many pixels to move a slice with each animation frame
var pullOutFrameInterval = 35; // How long (in ms) between each animation frame
var pullOutLabelPadding = 50; // Padding between pulled-out slice and its label
var pullOutLabelFont = " 16px 'Trebuchet MS', Verdana, sans-serif"; // Pull-out slice label font
var pullOutValueFont = " 12px 'Trebuchet MS', Verdana, sans-serif"; // Pull-out slice value font
var pullOutValuePrefix = ""; // Pull-out slice value prefix
var pullOutShadowColour = "rgba( 0, 0, 0, .5 )"; // Colour to use for the pull-out slice shadow
var pullOutShadowOffsetX = 5; // X-offset (in pixels) of the pull-out slice shadow
var pullOutShadowOffsetY = 5; // Y-offset (in pixels) of the pull-out slice shadow
var pullOutShadowBlur = 5; // How much to blur the pull-out slice shadow
var pullOutBorderWidth = 2; // Width (in pixels) of the pull-out slice border
var pullOutBorderStyle = "#333"; // Colour of the pull-out slice border
var chartStartAngle = -.5 * Math.PI; // Start the chart at 12 o'clock instead of 3 o'clock

// Declare some variables for the chart
var canvas; // The canvas element in the page
var currentPullOutSlice = -1; // The slice currently pulled out (-1 = no slice)
var currentPullOutDistance = 0; // How many pixels the pulled-out slice is currently pulled out in the animation
var animationId = 0; // Tracks the interval ID for the animation created by setInterval()
var chartData1 = []; // Chart data (labels, values, and angles)
var chartColours = []; // Chart colours (pulled from the HTML table)
var totalValue = 0; // Total of all the values in the chart
var canvasWidth; // Width of the canvas, in pixels
var canvasHeight; // Height of the canvas, in pixels
var centreX; // X-coordinate of centre of the canvas/chart
var centreY; // Y-coordinate of centre of the canvas/chart
var chartRadius; // Radius of the pie chart, in pixels

// Set things up and draw the chart
init();


/**
* Set up the chart data and colours, as well as the chart and table click handlers,
* and draw the initial pie chart
*/

function init() {

// Get the canvas element in the page
canvas = document.getElementById('chart1');

// Exit if the browser isn't canvas-capable
if ( typeof canvas.getContext === 'undefined' ) return;

// Initialise some properties of the canvas and chart
canvasWidth = canvas.width;
canvasHeight = canvas.height;
centreX = canvasWidth / 2;
centreY = canvasHeight / 2;
chartRadius = Math.min( canvasWidth, canvasHeight ) / 2 * ( chartSizePercent / 100 );

// Grab the data from the table,
// and assign click handlers to the table data cells

var currentRow = -1;
var currentCell = 0;

$('#chartData1 td').each( function() {
currentCell++;
if ( currentCell % 2 != 0 ) {
currentRow++;
chartData1[currentRow] = [];
chartData1[currentRow]['label'] = $(this).text();
} else {
var value = parseFloat($(this).text());
totalValue += value;
value = value.toFixed(2);
chartData1[currentRow]['value'] = value;
}

// Store the slice index in this cell, and attach a click handler to it
$(this).data( 'slice', currentRow );
$(this).click( handleTableClick );

// Extract and store the cell colour
if ( rgb = $(this).css('color').match( /rgb\((\d+), (\d+), (\d+)/) ) {
chartColours[currentRow] = [ rgb[1], rgb[2], rgb[3] ];
} else if ( hex = $(this).css('color').match(/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/) ) {
chartColours[currentRow] = [ parseInt(hex[1],16) ,parseInt(hex[2],16), parseInt(hex[3], 16) ];
} else {
alert( "Error: Colour could not be determined! Please specify table colours using the format '#xxxxxx'" );
return;
}

} );

// Now compute and store the start and end angles of each slice in the chart data

var currentPos = 0; // The current position of the slice in the pie (from 0 to 1)

for ( var slice in chartData1 ) {
chartData1[slice]['startAngle'] = 2 * Math.PI * currentPos;
chartData1[slice]['endAngle'] = 2 * Math.PI * ( currentPos + ( chartData[slice]['value'] / totalValue ) );
currentPos += chartData1[slice]['value'] / totalValue;
}

// All ready! Now draw the pie chart, and add the click handler to it
drawChart();
$('#chart').click ( handleChartClick );
}


/**
* Process mouse clicks in the chart area.
*
* If a slice was clicked, toggle it in or out.
* If the user clicked outside the pie, push any slices back in.
*
* @param Event The click event
*/

function handleChartClick ( clickEvent ) {

// Get the mouse cursor position at the time of the click, relative to the canvas
var mouseX = clickEvent.pageX - this.offsetLeft;
var mouseY = clickEvent.pageY - this.offsetTop;

// Was the click inside the pie chart?
var xFromCentre = mouseX - centreX;
var yFromCentre = mouseY - centreY;
var distanceFromCentre = Math.sqrt( Math.pow( Math.abs( xFromCentre ), 2 ) + Math.pow( Math.abs( yFromCentre ), 2 ) );

if ( distanceFromCentre <= chartRadius ) {

// Yes, the click was inside the chart.
// Find the slice that was clicked by comparing angles relative to the chart centre.

var clickAngle = Math.atan2( yFromCentre, xFromCentre ) - chartStartAngle;
if ( clickAngle < 0 ) clickAngle = 2 * Math.PI + clickAngle;

for ( var slice in chartData1 ) {
if ( clickAngle >= chartData1[slice]['startAngle'] && clickAngle <= chartData[slice]['endAngle'] ) {

// Slice found. Pull it out or push it in, as required.
toggleSlice ( slice );
return;
}
}
}

// User must have clicked outside the pie. Push any pulled-out slice back in.
pushIn();
}


/**
* Process mouse clicks in the table area.
*
* Retrieve the slice number from the jQuery data stored in the
* clicked table cell, then toggle the slice
*
* @param Event The click event
*/

function handleTableClick ( clickEvent ) {
var slice = $(this).data('slice');
toggleSlice ( slice );
}


/**
* Push a slice in or out.
*
* If it's already pulled out, push it in. Otherwise, pull it out.
*
* @param Number The slice index (between 0 and the number of slices - 1)
*/

function toggleSlice ( slice ) {
if ( slice == currentPullOutSlice ) {
pushIn();
} else {
startPullOut ( slice );
}
}


/**
* Start pulling a slice out from the pie.
*
* @param Number The slice index (between 0 and the number of slices - 1)
*/

function startPullOut ( slice ) {

// Exit if we're already pulling out this slice
if ( currentPullOutSlice == slice ) return;

// Record the slice that we're pulling out, clear any previous animation, then start the animation
currentPullOutSlice = slice;
currentPullOutDistance = 0;
clearInterval( animationId );
animationId = setInterval( function() { animatePullOut( slice ); }, pullOutFrameInterval );

// Highlight the corresponding row in the key table
$('#chartData1 td').removeClass('highlight');
var labelCell = $('#chartData1 td:eq(' + (slice*2) + ')');
var valueCell = $('#chartData1 td:eq(' + (slice*2+1) + ')');
labelCell.addClass('highlight');
valueCell.addClass('highlight');
}


/**
* Draw a frame of the pull-out animation.
*
* @param Number The index of the slice being pulled out
*/

function animatePullOut ( slice ) {

// Pull the slice out some more
currentPullOutDistance += pullOutFrameStep;

// If we've pulled it right out, stop animating
if ( currentPullOutDistance >= maxPullOutDistance ) {
clearInterval( animationId );
return;
}

// Draw the frame
drawChart();
}


/**
* Push any pulled-out slice back in.
*
* Resets the animation variables and redraws the chart.
* Also un-highlights all rows in the table.
*/

function pushIn() {
currentPullOutSlice = -1;
currentPullOutDistance = 0;
clearInterval( animationId );
drawChart();
$('#chartData1 td').removeClass('highlight');
}


/**
* Draw the chart.
*
* Loop through each slice of the pie, and draw it.
*/

function drawChart() {

// Get a drawing context
var context = canvas.getContext('2d');

// Clear the canvas, ready for the new frame
context.clearRect ( 0, 0, canvasWidth, canvasHeight );

// Draw each slice of the chart, skipping the pull-out slice (if any)
for ( var slice in chartData1 ) {
if ( slice != currentPullOutSlice ) drawSlice( context, slice );
}

// If there's a pull-out slice in effect, draw it.
// (We draw the pull-out slice last so its drop shadow doesn't get painted over.)
if ( currentPullOutSlice != -1 ) drawSlice( context, currentPullOutSlice );
}


/**
* Draw an individual slice in the chart.
*
* @param Context A canvas context to draw on
* @param Number The index of the slice to draw
*/

function drawSlice ( context, slice ) {

// Compute the adjusted start and end angles for the slice
var startAngle = chartData1[slice]['startAngle'] + chartStartAngle;
var endAngle = chartData1[slice]['endAngle'] + chartStartAngle;

if ( slice == currentPullOutSlice ) {

// We're pulling (or have pulled) this slice out.
// Offset it from the pie centre, draw the text label,
// and add a drop shadow.

var midAngle = (startAngle + endAngle) / 2;
var actualPullOutDistance = currentPullOutDistance * easeOut( currentPullOutDistance/maxPullOutDistance, .8 );
startX = centreX + Math.cos(midAngle) * actualPullOutDistance;
startY = centreY + Math.sin(midAngle) * actualPullOutDistance;
context.fillStyle = 'rgb(' + chartColours[slice].join(',') + ')';
context.textAlign = "center";
context.font = pullOutLabelFont;
context.fillText( chartData1[slice]['label'], centreX + Math.cos(midAngle) * ( chartRadius + maxPullOutDistance + pullOutLabelPadding ), centreY + Math.sin(midAngle) * ( chartRadius + maxPullOutDistance + pullOutLabelPadding ) );
context.font = pullOutValueFont;
context.fillText( pullOutValuePrefix + chartData1[slice]['value'] + " (" + ( parseInt( chartData1[slice]['value'] / totalValue * 100 + .5 ) ) + "%)", centreX + Math.cos(midAngle) * ( chartRadius + maxPullOutDistance + pullOutLabelPadding ), centreY + Math.sin(midAngle) * ( chartRadius + maxPullOutDistance + pullOutLabelPadding ) + 20 );
context.shadowOffsetX = pullOutShadowOffsetX;
context.shadowOffsetY = pullOutShadowOffsetY;
context.shadowBlur = pullOutShadowBlur;

} else {

// This slice isn't pulled out, so draw it from the pie centre
startX = centreX;
startY = centreY;
}

// Set up the gradient fill for the slice
var sliceGradient = context.createLinearGradient( 0, 0, canvasWidth*.75, canvasHeight*.75 );
sliceGradient.addColorStop( 0, sliceGradientColour );
sliceGradient.addColorStop( 1, 'rgb(' + chartColours[slice].join(',') + ')' );

// Draw the slice
context.beginPath();
context.moveTo( startX, startY );
context.arc( startX, startY, chartRadius, startAngle, endAngle, false );
context.lineTo( startX, startY );
context.closePath();
context.fillStyle = sliceGradient;
context.shadowColor = ( slice == currentPullOutSlice ) ? pullOutShadowColour : "rgba( 0, 0, 0, 0 )";
context.fill();
context.shadowColor = "rgba( 0, 0, 0, 0 )";

// Style the slice border appropriately
if ( slice == currentPullOutSlice ) {
context.lineWidth = pullOutBorderWidth;
context.strokeStyle = pullOutBorderStyle;
} else {
context.lineWidth = sliceBorderWidth;
context.strokeStyle = sliceBorderStyle;
}

// Draw the slice border
context.stroke();
}


/**
* Easing function.
*
* A bit hacky but it seems to work! (Note to self: Re-read my school maths books sometime)
*
* @param Number The ratio of the current distance travelled to the maximum distance
* @param Number The power (higher numbers = more gradual easing)
* @return Number The new ratio
*/

function easeOut( ratio, power ) {
return ( Math.pow ( 1 - ratio, power ) + 1 );
}

};
</script>
<script>
	function loadTwo(iframe1URL)
	{ 
		parent.FRAME_LIST.location.href=iframe1URL
	} 
</script>


<!-- Code to block Source code by right click view souce code starts here -->

<script language=JavaScript>
<!--

//Disable right mouse click Script
//By Maximus (maximusatnsimail.com) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com

var message="Function Disabled!";

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

// -->
</script>

<!-- Code to block Source code by right click view souce code ends here -->