<?

ini_set('session.gc_maxlifetime', 3600);
session_set_cookie_params(3600, '/');
session_start();

if(!isset($_SESSION['uname'])) {
	
	  if ($_POST['username'] == 'admin' &&  $_POST['password'] == 'whfy129') {
         $_SESSION['uname']= $_POST['username'] . time();
    } else if ($_POST['username'] == 'cpe' &&  $_POST['password'] == 'kakou123') {
    	  $_SESSION['uname']= $_POST['username'] . time();
	  } else {
	     // echo loginform("");
	     // exit;	  
	  }

} else {
    $uname = $_SESSION ['uname'];
}

if ( $_POST['cmd'] == 'logout') {
	 unset($_SESSION['uname']);
	 exit;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	
<html>
	<head>
	
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		
		<title>World Heart Federation - Annual Report - test page</title>
    <link type="text/css" href="css/custom-theme/jquery-ui-1.8.4.custom.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/jquery.cleditor.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="css/whf.css" media="screen">	

    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
		<script type="text/javascript" src="js/jquery.dump.js"></script>	
		
		<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>	
		<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>	
		<script type="text/javascript" src="js/jScrollPane.js"></script>	
		
		<script type="text/javascript" src="js/jquery.metadata.js"></script>	
		<script type="text/javascript" src="js/jquery.blockUI.js"></script>
    <script type='text/javascript' src='js/jquery.base64.js'></script>
    <script type='text/javascript' src='js/jquery.form.js'></script>
    <script type='text/javascript' src='js/jquery.jeditable.mini.js'></script>
    <script type="text/javascript" src="js/jquery.json-2.2.min.js"></script> 
    <script type="text/javascript" src="js/jquery.cleditor.min.js"></script> 
    <script type="text/javascript" src="js/jquery.media.js"></script> 
    <script type="text/javascript" src="js/jquery.cleditor.table.min.js"></script>

<!--    
    <script type="text/javascript" src="js/jquery-css-transform.js"></script>
    <script type="text/javascript" src="js/rotate3Di-0.9.js"></script>
    -->
    <script type="text/javascript" src="js/mediapanel.js"></script> 
    <script type="text/javascript" src="js/readerpanel.js"></script> 
    <script type="text/javascript" src="js/soundpanel.js"></script>
    <script type="text/javascript" src="js/textpanel.js"></script>
    <script type='text/javascript' src='js/whfar.js'></script>
    <!-- <link rel="stylesheet" type="text/css" href="css/inettuts.css" media="screen"> -->


<style>

body {
background:  url('images/fond.jpg') no-repeat fixed;
font-family:Arial; font-size:12px;
}
.ui-resizable-helper { border: 2px dotted #00F; }

a.media   { display: block; font-size:16px;text-align:center;}
div.media { font-size: small; margin: 5px; width: 90% !important }
div.media div, div.iframe_caption { font-style: italic; color: #888;background-color: #000;text-align:center;font-size:16px; }

/*
h2,h3 { color:#f00; }

div.red h2 { color:#fff; font-size:16px; }
div.red h3 { color:#fff; font-size:14px; }
div.white h2 { color:#f00; font-size:16px; }
div.white h3 { color:#f00; font-size:14px; }
*/
</style> 

<script type="text/javascript">
	
	$(document).ready(function() {

        $.fn.soundpanel = function(options)
         {
             return this.each(function()
             {
                 var element = $(this);                
                 // Return early if this element already has a plugin instance
                 prev_elem = element.data('cpepanel');
                 if (element.data('cpepanel')) { $(element).unbind('mouseenter').unbind('mouseleave'); delete prev_elem; } ;  
                 var myplugin = new CpeSoundPanel(this, options);     
                 myplugin.loadit();
                 myplugin.hoverit();
                 myplugin.showit();
                 myplugin.dresizable();                 
                  
                 if(window.console) console.log("create this "+$(this).attr('id') + "  " +$(this).css('left'));               
                 // Store plugin object in this element's data
                 element.data('cpepanel', myplugin);
             });
         };
         		
        $.fn.quotepanel = function(options)
         {
             return this.each(function()
             {
                 var element = $(this);                
                 // Return early if this element already has a plugin instance
                 prev_elem = element.data('cpepanel');
                 if (element.data('cpepanel')) { $(element).unbind('mouseenter').unbind('mouseleave'); delete prev_elem; } ;  
                     
                 var myplugin = new CpePanel(this, options);  
                 myplugin.hoverit(); 
                 
                 myplugin.showit(); 
                 myplugin.editable(); 
                 
<?  if(isset($_SESSION['uname'])) {  ?>	
   
<? } ?>                 
                  
                 if(window.console) console.log("create this "+$(this).attr('id') + "  " +$(this).css('left'));               
                 // Store plugin object in this element's data
                 element.data('cpepanel', myplugin);
             });
         };  
         $.fn.photopanel = function(options)
         {
             return this.each(function()
             {
                 var element = $(this);                
                 // Return early if this element already has a plugin instance
                 var prev_elem = element.data('cpepanel');
                 if (prev_elem) { 
                 	     $(element).unbind('mouseenter').unbind('mouseleave');
                 	     delete prev_elem; 
                 }      
                 // pass options to plugin constructor
                 var myplugin = new CpeMediaPanel(this, options);  
                 myplugin.loadit();
                 myplugin.hoverit(); 
                 myplugin.showit();
                 myplugin.editable();
<?  if(isset($_SESSION['uname'])) {  ?>	
    
<? } ?>
                 element.data('cpepanel', myplugin);
             });
         };
         
         $.fn.readerpanel = function(options)
         {
         	   var defaults = { width_: '600',height_: '500', zwidth_: '650',zheight_: '490',             
             top_: '160', left_: '276',   zIndex: 9, data : '' };
         	   var opts = $.extend( defaults,options  || {});
         	         	   
             return this.each(function()
             {         
                 if ($(this).data('cpepanel')) {$(this).unbind('mouseenter').unbind('mouseleave'); prev_elem = $(this).data('cpepanel'); delete prev_elem; } ;      

                 var myplugin = new CpeTextPanel(this, opts);  
                 myplugin.hoverit();  
                 myplugin.showit(); 
                 

                     myplugin.editable(); 
                 
<?  if(isset($_SESSION['uname'])) {  ?>	
  
<? } ?> 
                 $(this).data('cpepanel', myplugin);
                 $this = $(this);

                	
                 $(this).find('a.fontSizePlus').bind("click", function(event) {
                 	     myplugin.containercontent.children('p,h2,h3,h4,td,tr').each(function() {
                 	     	   size = parseInt($(this).css('font-size'));
                 	         $(this).css('font-size', (size + 1)+'px');
                 	     });
                 	     myplugin.containercontent.jScrollPane();
                 	     
                 });
                 
                 $(this).find('a.fontSizeMinus').bind("click", function(event) {
                 	    myplugin.containercontent.children('p,h2,h3,h4').each(function() {
                 	     	   size = parseInt($(this).css('font-size'));
                 	         $(this).css('font-size', (size - 1)+'px');
                 	     });
                 	     myplugin.containercontent.jScrollPane();                 	
                 });
                  
                 $(this).find('a.PrintPanel').bind("click", function(event) {
                 	  printSelection(myplugin.containercontent.html());
                 }); 
                                      
             });
         }; 
         
         
          $(document).keydown(function(e) {
          	
              if (e.which == 76) { // z key was pressed
                  if (e.altKey) { // alt/option key is down
                    		$("#loginForm").dialog({
                    			height: 200,
                    			width: 350,
                    			modal: true,
                          buttons: {
                          'OK': function() {
                          	  $("#someform").submit();
                          },
                          'Cancel': function() {
                              $(this).dialog('close');
                          } 
                      }
                  });
              }          	
          }
                    				          	
<?  if(isset($_SESSION['uname'])) {  ?>	 
	               
                   	
              if (e.which == 90) { // z key was pressed
                  if (e.altKey) { // alt/option key is down
                      // don't submit
                      var elem = getMaxZindex();
                      if ( elem ) {
                      	 var myplugin = $(elem).data('cpepanel');
                      	 if ( myplugin ) myplugin.editit(); 
                      	 // alert("make editable "+$(elem).attr('id')+"  z "+$(elem).css('z-index'));
                      }
                  }
              }

              if (e.which == 68) { // d key was pressed
                  if (e.altKey) { // alt/option key is down
                      // don't submit
                      var elem = getMaxZindex();
                      if ( elem ) {
                      	 // delete this element and hide it
                      	 var myplugin = $(elem).data('cpepanel');
                      	 $('#dialog-confirm-message').html(' this '+myplugin.settings.ctype+' will be permanently deleted. Are you sure?');
                         $("#dialog-confirm").dialog({
                         			resizable: false,
                         			height:200,
                         			modal: true,
                         			buttons: {
                         				'Delete' : function() {
                         					$(this).dialog('close');
                      	          $.post('save.php', {delpanel: myplugin.settings.pageid,section:myplugin.settings.sectionid} , function(jdata) {
                      	              var results = eval("("+jdata+")");
                      	              if ( results.status == 'success' ) {
                      	                 $(elem).hide();  // or reset if multuple elements, rerquest and rebuild object
                      	                 var sectionid = $('#treemenu').data("sectionid");
                      	                 displaySection(sectionid);
                      	              } else alert(results.status);
                      	          });                         					
                         				},
                         				Cancel: function() {
                         					$(this).dialog('close');
                         				}
                         			}
                         	});                      	                       	 
                      }
                  }
              }
                            
              if (e.which == 87 && e.altKey ) { // alt w key was pressed
              	  saveScreen();
              }
              
              if (e.which == 88 && e.altKey ) { // alt x key was pressed
                      $('.selectable').each(function(index) {
                          if ($(this).is(':visible')  ) {
                          	 var myplugin = $(this).data('cpepanel');
                          	 if ( myplugin ) {if ( myplugin.editmode == true )  myplugin.editmode = false; else myplugin.editmode = true;}
                          } 
                       });
              }              

              if (e.which == 77 && e.altKey ) { // alt m key was pressed

                      results = $('#treemenu').data("arsection");
                      var sectionid = $('#treemenu').data("sectionid");

                      if (  results.length > 0 ) {
                      	  var output = [];
                      	  output.push('<h3>Choose Contianer you ant to create :</h3>');
                      	  output.push('<form><fieldset>');
                      	  output.push('<label for="name">Text Panel</label><input type="radio" name="ctype" id="dialog-create-textpanel" value="textpanel" class="ui-widget-content ui-corner-all" /><br>');
                      	  output.push('<label for="name">Photo Panel</label><input type="radio" name="ctype" id="dialog-create-photopanel" value="photopanel" class="ui-widget-content ui-corner-all" /><br>');
                          found = false;
         	  	  	        for (var i = 0; i < results.length; i++) {      
         	  	  	         	  if ( results[i]['ctype'] == 'quote' ) found = true;
                          }
                          if (found == false ) 
                            output.push('<label for="name">Quote Panel</label><input type="radio" name="ctype" id="dialog-create-quotepanel" value="quotepanel" class="ui-widget-content ui-corner-all" /><br>');

                          found = false;
         	  	  	        for (var i = 0; i < results.length; i++) {      
         	  	  	         	  if ( results[i]['ctype'] == 'hilite' ) found = true;
                          }
                          if (found == false ) 
                            output.push('<label for="name">Hilites Panel</label><input type="radio" name="ctype" id="dialog-create-hilitepanel" value="hilitepanel" class="ui-widget-content ui-corner-all" /><br>');
   
                         output.push('</fieldset></form>');
                         $('#dialog-create').html(output.join(''));
                         
                    		$("#dialog-create").dialog({
                    			height: 300,
                    			width: 350,
                    			modal: true,
                    			buttons: {
                    				'Create': function() {
                                var ctype = $("#dialog-create input[@name='ctype']:checked").val();
                                switch ( ctype ) {
                                	  case 'textpanel':  var myplugin = $('#whfpaneltext').data('cpepanel'); 
                                	                     if ( myplugin == null) {
                                	                     	$('#whfpaneltext').readerpanel({pageid:'new',sectionid: sectionid, ctype: 'text'}); 
                                	                     	myplugin = $('#whfpaneltext').data('cpepanel');
                                	                     }
                                	                     myplugin.editit('add');  
                                	                     break;
                                	  case 'quotepanel':  $('#whfquotepanel').quotepanel({pageid:'new',sectionid: sectionid, ctype: 'quote'}); 
                                	                     var myplugin = $('#whfquotepanel').data('cpepanel'); 
                                	                     myplugin.editit('add');
                                	                    
                                	                     break;
                                	  case 'photopanel':  var myplugin = $('#whfphotopanel').data('cpepanel'); 
                                                    	  if ( myplugin == null) {
                                                    	  	  $('#whfphotopanel').photopanel({pageid:'new',sectionid: sectionid, ctype: 'image',width_:250, page: 'images/Cover.jpg',zfactor:0 });
                                                    	  	  myplugin = $('#whfphotopanel').data('cpepanel'); 
                                                    	  	  myplugin.editit('new'); 
                                                    	  } else {                               	  
                                	                     myplugin.editit('add');     
                                	                    }                             	  
                                	                     break;
                                	                     
                                	  case 'hilitepanel':  $('#whfhilitegrey').quotepanel({pageid:'new',sectionid: sectionid, ctype: 'hilite'});
                                                  	     var myplugin = $('#whfhilitegrey').data('cpepanel');
                                	                       myplugin.editit('add');                                  	  
                                	                       break;
                                	                        
                                	  case 'youtubepanel':  $('#whfyoutubepanel').quotepanel({pageid:'new',sectionid: sectionid, ctype: 'hilite'});
                                                  	     var myplugin = $('#whfyoutubepanel').data('cpepanel');
                                	                       myplugin.editit('add');                                  	  
                                	                       break; 
                                	  case 'soundpanel':  $('#whfsoundpanel').quotepanel({pageid:'new',sectionid: sectionid, ctype: 'hilite'});
                                                  	     var myplugin = $('#whfsoundpanel').data('cpepanel');
                                	                       myplugin.editit('add');                                  	  
                                	                       break;                                 	                                                       	                                                    	  
                                }
                    					  // alert($("#dialog-create input[@name='ctype']:checked").val());
                    					  $(this).dialog('close');
                    
                    				},
                    				Cancel: function() {
                    					$(this).dialog('close');
                    				}
                    			},
                    			close: function() {
                    			}
                    		});                           
                           
                        
                    }              	
              }                           
                                 					
		<? } ?> 
		  }); 
	});
	

</script>                  
	
</head>
	<body>		


<div id="treemenu" class="treemenu" style="position: absolute; top: 180px; left 50px;">
	
<h2 id="menulink"> Menu </h2>
<ul class="treemenu barrr" style="display: block;">
	
     <li class="directory collapsed directoryone"> <a href="#" rel="message">&nbsp;&nbsp;Message from the President</a></li>
     <li class="directory collapsed directoryone"> <a href="#" rel="activities">&nbsp;&nbsp;Activities</a>
     	       
     	       <ul style="display: none;" class="treemenu ">
     	            <li class="directory collapsed"><a rel="activities-sharing" href="#">Sharing science and building capacity</a>
     	                        <ul style="display: none;" class="treemenu ">
     	                        	  <li class="file"><a rel="sharing1" href="#">World Congress of Cardiology Scientific Sessions 2010</a>        </li>
     	                        	  <li class="file"><a rel="sharing2" href="#">Capacity building</a>        </li>
     	                        	  <li class="file"><a rel="sharing3" href="#">Twin centres programme</a>        </li>
     	                        	  <li class="file"><a rel="sharing4" href="#">World Heart Federation Journals</a>        </li>     	                        	  
     	                        </ul>
     	            </li>
     	            <li class="directory"><a rel="awareness" href="#">Awareness</a>        
     	                        <ul style="display: none;" class="treemenu ">
     	                        	  <li class="file"><a rel="awareness2" href="#">World Heart Day</a>        </li>
     	                        	  <li class="file"><a rel="awareness3" href="#">Go Red for Women</a>        </li>     	                        	
     	                        	  <li class="file"><a rel="awareness1" href="#">Children and Youth</a>        </li>

     	                        	  
     	                        </ul>     	            	
     	            </li>
     	            <li class="directory"><a rel="advocacy" href="#">Advocacy</a>        
     	                        <ul style="display: none;" class="treemenu ">
     	                        	  <li class="file"><a rel="advocacy1" href="#">CVD on the global health agenda</a>        </li>
     	                        	  <li class="file"><a rel="advocacy2" href="#">Tobacco</a>        </li>
     	                        </ul>      	            	
     	            </li>
     	            <li class="directory"><a rel="appliedresearch" href="#">Applied research</a>        
     	                        <ul style="display: none;" class="treemenu ">
     	                        	  <li class="file"><a rel="applied2" href="#">Rheumatic Heart Disease</a>  </li>     	                        	
     	                        	  <li class="file"><a rel="applied1" href="#">Grenada Heart Project</a>        </li>
     	                        	  <li class="file"><a rel="applied3" href="#">The polypill FOCUS project</a>       </li>
     	                        	  <li class="file"><a rel="applied4" href="#">China bridging the gap</a>       </li>

     	                        </ul>      	            	
     	            </li>
     	       </ul>     
     	</li>
     	
     <li class="directory collapsed directoryone"> <a href="#" rel="partnerships">&nbsp;&nbsp;Partnerships</a></li>
     <li class="directory collapsed directoryone"> <a href="#" rel="organisation1">&nbsp;&nbsp;Organization</a>
                              <ul style="display: none;" class="treemenu ">
                              	  <li class="file"><a rel="board" href="#">Board</a>  </li>
     	                        	  <li class="file"><a rel="staff" href="#">Staff</a> </li>
     	                        	  <li class="file"><a rel="members" href="#">Members</a>  </li>

     	                        </ul>      	            	     	
     	
     	</li>
     <li class="directory collapsed directoryone"> <a href="#" rel="financial">&nbsp;&nbsp;Financial</a>
     	</li>
</ul>
</div>

<br clear="all" />


<style>


.rounded-corners {
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
  
    /* behavior: url(css/border-radius.htc); */

}

.shadoww {
box-shadow: 3px 3px 4px #818181;
-webkit-box-shadow: 3px 3px 4px #818181;
-moz-box-shadow: 3px 3px 4px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=4, offY=4, positive=true);
}

#whfhilitesX {
	
background-color: #D2D2D2; 
padding: 10px;
color: #000;
font-family: arial;
font-size: 12px;
}
#whfhilitesX h2{
	color:#f00;
}
#whfhilitesX h3{
	color:#f00;
}
#whfhilitesX ul {
	margin-right:10px;color:#fff;
}
#whfhilitesX li{
	color:#000;
	list-style-image: url(images/red_arrow.gif);
}

