var CL = {
  cur_month : '', //current month to view
  cur_year  : '', //current year to view
  action    : '', //todo
  showAs           : '',
  showAsOptions    : new Array,
  start_time_day   : '',
  start_time_month : '',
  start_time_year  : '',
  start_time_hour  : '',
  start_time_minute: '',
  start_time_all   : '',
  end_time_day     : '',
  end_time_month   : '',
  end_time_year    : '',
  end_time_hour    : '',
  end_time_minute  : '',
  end_time_all     : '',
  eventTitle       : '',
  eventDetails     : '',
  eventEmail       : '',
  calendarActivityID : '',
  interestID       : '',
  interestOptions  : new Array,
  eventXpos        : '',  //xpos for event-popup
  eventYpos        : '',  //ypos for event-popup
  eventWidth       : 400, //event-popup width
  eventHeight      : 300, //event-popup height

  
  handle: function() {
    //argument list with todo
    if( CL.handle.arguments.length < 1 )
      return false;
      
    var todo = arguments[0]
    var args = new Array;

    for (var i=1; i<arguments.length; i++)
      args.push(arguments[i])
    
    switch (todo){
      case 'add':
        CL.action = 'add';
        CL.addEvent( args );
        break;
      case 'edit':
        CL.action = 'edit';
        CL.editEvent( args );
        break;
      case 'view':
        CL.action = 'view';
        CL.editEvent( args );
        break;
      case 'delete':
        CL.action = 'delete';
        CL.editEvent( args );
        break;
      case 'delete2':
        CL.action = 'delete2';
        CL.deleteEvent( args );
        break;
      case 'cancelDelete':
        CL.action = 'cancelDelete';
        CL.editEvent( args );
        break;                
    }
  },
  
  
  get_calendar: function() {
    CL.closeCLEvent();
    FL.responseType = 'text';
    FL.responseHandler = 'CL.show_calendar';
    FL.handle( 'retrieve', 'calendar.php?action=showclean&month=' + CL.cur_month + '&year=' + CL.cur_year ); 
  },

  show_calendar: function( response ) {
    getObj( 'calendar_content' ).innerHTML = URLDecode( response );
    fixPNG();
  },
  
  //gets info about calendarActivity in response to pass on
  getEventInfo: function( xmldoc ) {
    if( xmldoc.getElementsByTagName('showAs').item(0).childNodes.length > 0 )
      CL.showAs   = xmldoc.getElementsByTagName('showAs').item(0).firstChild.nodeValue;
    
    if( xmldoc.getElementsByTagName('showAsOptions').item(0).childNodes.length > 0 ) {
      var h = 0;
      CL.showAsOptions = new Array();
      myOptionsNode = xmldoc.getElementsByTagName('showAsOptions').item(0);
      if( myOptionsNode.childNodes.length > 0 ) {
        for( i = 0; i < myOptionsNode.childNodes.length; i++ ) {
          myNode = myOptionsNode.childNodes.item( i );
          if( myNode.childNodes.length > 0 ) {
            for( j = 0; j < myNode.childNodes.length; j++ ) {
              node = myNode.childNodes.item( j );
              for( var x = 0; x < myNode.attributes.length; x++ ) {
              	if( myNode.attributes[x].nodeName.toLowerCase() == 'id' ) {
              		CL.showAsOptions[h] = new Array( myNode.attributes[x].nodeValue, node.nodeValue );
              		h++;
              	}
              }
            }
          }
        }
      } 
    }

    if( xmldoc.getElementsByTagName('interestID').item(0).childNodes.length > 0 )
      CL.interestID = xmldoc.getElementsByTagName('interestID').item(0).firstChild.nodeValue;
    
    if( xmldoc.getElementsByTagName('interestOptions').item(0).childNodes.length > 0 ) {
      var h = 0;
      CL.interestOptions = new Array();
      myOptionsNode = xmldoc.getElementsByTagName('interestOptions').item(0);
      if( myOptionsNode.childNodes.length > 0 ) {
        for( i = 0; i < myOptionsNode.childNodes.length; i++ ) {
          myNode = myOptionsNode.childNodes.item( i );
          if( myNode.childNodes.length > 0 ) {
            for( j = 0; j < myNode.childNodes.length; j++ ) {
              node = myNode.childNodes.item( j );
              for( var x = 0; x < myNode.attributes.length; x++ ) {
              	if( myNode.attributes[x].nodeName.toLowerCase() == 'id' ) {
              		CL.interestOptions[h] = new Array( myNode.attributes[x].nodeValue, node.nodeValue );
              		h++;
              	}
              }
            }
          }
        }
      } 
    }        
    
    if( xmldoc.getElementsByTagName('start_time_day').length > 0 &&  xmldoc.getElementsByTagName('start_time_day').item(0).childNodes.length > 0 )
      CL.start_time_day   = xmldoc.getElementsByTagName('start_time_day').item(0).firstChild.nodeValue;
    
    if( xmldoc.getElementsByTagName('start_time_month').length > 0 && xmldoc.getElementsByTagName('start_time_month').item(0).childNodes.length > 0 )
      CL.start_time_month = xmldoc.getElementsByTagName('start_time_month').item(0).firstChild.nodeValue;
    
    if( xmldoc.getElementsByTagName('start_time_year').length > 0 && xmldoc.getElementsByTagName('start_time_year').item(0).childNodes.length > 0 )
      CL.start_time_year  = xmldoc.getElementsByTagName('start_time_year').item(0).firstChild.nodeValue;
    
    if( xmldoc.getElementsByTagName('start_time_hour').length > 0 && xmldoc.getElementsByTagName('start_time_hour').item(0).childNodes.length > 0 )
      CL.start_time_hour  = xmldoc.getElementsByTagName('start_time_hour').item(0).firstChild.nodeValue;

    if( xmldoc.getElementsByTagName('start_time_minute').length > 0 && xmldoc.getElementsByTagName('start_time_minute').item(0).childNodes.length > 0 )
      CL.start_time_minute  = xmldoc.getElementsByTagName('start_time_minute').item(0).firstChild.nodeValue;
                
    if( xmldoc.getElementsByTagName('end_time_day').length > 0 && xmldoc.getElementsByTagName('end_time_day').item(0).childNodes.length > 0 )
      CL.end_time_day     = xmldoc.getElementsByTagName('end_time_day').item(0).firstChild.nodeValue;
    
    if( xmldoc.getElementsByTagName('end_time_month').length > 0 && xmldoc.getElementsByTagName('end_time_month').item(0).childNodes.length > 0 )
      CL.end_time_month   = xmldoc.getElementsByTagName('end_time_month').item(0).firstChild.nodeValue;
    
    if( xmldoc.getElementsByTagName('end_time_year').length > 0 && xmldoc.getElementsByTagName('end_time_year').item(0).childNodes.length > 0 )
      CL.end_time_year    = xmldoc.getElementsByTagName('end_time_year').item(0).firstChild.nodeValue;
    
    if( xmldoc.getElementsByTagName('end_time_hour').length > 0 && xmldoc.getElementsByTagName('end_time_hour').item(0).childNodes.length > 0 )
      CL.end_time_hour  = xmldoc.getElementsByTagName('end_time_hour').item(0).firstChild.nodeValue;

    if( xmldoc.getElementsByTagName('end_time_minute').length > 0 && xmldoc.getElementsByTagName('end_time_minute').item(0).childNodes.length > 0 )
      CL.end_time_minute  = xmldoc.getElementsByTagName('end_time_minute').item(0).firstChild.nodeValue;

    if( xmldoc.getElementsByTagName('eventTitle').length > 0 && xmldoc.getElementsByTagName('eventTitle').item(0).childNodes.length > 0 )
      CL.eventTitle       = xmldoc.getElementsByTagName('eventTitle').item(0).firstChild.nodeValue;
    
    
    if( xmldoc.getElementsByTagName('eventDetails').length > 0 && xmldoc.getElementsByTagName('eventDetails').item(0).childNodes.length > 0 )
      CL.eventDetails     = xmldoc.getElementsByTagName('eventDetails').item(0).firstChild.nodeValue;
    
    if( xmldoc.getElementsByTagName('eventEmail').length > 0 && xmldoc.getElementsByTagName('eventEmail').item(0).childNodes.length > 0 )
      CL.eventEmail       = xmldoc.getElementsByTagName('eventEmail').item(0).firstChild.nodeValue;
    
    if( xmldoc.getElementsByTagName('calendarActivityID').length > 0 && xmldoc.getElementsByTagName('calendarActivityID').item(0).childNodes.length > 0 )
      CL.calendarActivityID = xmldoc.getElementsByTagName('calendarActivityID').item(0).firstChild.nodeValue;
        
    //prepare dates for display
    CL.start_time_all  = CL.start_time_day + '/' + CL.start_time_month + '/' + CL.start_time_year;
    if( CL.end_time_day > 0 && CL.end_time_month > 0 && CL.end_time_year > 0 )
      CL.end_time_all  = CL.end_time_day + '/' + CL.end_time_month + '/' + CL.end_time_year;
    
    //nieuwe coordinaten ophalen om event-div te plaatsen
    if( CL.action == 'view' )
      CL.getEventPos();
    
    //bij een gecancelde delete actie, view tonen  
    if( CL.action == 'cancelDelete' )
      CL.action = 'view';
      
    //go on to form
    CL.CLEvent();
  },
  
  //call getEventInfo to retrieve event data
  editEvent: function() {  
    var calendarActivityID;
    if( arguments.length == 1 ) {
      var calendarActivityID = arguments[0];
      FL.responseType = 'xml';
      FL.responseHandler = 'CL.getEventInfo';
      FL.handle( 'retrieve', 'calendar.php?action=getInfo&calendarActivityID=' + calendarActivityID );
    }
  },
  
  
  deleteEvent: function() {
    var calendarActivityID;
    if( arguments.length == 1 ) {
      var calendarActivityID = arguments[0];
      FL.responseType = 'text';
      FL.responseHandler = 'CL.get_calendar';
      FL.handle( 'retrieve', 'calendar.php?action=delete&calendarActivityID=' + calendarActivityID );
    }
  },
  
  //prepare variables for to add an event
  addEvent: function() {
    var args = arguments[0];
    if( args.length >= 3 ) {
      CL.start_time_day = args[0];
      CL.start_time_month = args[1];
      CL.start_time_year = args[2];
      CL.start_time_all  = CL.start_time_day + '/' + CL.start_time_month + '/' + CL.start_time_year;
    }
    CL.getEventPos();
    
    //use getEventInfo to retrieve default event values
    FL.responseType = 'xml';
    FL.responseHandler = 'CL.getEventInfo';
    FL.handle( 'retrieve', 'calendar.php?action=getInfo&calendarActivityID=0' );


  },

  storeEvent: function() {
    //let php check the fields (handiger met talen)
    FL.responseType = 'text';
    FL.responseHandler = 'CL.show_calendar';
    FL.handle( 'store', 'calendar.php?action=store&month=' + CL.cur_month + '&year=' + CL.cur_year, 'interestID', 'showAs', 'start_time_day', 'start_time_month', 'start_time_year', 'end_time_day', 'end_time_month', 'end_time_year', 'start_time_hour', 'start_time_minute', 'end_time_hour', 'end_time_minute', 'title', 'text', 'email', 'calendarActivityID' );  
    CL.closeCLEvent();
  },

  getEventPos: function() {
    getPageDims();
    
    //bepaal de xpos
    if( view_X + scroll_X - ( elmLeft + elmWidth ) > CL.eventWidth )
      xpos = elmWidth + 10;
    else
      xpos = elmWidth - CL.eventWidth - 10;    
    //bepaal de ypos
    if( view_Y + scroll_Y - elmTop > ( ( CL.eventHeight / 2 ) + 10 ) )
      ypos = mouse_Ypos;
    else
      ypos = elmTop - ( CL.eventHeight / 2 ) + 10;
    
    CL.eventXpos = xpos;
    CL.eventYpos = ypos;      
  },

  CLEvent: function() {
    //fix the content
    //include the hidden fields
    var hiddenfields = CL.prepareHiddenFields();
    var eventdetails = (CL.action == 'view' ? CL.prepareEventView() : ( CL.action == 'delete' ? CL.prepareEventDelete() : CL.prepareEventForm() ) );
    
    var eventdisplay = hiddenfields + eventdetails;
    
    var myAction = CL.action.substring(0,1).toUpperCase() + CL.action.substring(1,CL.action.length)
    
    //now create our div
    var div = document.createElement( 'div' );
    html = '<div class="eventHeader"><div style="float:left;padding-top:2px;padding-left:5px;">' + myAction + ' event</div><div style="float:right;width:16px;><a class="a_hand" onclick="CL.closeCLEvent();"><img align="right" src="if/cancel.png" width="16" height="16" border="0" style="cursor:pointer;" /></a></div></div>';
    html+= '<div style="padding:5px;">' + eventdisplay + '</div>';
    
    div.innerHTML = html;  
    div.style.width = CL.eventWidth + 'px';
    div.id = 'eventdiv';
    div.style.position = 'absolute';
    div.style.left = CL.eventXpos + 'px';
    div.style.top  = CL.eventYpos + 'px';
    
    //just before showing our new event-div, close any old ones
    CL.closeCLEvent();
    document.getElementsByTagName( 'body' )[0].appendChild( div );
    fixPNG();
    return true;
  }, 
  
  changeMonth: function( year, month ) {
    CL.cur_month = month;
    CL.cur_year = year;
    CL.get_calendar(); 
  },

  closeCLEvent: function() {
    CL.closeCalendar();
    CL.resetVars();
    if( document.getElementById( 'eventdiv' )  )
      document.getElementsByTagName( 'body' )[0].removeChild( document.getElementById( 'eventdiv' ));
    return true;  
  },  


  showCalendar: function( field, year, month ) {
    CL.closeCalendar();
    
    getPageDims();
    
    //define help box width and height
    var helpWidth = 200;
    var helpHeight = 180;
    
    //now create our div
    var div = document.createElement( 'div' );
    div.style.width = helpWidth + 'px';
    div.id = 'calendardiv_popup';
    
    
    //bepaal de xpos
    if( view_X + scroll_X - ( elmLeft + elmWidth ) > helpWidth )
      xpos = elmLeft + elmWidth + 10;
    else
      xpos = elmWidth - helpWidth - 10;
    xpos = elmWidth ;    
    //bepaal de ypos
    if( view_Y + scroll_Y - elmTop > ( helpHeight / 2 ) )
      ypos = mouse_Ypos;
    else
      ypos = elmTop - ( helpHeight / 2 ) + 10;
    ypos = elmTop;

    
    div.style.position = 'absolute';
    div.style.left = xpos + 'px';
    div.style.top  = ypos + 'px';
    
    //fill the calendar
    CL.getCalendarContent( field, year, month );

    document.getElementsByTagName( 'body' )[0].appendChild( div );
    
    //put iframe below to hide select boxes
    CL.createShim( div );
    
    return true;
  },
  
  getCalendarContent: function( field, year, month ) {
    year = isDefined( year ) ? year : '';
    month = isDefined( month ) ? month : '';
    
    FL.responseHandler = 'CL.showCalendarContent';
    FL.responseType = 'text';
    FL.handle( 'retrieve', '/modules/tools/calendar.php?from=site&field=' + field + '&year=' + year + '&month=' + month );    
  },
  
  showCalendarContent: function( response ) {
    getObj( 'calendardiv_popup' ).innerHTML = URLDecode( response );
    fixPNG();
  },


  
  closeCalendar: function( field ) {
  	if( document.getElementById( 'calendardiv_popup' )  ) {
      CL.destroyShim( document.getElementById( 'calendardiv_popup' ) );
      document.getElementsByTagName( 'body' )[0].removeChild( document.getElementById( 'calendardiv_popup' ));
    }
    return true;  
  },

  selectCalendarDate: function( field, day, month, year ) {
    if( isObject( getObj( field + '_day' ) ) )
      getObj( field + '_day' ).value = day;  
    if( isObject( getObj( field + '_month' ) ) )
      getObj( field + '_month' ).value = month;      
    if( isObject( getObj( field + '_year' ) ) )
      getObj( field + '_year' ).value = year;    
    if( isObject( getObj( field ) ) )
      getObj( field ).value = day + '/' + month + '/' + year;       
    CL.closeCalendar( field );
  },
  
  
  prepareHiddenFields: function() {
    var ret = '';
    var hiddenfields = new Array( 'calendarActivityID', 'start_time_day', 'start_time_month', 'start_time_year', 'end_time_day', 'end_time_month', 'end_time_year' );
    for( i = 0; i < hiddenfields.length; i++ ) {
      field = hiddenfields[i];
      ret+= '<input type="hidden" name="' + field + '" id="' + field + '" value="' + eval( 'CL.' + field ) + '" />';
    }
    return ret;
  },
  
  prepareEventForm: function() {
    var ret = '';
    var showAsOptions = '';
    var optionSelected = false;
    var interestOptions = '';
    var year = CL.cur_year;
    var month = CL.cur_month;
    
    
    
    for( i = 0; i < CL.showAsOptions.length; i++ ) {
      optionSelected = false;
      thisOption = CL.showAsOptions[i];
      if( isArray( thisOption ) && thisOption.length > 0 ) {
        if( CL.showAs == thisOption[0] )
          optionSelected = true;
        showAsOptions+= '<option value="' + thisOption[0] + '"' + ( optionSelected ? ' selected="selected"' : '' ) + '>' + thisOption[1] + '</option>';
      }
    }

    for( i = 0; i < CL.interestOptions.length; i++ ) {
      optionSelected = false;
      thisOption = CL.interestOptions[i];
      if( isArray( thisOption ) && thisOption.length > 0 ) {
        if( CL.interestID == thisOption[0] )
          optionSelected = true;
        interestOptions+= '<option value="' + thisOption[0] + '"' + ( optionSelected ? ' selected="selected"' : '' ) + '>' + thisOption[1] + '</option>';
      }
    }
    
    ret+= '<label for="showAs">Status:</label><select name="showAs" id="showAs">' + showAsOptions + '</select><br/><label for="start_time">Start:</label><input style="cursor:pointer;" type="text" id="start_time" name="start_time" size="10" value="' + CL.start_time_all + '" onclick="CL.showCalendar(\'start_time\', \'' + year + '\', \'' + month + '\');" />&nbsp;&nbsp;<input style="margin-right:0px;" type="text" size="2" maxlength="2" id="start_time_hour" name="start_time_hour" value="' + CL.start_time_hour + '" />&nbsp;&nbsp;:&nbsp;<input style="margin-left:0px;" type="text" size="2" maxlength="2" id="start_time_minute" name="start_time_minute" value="' + CL.start_time_minute + '" />&nbsp;<small>(hh:mm)</small><br/><label for="end_time">Eind:</label><input style="cursor:pointer;" type="text" id="end_time" name="end_time" size="10" value="' + CL.end_time_all + '" onclick="CL.showCalendar(\'end_time\', \'' + year + '\', \'' + month + '\');" />&nbsp;&nbsp;<input style="margin-right:0px;" type="text" size="2" maxlength="2" id="end_time_hour" name="end_time_hour" value="' + CL.end_time_hour + '" />&nbsp;&nbsp;:&nbsp;<input style="margin-left:0px;" type="text" size="2" maxlength="2" id="end_time_minute" name="end_time_minute" value="' + CL.end_time_minute + '" />&nbsp;<small>(hh:mm)</small><br/><label for="title">Titel:</label><input id="title" name="title" value="' + CL.eventTitle + '" size="45" type="text"><br/><label for="email">E-mail:</label><input id="email" name="email" value="' + CL.eventEmail + '" size="45" type="text"><br/><label for="showAs">Doel verblijf:</label><select name="interestID" id="interestID">' + interestOptions + '</select><br/><label for="text">Details:</label><textarea cols="35" rows="3" name="text" id="text">' + CL.eventDetails + '</textarea><br/><label for="submit"></label><input name="submit" id="submit" value="Opslaan en sluiten" onclick="CL.storeEvent()" type="submit">';    
    
    return ret;
  },
  
  prepareEventView: function() {
    var ret = '';
    var showAsOptionSelected = '';
    var interestOptionSelected = '';
    
    for( i = 0; i < CL.showAsOptions.length; i++ ) {
      thisOption = CL.showAsOptions[i];
      if( isArray( thisOption ) && thisOption.length > 0 ) {
        if( CL.showAs == thisOption[0] )
          showAsOptionSelected = thisOption[1];
      }
    }
    
    for( i = 0; i < CL.interestOptions.length; i++ ) {
      thisOption = CL.interestOptions[i];
      if( isArray( thisOption ) && thisOption.length > 0 ) {
        if( CL.interestID == thisOption[0] )
          interestOptionSelected = thisOption[1];
      }
    }    
    
    var start_time_time = '';
    var end_time_time   = '';
    
    if( CL.start_time_hour != '' || CL.start_time_minute != '' )
      start_time_time += '&nbsp;&nbsp;' + CL.start_time_hour + ':' + CL.start_time_minute;
    if( CL.end_time_hour != '' || CL.end_time_minute != '' )
      end_time_time += '&nbsp;&nbsp;' + CL.end_time_hour + ':' + CL.end_time_minute;
    
    ret+= '<div class="viewlabel">Status:</div><div class="viewdetail">'      + showAsOptionSelected        + '&nbsp;</div>';
    ret+= '<div class="viewlabel">Start:</div><div class="viewdetail">'       + CL.start_time_all     + '&nbsp;' + start_time_time + '&nbsp;</div>';
    ret+= '<div class="viewlabel">Eind:</div><div class="viewdetail">'        + CL.end_time_all       + '&nbsp;' + end_time_time + '&nbsp;</div>';
    ret+= '<div class="viewlabel">Titel:</div><div class="viewdetail">'       + CL.eventTitle         + '&nbsp;</div>';
    ret+= '<div class="viewlabel">E-mail:</div><div class="viewdetail">'      + CL.eventEmail         + '&nbsp;</div>';
    ret+= '<div class="viewlabel">Doel verblijf:</div><div class="viewdetail">'      + interestOptionSelected         + '&nbsp;</div>';
    ret+= '<div class="viewlabel">Details:</div><div class="viewdetail">'     + CL.eventDetails.replace(/\n/g, "<br />")       + '&nbsp;</div>';
    ret+= '<div class="editdelete"><a href="javascript:CL.handle( \'edit\', ' + CL.calendarActivityID + ');"><img src="if/edit.png" width="16" height="16" alt="edit" style="cursor:pointer;" /></a>&nbsp;&nbsp;<a href="javascript:CL.handle( \'delete\', ' + CL.calendarActivityID + ');"><img src="if/delete.png" width="16" height="16" alt="delete" style="cursor:pointer;" /></a></div>';
    return ret;
  },

  prepareEventDelete: function() {
    var ret = '';
    
    ret+= '<div class="viewdetail">Bent u zeker van het verwijderen van  <b><i>' + CL.eventTitle + '</i></b>?</div>';
    ret+= '<div class="viewdetail"><a href="javascript:CL.handle( \'delete2\', ' + CL.calendarActivityID + ');">Ja</a> | <a href="javascript:CL.handle( \'cancelDelete\', ' + CL.calendarActivityID + ');">Nee</a></div>';
    ret+= '<div class="editdelete">&nbsp;</div>';
    return ret;
  },
  
  resetVars: function() {
    CL.start_time_day   = '';
    CL.start_time_month = '';
    CL.start_time_year  = '';
    CL.start_time_hour  = '';
    CL.start_time_minute = '';
    CL.start_time_all   = '';
    CL.end_time_day     = '';
    CL.end_time_month   = '';
    CL.end_time_year    = '';
    CL.end_time_hour  = '';
    CL.end_time_minute = '';
    CL.end_time_all     = '';
    CL.day_part         = '';
    CL.eventTitle       = '';
    CL.eventDetails     = '';
    CL.eventEmail       = '';
    CL.calendarActivityID = '';
    CL.interestID       = '';
  },
  
  //creates an iframe with size of elm and put's it just below elm to hide window controlled elements
  createShim: function( elm ) {
  	if( elm == null ) return null;
  	
  	var shim = CL.getShim( elm );
    if( shim == null ) {
  	  var shim = document.createElement("<iframe scrolling='no' frameborder='0'" +
                                        "style='position:absolute; top:0px;" +
                                        "left:0px; display:none'></iframe>");
      shim.name = CL.getShimId(elm);
      shim.id   = CL.getShimId(elm);
      //Unremark this line if you need your elm to be transparent for some reason
      shim.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)";
      
      if (elm.offsetParent==null || elm.offsetParent.id=="") {
          window.document.body.appendChild(shim);
      } else {
          elm.offsetParent.appendChild(shim); 
      }
    }

    //Change menu zIndex so shim can work with it
    elm.style.zIndex = 100;
    
    shim.style.width = elm.style.width;
    shim.style.height = '250px';
    
    shim.style.top = elm.style.top;
    shim.style.left = elm.style.left;
    shim.style.zIndex = elm.style.zIndex - 1;
    shim.style.position = "absolute";
    shim.style.display = "block";

  
  },
  
  destroyShim: function( elm ) {
  	if( document.getElementById( CL.getShimId( elm ) ) ) {
      document.getElementsByTagName( 'body' )[0].removeChild( document.getElementById( CL.getShimId( elm ) ) );
    }
    return true;
  },
  
  getShimId: function( elm ) {
    if( elm.id == null ) return "__shim";
    return "__shim" + elm.id;
  },
  
  getShim: function( elm ) {
    return document.getElementById( CL.getShimId( elm ) );
  }  

}