<?php defined('C5_EXECUTE') or die(_("Access Denied.")) ?>
<?php 
   $page = Page::getCurrentPage();
   $a = Area::getOrCreate($page, 'Test Area');
   $a->display($page);
 
// some variables to use later;
   $areaID = $a->getAreaID();
   $blockID = $b->getBlockID();
   $blockAreaID = $b->getBlockAreaObject()->getAreaID();
 
// need to catch the nasty #ccm-highlighter <div> that overlays the block 
// and also the newly created area, thus making impossible to edit it
   if ($page->isEditMode())
      echo <<<EOT
<script>
(function(){
 
// if hovering over this block then attach a handler to the highlighter
// that will check if cursor points to the area controls or content
// if so - hide the highlighter. 
// thanks to the event handler - it catches mouseover on hot areas automatically
 
   $('#b{$blockID}-{$blockAreaID}').on('mouseover', function(event) {
      $(document).delegate('#ccm-highlighter', 'mousemove', function(event){
 
      function overHotArea(){
            //  could write all in one line, but who would read it then??
            var a, c;  
            a = event.pageX > $('#a{$areaID}').offset().left;
            a &= event.pageX < $('#a{$areaID}').offset().left + $('#a{$areaID}').outerWidth();
            a &= event.pageY > $('#a{$areaID}').offset().top;
            a &= event.pageY < $('#a{$areaID}').offset().top + $('#a{$areaID}').outerHeight();
 
            c = event.pageX > $('#a{$areaID}controls').offset().left;
            c &=  event.pageX < $('#a{$areaID}controls').offset().left + $('#a{$areaID}controls').outerWidth();
            c &= event.pageY> $('#a{$areaID}controls').offset().top;
            c &= event.pageY < $('#a{$areaID}controls').offset().top + $('#a{$areaID}controls').outerHeight();
            return a||c;
         }
 
         if(overHotArea()) {
            $('#ccm-highlighter').mouseout();
         }
      });   
   });
 
// prevent bubbling the mouseover event to parent block
// and stop hiding the higlighter while hovering over that area
 
   $('#a{$areaID}controls').on('mouseover', function(event) {
      event.stopPropagation();
      $(document).undelegate('#ccm-highlighter', 'mousemove');
   });
   $('#a{$areaID}').on('mouseover', function(event) {
      event.stopPropagation();
      $(document).undelegate('#ccm-highlighter', 'mousemove');
   });
})()
</script>   
EOT;
?>