.rel {
	margin: 50px 0 0 33px;
	padding: 25px;
	position: relative;
	z-index: inherit;
	zoom: 1; /* For IE6 */
}


</style>

<div id="whfhilitesX" class="rounded-corners shadoww selectable" style="position:absolute;top:346px;left:697px;width:253px;height:315px;display:none;">

</div>

<div id="whfhilitered" class="containerPlus selectable red zoomable" style="position:absolute;top:292px;left:621px;width:320px;height:440px;display:none;">
        <div class="no"><div class="ne"><div class="n"></div></div>
          <div class="o"><div class="e"><div class="c">
            <div class="mbcontainercontent" style="width:auto;height:auto;">

            </div>
            
          </div></div></div>
          <div>
            <div class="so"><div class="se"><div class="s"></div></div></div>
          </div>
        </div>
</div>

<style>
	
.whfhilitegrey {
position:absolute;
top:346px;
left:697px;
width:253px;
height:315px;
}

.whfhilitegrey h2{
	color:#f00;
}
.whfhilitegrey h3{
	color:#f00;
}
.whfhilitegrey p {
	color:#000;
	font-size: 14px;
}
.whfhilitegrey ul {
	color:#fff;
	margin-right:10px;
	font-size: 13px;
}
.whfhilitegrey li{
	color:#000;
	/* list-style-image: url(images/arroww.gif);*/
}
/*
.whfhilitegrey.zoomit {
	width:350px;
}
*/
.whfhilitegrey.zoomit ul {
 	 font-size: 16px;
}
/*
#whfphotopanel img {
	width:50%;
	 float: right; 
}

#whfphotopanel.zoomit img {
	width:100%;
	 float: right; 
}
*/
.photosegtooltiptext {
	background-color:#fff;
	position:absolute;
	top: 80px;
	left: 0px;
	width: 90px;
	color: #000;
	padding: 2px;
}
</style>

<div id="whfhilitegrey" class="containerPlus selectable zoomable grey whfhilitegrey" style="display:none;">
        <div class="no">
          <div class="o"><div class="e" style="margin-left:10px;"><div class="c" >
            <div class="mbcontainercontent" style="width:auto;height:auto;">

            </div>
            
          </div></div></div>
          <div>
            <div class="so"><div class="se"><div class="s"></div></div></div>
          </div>
        </div>
</div>


<div id="whfillustratedphotopanel" class="outerframe selectable"  style="top:160px;left: 320px;display:none;">
  <div class="innerframe" style="width:830px;height:auto;">
  	
<div id="whfillustratedphotopanelll" style="background-image:  url(images/Board-2009_72.jpg);background-repeat: no-repeat;width: 828px;height: 483px;">

<div class="photosegtooltip"  id="#tooltip1" style="top: 120px; left: 60px; width: 80px; height: 80px; border-width: 0px;">
 <div class="photosegtooltiptext">Peter Hollins, Continental Representative Europe</div>
</div>

<div class="photosegtooltip"  id="#tooltip2" style="top: 110px; left: 170px; width: 80px; height: 80px; border-width: 0px;">
  <div class="photosegtooltiptext">Akira Matsumori, Secretary</div>
</div> 

<div class="photosegtooltip"  id="#tooltip3" style="top: 90px; left: 270px; width: 80px; height: 80px; border-width: 0px;">
  <div class="photosegtooltiptext">Cheng-Wen Chiang, Continental Representative Asia-Pacific</div>
</div> 

<div class="photosegtooltip"  id="#tooltip4" style="top: 100px; left: 345px; width: 80px; height: 80px; border-width: 0px;">
  <div class="photosegtooltiptext">Kingsley K. Akinroye, Continental Representative Africa</div>
</div>

<div class="photosegtooltip"  id="#tooltip5" style="top: 70px; left: 390px; width: 80px; height: 80px; border-width: 0px;">
  <div class="photosegtooltiptext">Andy Wielgosz, Editor-in-Chief, CVD Prevention & Control Journal</div>
</div>

<div class="photosegtooltip"  id="#tooltip6" style="top: 90px; left: 450px; width: 80px; height: 80px; border-width: 0px;">
  <div class="photosegtooltiptext">W.S. Santharaj, Continental Representative Asia-Pacific</div>
</div>

<div class="photosegtooltip"  id="#tooltip7" style="top: 90px; left: 500px; width: 80px; height: 80px; border-width: 0px;">
  <div class="photosegtooltiptext">Wistremundo Dones, Continental Representative Inter-America</div>
</div>

<div class="photosegtooltip"  id="#tooltip8" style="top: 90px; left: 550px; width: 80px; height: 80px; border-width: 0px;">
  <div class="photosegtooltiptext">Srinath Reddy, Chairman, Foundations' Advisory Board</div>
</div>

<div class="photosegtooltip"  id="#tooltip9" style="top: 80px; left: 600px; width: 80px; height: 80px; border-width: 0px;">
  <div class="photosegtooltiptext">Eduardo Morales Briceño, Continental Representative Inter-America</div>
</div>

<div class="photosegtooltip"  id="#tooltip10" style="top: 90px; left: 656px; width: 80px; height: 80px; border-width: 0px;">
 <div class="photosegtooltiptext">Sidney C Smith, President Elect & Chairman of Scientific Advisory Board</div>
</div>

<div class="photosegtooltip"  id="#tooltip11" style="top: 95px; left: 735px; width: 80px; height: 80px; border-width: 0px;">
  <div class="photosegtooltiptext">Craig T. Beam, Treasurer</div>
</div>

<div class="photosegtooltip"  id="#tooltip12" style="top: 190px; left: 250px; width: 80px; height: 80px; border-width: 0px;">
  <div class="photosegtooltiptext">Helen Alderson, Chief Executive Officer</div>
</div>

<div class="photosegtooltip"  id="#tooltip13" style="top: 175px; left: 395px; width: 80px; height: 80px; border-width: 0px;">
 <div class="photosegtooltiptext">Pekka Puska, President</div>
</div>


<div class="photosegtooltip"  id="#tooltip14" style="top: 195px; left: 510px; width: 80px; height: 80px; border-width: 0px;">
 <div class="photosegtooltiptext">Shahryar A Sheikh, Past President</div>
</div>

<div class="photosegtooltip"  id="#tooltip15" style="top: 190px; left: 640px; width: 80px; height: 80px; border-width: 0px;">
 <div class="photosegtooltiptext">Lyn Roberts, Vice-President</div>
</div>

</div>
			 
   </div>
</div>


<style>
	
.whfquotepanel h3 {
 	color: #fff;
 	font-family: arial;
 	font-size: 16px;
}

.whfquotepanel {
	position:absolute;
	top:550px;
	left:180px;
	width:250px;

 	color: #fff;
 	font-family: arial;	
 	border: 0px solid #f06;	
}

.whfquotepanel.zoomit {
	font-size: 18px;
}

.whfquotepanel.zoomit h3 {
 	 font-size: 18px;
}


#whfquotepanel ul {
	margin-right:10px;color:#fff;
	list-style-type:circle
}
#whfquotepanel li{
	color:#000;
	list-style-type:circle
}

#whfquotepanel p{
	color:#fff;
}

.boxpanel
{
-moz-border-radius: 1.6em;
border-radius: 1.6em;
border:#aaa solid 2px;
-moz-box-shadow:0px 10px 10px gray;
-webkit-box-shadow:-10px 4px 10px 10px rgba(0, 0, 0, 0.6);
/* For IE 8 */  
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";   
/* For IE 5.5 - 7 */ 
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000'); 

/*
-moz-border-radius-bottomleft:50px;
-moz-border-radius-bottomright:200px;
border:orange 20px double;
-moz-border-radius-topleft:100px;
-moz-border-radius-topright:66.66px;
padding:24px 24px 24px 24px; */
	position:absolute;
/*	top:450px;
	left:180px;
	width:350px;
	height:200px;*/
	display:none;
	color:#fff;
	background-color: #000;
} 

</style>

 <div class="boxpanel selectable zoomable" id="boxpanel" >
       
 	</div>
 
 <div id="whfquotepanel" class="containerPlus selectable zoomable red whfquotepanel" tabindex="99" style="display:none;"> 	
    <div class="no">
          <div class="o"><div class="e"  style="margin-left:10px;"><div class="c">
          	
            <div class="mbcontainercontent" style="position:relative;width:auto;margin-left:5px;margin-top:5px;border: 0px solid #00f;	">
               
            </div>
            
          </div></div></div>
          <div>
            <div class="so"><div class="se"><div class="s"></div></div></div>
          </div>
        </div>
  </div>


<style>
	
#whfactivities .inner {
	background: #eeeeee;
 	color: #aaa;
 	font-family: arial;
 	font-size: 12px;
 	font-weight: strong;
 	margin-left:-15px;
 	width:234px;
  opacity:.95;    
  filter:Alpha(opacity=95);  
  
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;  	
}

#whfactivities  li {
  list-style-type: square;
}

#whfactivities a:link,a:visited,a:active { text-decoration: none; color:#aaa; }
#whfactivities a:hover { color: #f00;}

.activities.red h2 { color:#fff; font-size:16px; }
.activities.red h3 { color:#fff; font-size:14px; }
.activities.white h2 { color:#f00; font-size:16px; }
.activities.white h3 { color:#f00; font-size:14px; }

</style>

 <div id="whfactivities"  style="position:absolute;top:300px;left:360px;width:510px;height:250px;background: transparent;display:none;">
 
 <table border=0 style="position:absolute;top:0px;left:0px;width:100%;height:100%;">
 	
 	<tr><td>
 	
 <div id="whff1" class="containerPlus activities red" style="position:relative;width:250px;height:123px;"> 	
    <div class="no"><div class="ne"><div class="n"></div></div>
          <div class="o"><div class="e"><div class="c">

 	  <div class="inner" style="display: none;position:absolute;bottom:120px;" >
     	         <ul style="display: block;">       
     	         	    <li><a rel="sharing1" href="#">World Congress of Cardiology Scientific Sessions 2010</a></li>
     	         	    <li><a rel="sharing2" href="#">Capacity building</a></li>
     	         	    <li><a rel="sharing3" href="#">Twin centres programme</a></li>
     	         	    <li><a rel="sharing4" href="#">World Heart Federation Journals</a></li>
     	         </ul>    	
  </div>

            <div class="mbcontainercontent" style="width:auto;height:60px;margin-left:-10px;margin-top:-20px;overflow-x: hidden;overflow-y: hidden;">
                <h2 > Sharing science and building capacity </h2>
            </div>
            
          </div></div></div>
          <div>
            <div class="so"><div class="se"><div class="s"></div></div></div>
          </div>
        </div>
  </div>
  </td><td>
  	
  	
  <div id="whff2" class="containerPlus activities white" style="position:relative;width:250px;height:123px;"> 	
    <div class="no"><div class="ne"><div class="n"></div></div>
          <div class="o"><div class="e"><div class="c">
          	
 	  <div class="inner" style="display: none;position:absolute;bottom:120px;" >
     	         <ul style="display: block;">       
     	         	    <li><a rel="applied2" href="#">Rheumatic Heart Disease </a></li>
     	         	    <li><a rel="applied1" href="#">Grenada Heart Project</a></li>     	         	    
     	         	    <li><a rel="applied3" href="#">The polypill FOCUS project</a></li>
     	         	    <li><a rel="applied4" href="#">China bridging the gap</a></li>
     	         </ul>    	
   </div>
            <div class="mbcontainercontent" style="width:auto;height:60px;margin-left:-10px;margin-top:-20px;">
                <h2> Applied research </h2>
            </div>
            
          </div></div></div>
          <div>
            <div class="so"><div class="se"><div class="s"></div></div></div>
          </div>
        </div>
  </div>
</td></tr>
	
 <tr><td>	
 	
   <div id="whff3" class="containerPlus activities white" style="position:relative;width:250px;height:123px;"> 	
    <div class="no"><div class="ne"><div class="n"></div></div>
          <div class="o"><div class="e"><div class="c">
 	  <div class="inner" style="display: none;position:absolute;top:90px;width:234px;" >
     	         <ul style="display: block;">       
     	         	    <li><a rel="awareness2" href="#">World Heart Day</a></li>
     	         	    <li><a rel="awareness3" href="#">Go Red for Women</a></li>     	         	
     	         	    <li><a rel="awareness1" href="#">Children and Youth</a></li>
     	         </ul>    	
   </div>
            <div class="mbcontainercontent" style="width:auto;height:60px;margin-left:-10px;margin-top:-20px;">
                <h2 > Awareness </h2>
            </div>
            
          </div></div></div>
          <div>
            <div class="so"><div class="se"><div class="s"></div></div></div>
          </div>
        </div>
  </div>
  
 </td><td>

 	  <div id="whff4" class="containerPlus activities white" style="position:relative;width:250px;height:123px;"> 	
    <div class="no"><div class="ne"><div class="n"></div></div>
          <div class="o"><div class="e"><div class="c">

 	  <div class="inner" style="display: none;position:absolute;top:90px;" >
     	         <ul style="display: block;">       

     	         	    <li><a rel="advocacy1" href="#">CVD on the global health agenda</a></li>
     	         	    <li><a rel="advocacy2" href="#">Tobacco</a></li>
     	         </ul>    	
  </div>
            <div class="mbcontainercontent" style="width:200px;height:60px;margin-left:-10px;margin-top:-20px;">
                <h2> Advocacy</h2>
            </div>
            
          </div></div></div>
          <div>
            <div class="so"><div class="se"><div class="s"></div></div></div>
          </div>
        </div>
  </div> 	
 </td></tr>
	
	</table>

</div>

<style>
	/*
		#whfpaneltext {
	  -moz-transform: skew(5deg);
    -webkit-transform: skew(5deg);}
	  -moz-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);}   
    */ 
</style>


<div id="whfphotopanel" class="selectable zoomable" style="position: absolute; top: 163px; left: 290px; display: none;float: left;white-space: nowrap; ">
<table id="whfphotopanel_table" border=0 style="position:relative;top:0px;left:0px;border-collapse:collapse; width:100%;z-index:8;"><tbody>                       
<tr><td class="tl" style="background:url(corners/tl.png) 0 0 no-repeat; width:20px; height:20px; overflow:hidden;"></td>                         
    <td class="tm" style="background:url(corners/tm.png) 0 0 repeat-x; height:20px; overflow:hidden;"></td>                         
    <td class="tr" style="background:url(corners/tr.png) 100% 0 no-repeat; width:20px; height:20px; overflow:hidden;"></td>                       
</tr>                       
<tr>    
                     
<td class="ml" style="background:url(corners/ml.png) 0 0 repeat-y; width:20px; overflow:hidden;"></td>                         
<td class="mm" style="background:#fff; vertical-align:top; padding:0px;">                           
<div id="zoom_content" class="mbcontainercontent1" style="z-index:11">
     
</div>                         
</td>                         
<td class="mr" style="background:url(corners/mr.png) 100% 0 repeat-y;  width:20px; overflow:hidden;"></td>                       
</tr>                       

<tr>
<td class="bl" style="background:url(corners/bl.png) 0 100% no-repeat; width:20px; height:20px; overflow:hidden;"></td>
<td class="bm" style="background:url(corners/bm.png) 0 100% repeat-x; height:20px; overflow:hidden;"></td>
<td class="br" style="background:url(corners/br.png) 100% 100% no-repeat; width:20px; height:20px; overflow:hidden;"></td> 
</tr>                     
</tbody></table>
</div>
	
	
	<style type="text/css">	
	.whf-button { outline: 0; margin:0 4px 0 0; padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
	.whf-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
	
	a.whf-button { float:left; }
	
	/* remove extra button width in IE */
	button.whf-button { width:auto; overflow:visible; }
	
	.whf-button-icon-left { padding-left: 2.1em; }
	.whf-button-icon-right { padding-right: 2.1em; }
	.whf-button-icon-left .ui-icon { right: auto; left: .2em; margin-left: 0; }
	.whf-button-icon-right .ui-icon { left: auto; right: .2em; margin-left: 0; }
	
	.whf-button-icon-solo { display:block; width:8px; text-indent: -9999px; }	 /* solo icon buttons must have block properties for the text-indent to work */	
	
	.whf-buttonset { float:left; }
	.whf-buttonset .whf-button { float: left; }
	.whf-buttonset-single .whf-button, 
	.whf-buttonset-multi .whf-button { margin-right: -1px;}
	
	.whf-toolbar { padding: .5em; margin: 0;  }
	.whf-toolbar .whf-buttonset { margin-right:1.5em; padding-left: 1px; }
	.whf-toolbar .whf-button { font-size: 1em;  }
 
	/*demo page css*/
	.strike { text-decoration: line-through; }

  
</style>	
	
<div id="whfpaneltext" class="selectable zoomable scrollpane ui-widget-content" tabindex="100" style="position: absolute; top: 163px; left: 276px; width: 600px; height: 500px;display: none;border: 0px solid #00f; 		  ">


<table id="whfpaneltext_table" border=0 style="position:relative;top:0px;left:0px;border-collapse:collapse; width:100%;z-index:8;"><tbody>                                       
<tr>    
                     
<td class="ml" style="background:url(corners/ml.png) 0 0 repeat-y; width:10px; overflow:hidden;"></td>                        
<td class="mm" style="background:#fff; vertical-align:top; padding:10px;"> 
	
	<div class="whf-buttonset ui-helper-clearfix" style="position: absolute;top: -12px; right: 50px;z-index:9;  ">
		<a href="#" class="whf-button ui-state-default whf-button-icon-solo  ui-corner-all PrintPanel" title="Print"><span class="ui-icon ui-icon-print"></span>Print</a>
		<a href="#" class="whf-button ui-state-default whf-button-icon-solo  ui-corner-all fontSizePlus" title="Zoom in"><span class="ui-icon ui-icon-circle-zoomin"></span>Zoom in</a>
		<a href="#" class="whf-button ui-state-default whf-button-icon-solo  ui-corner-all fontSizeMinus" title="Zoom out"><span class="ui-icon ui-icon-circle-zoomout"></span>Zoom out</a>
	</div>	                          
<div id="whfpaneltext_content" class="mbcontainercontent scrollpane" style="overflow: inherit;float: left;padding:10;width:100%; border: 0px solid #f00;">

</div>                         
</td>     
                    
<td class="mr" style="background:url(corners/mr.png) 100% 0 repeat-y;  width:10px; overflow:hidden;"></td>                       
</tr>                       

<tr>
<td class="bl" style="background:url(corners/bl.png) 0 100% no-repeat; width:20px; height:20px; overflow:hidden;"></td>
<td class="bm" style="background:url(corners/bm.png) 0 100% repeat-x; height:20px; overflow:hidden;"></td>
<td class="br" style="background:url(corners/br.png) 100% 100% no-repeat; width:20px; height:20px; overflow:hidden;"></td> 
</tr>                     
</tbody></table>
</div>  

<!--
<div id="columns" style="position: absolute; top: 10px; left: 10px; width: 500px; border: 0px solid #00f;">
<li class="widget color-yellow" style="">
<div class="widget-head" style="cursor: move; "><a href="#" class="collapse">COLLAPSE</a>
                    <h3>Widget title</h3>
                <a href="#" class="remove">CLOSE</a><a href="#" class="edit">EDIT</a></div>
<div class="edit-box" style="display:none;"><ul><li class="item"><label>Change the title?</label><input value="Widget title"></li></ul><li class="item"><label>Available colors:</label><ul class="colors"><li class="color-yellow"></li><li class="color-red"></li><li class="color-blue"></li><li class="color-white"></li><li class="color-orange"></li><li class="color-green"></li></ul></li></div>
<div class="widget-content">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna sem, fringilla in, commodo a, rutrum ut, massa. Donec id nibh eu dui auctor tempor. Morbi laoreet eleifend dolor. Suspendisse pede odio, accumsan vitae, auctor non, suscipit at, ipsum. Cras varius sapien vel lectus.</p>
</div>
</li>
</div> 
-->
<!--
<div class="whf-toolbar ui-widget-header ui-corner-all ui-helper-clearfix " style="position: absolute; top: 400px; left: 10px; ">
	<div class="whf-buttonset">
		<a href="#" class="whf-button ui-state-default whf-button-icon-solo ui-corner-all" title="Open"><span class="ui-icon ui-icon-folder-open"></span> Open</a>
		<a href="#" id="save_screen" class="whf-button ui-state-default whf-button-icon-solo  ui-corner-all" title="Save"><span class="ui-icon ui-icon-disk"></span> Save</a>
		<a href="#" class="whf-button ui-state-default whf-button-icon-solo  ui-corner-all" title="Delete"><span class="ui-icon ui-icon-trash"></span> Delete</a>
	</div>
	
	<div class="whf-buttonset whf-buttonset-multi">
		<button class="whf-button ui-state-default ui-corner-left"><b>B</b></button>
		<button class="whf-button ui-state-default"><i>I</i></button>
		<button class="whf-button ui-state-default  ui-corner-right"><u>U</u></button>
	</div>
	<div class="whf-buttonset ui-helper-clearfix">
		<a href="#" class="whf-button ui-state-default whf-button-icon-solo  ui-corner-all" title="Print"><span class="ui-icon ui-icon-print"></span> Print</a>
		<a href="#" class="whf-button ui-state-default whf-button-icon-solo  ui-corner-all" title="Email"><span class="ui-icon ui-icon-mail-closed"></span> Email</a>
	</div>
	<div class="whf-buttonset whf-buttonset-single ui-helper-clearfix">
		<button class="whf-button ui-state-default ui-state-active ui-priority-primary ui-corner-left">Edit</button>
		<button class="whf-button ui-state-default ui-priority-primary ui-corner-right">View</button>
	</div> -->
</div>   


<div id="dialog-confirm" title="Delete this panel?" style="display: none; ">
	<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
		<span id="dialog-confirm-message"> This item will be permanently deleted. Are you sure?</span></p>
</div>   

<div id="dialog-create" class="ui-widget" style="display: none; ">

		<h1>Choose Contianer you ant to create :</h1>
<form>
	<fieldset>
		<label for="ctype">Text Panel</label>
		<input type="radio" name="ctype" id="dialog-create-textpanel" value="textpanel" class="ui-widget-content ui-corner-all" />
		<label for="ctype">Photo</label>
		<input type="radio" name="ctype" id="dialog-create-textpanel" value="photopanel" class="ui-widget-content ui-corner-all" />
		<label for="ctype">Quote</label>
		<input type="radio" name="ctype" id="dialog-create-textpanel" value="quotepanel" class="ui-widget-content ui-corner-all" />
		<label for="ctype">Hilites</label>
		<input type="radio" name="ctype" id="dialog-create-textpanel" value="hilitepanel" class="ui-widget-content ui-corner-all" />		
	</fieldset>
	</form>
</div>

 <div id="loginForm" style="display:none"> 
 	   <form id='someform' action="index.php" method="post">
            <p><label>Username:</label><input type="text" name="username" /></p> 
            <p><label>Password:</label><input type="password" name="password" /></p> 
        </div>  
     	
	
<div id="printpdf" class="printpdf" style="position: absolute; top: 500px; left 50px;">
	<a target="print" style="color: #aaa;text-decoration: none;font-weight: bold;" href="printversion.pdf">PDF/Print Version</a>
</div>     


</body>
</html>