/*
Created by Ari Páll Albertsson - copyright 2007


Example of use:

put in an html page:

<script type="text/javascript">

// creates new modal window (hidden and can be reused many times)
// usually there is only one created on  each page
var modalWin = new modalWindow('modalWin'); 
                                         
// if the modal window should be able to popup another modal window, we create
// it as well and connect to the modal window.
var modalModalWin = new modalWindow('modalModalWin');
modalModalWin.setModalParent(modalWin);
</script>



example to put where a modal window needs to be showned:

// first we set the values to there default (in case we'we used the instance of the
// modal window before.
modalWin.reset();

// we add two buttons to the modal window.
// the first parameter is the id of the button (can be anything, but has to be unique).
// the second id the text to write on the button. The third is what should be done
// when the button is clicked. And the forth parameter says that this button is the
// "main button" and should have the focus when the window is shown. One button in a
// modal window must have the forth paraemter to true (the forth parameter can be skipped
// on windows that do not have the default focus
modalWin.addButton('btnNO','No', 'userePressedNoFunction()',true);
modalWin.addButton('btnYES','Yes', 'userePressedYesFunction()');

// sets the title to have on the modal window
modalWin.setTitle('Confirmation');

// sets the main content of the modal window.
modalWin.setContent('Are you sure you want to do this?');    

// shows the modal window.
modalWin.show();

// if you want to have more or less width than the default you could also call
// setWidth before you call show. For example: modalWin.setWidth(400);
// few other set functions can be called to change things like the background color 
// of the window, changing the font color, setting if the modal window should be
// draggable or not (is default draggable). You can read about these set function
// at the very beginning of the code bellow.

*/



// global variable holding the name of the current open window, the empty string if no window is open.
var gModalWindow_currentlyOpen = '';

// a new modalWindow instance needs to be created globally.
// for example: var modalWin = new modalWindow('modalWin');
function modalWindow($ownName){
 
 // System function...to create set and get function for attributes.
 this.addProperty = function ($name, $value) {
       
       this[$name] = $value;
       
       var $funcName = $name.charAt(0).toUpperCase() + $name.substring(1, $name.length);
       
       this["get" + $funcName] = function () { return this[$name] };
       this["set" + $funcName] = function ($value) {
        this[$name] = $value;
       }; 
   };

  // width is default 250 but can be changes with <instance>.setWidth(<number>);
  // for example modalWin.setWidth(400);
  // calling the reset() function will reset it back to 250;
  this.addProperty('width', 250);
  
  
  // modal window is always default draggable. It can be turned of by calling <instance>.setIsDraggable(false);
  // for example: modalWin.setIsDraggable(false);
  // calling the reset() function wil reset it back to true;
  this.addProperty( 'isDraggable', true);
  
  // sets the title of the modal window. <instance>.setTitle(<title>);
  // for example: modalWin.setTitle('My modal window');
  // calling the reset() function will reset it back to the empty string;
  this.addProperty('title', '');
  
  // sets the content of the modal window. <instance>.setcontent(<content>); 
  // it can contain simple text, but also long html text.
  // for example: modalWin.setContent('This text is the main text of the modal window.');
  // calling the reset() function will reset it back to the empty string;
  this.addProperty('content', '');  
  
  // if a modal window needs to open another modal window, then another instance need to 
  // exist of modalWindow and the parent needs to be added to that. Default it's no modal parent.
  // for example: modalModalWin.setModalParent(modalWin);
  // calling the reset() function WILL NOT break the child/parent chain.
  this.addProperty('modalParent', null);
  
  // since the window can grow down if the content of it is big, the window can be placed 
  // higher or lower on the screen. The default is 85.
  // for example: modalWin.setTopOffset(150);
  // calling the reset() function will reset it back to 85.
  this.addProperty('topOffset', 85);
  
  
  
  // sets the color of the border around the modal window.
  // for example: modalWin.setBorderColor("#FF0000");
  // calling the reset function WILL NOT reset this value.
  this.addProperty('borderColor', "#000063");
  
  // sets the color of the text in the title of the modal window.
  // for example: modalWin.setTitleTextColor("#FF0000");
  // calling the reset function WILL NOT reset this value.
  this.addProperty('titleTextColor', "#000030");
  
  // sets the color of the text of the main text of the modal window.
  // for example: modalWin.setContentTextColor("#FF0000");
  // calling the reset function WILL NOT reset this value.
  this.addProperty('contentTextColor', "#000030");
  
  // sets the background color of the title in the modal window.
  // for example: modalWin.setTitleBackgroundColor("#FF0000");
  // calling the reset function WILL NOT reset this value.
  this.addProperty('titleBackgroundColor', "#fcb040");
  
  // sets the background color of the main content in the modal window.
  // for example: modalWin.setContentBackgroundColor("#FF0000");
  // calling the reset function WILL NOT reset this value.
  this.addProperty('contentBackgroundColor', "#FFFFFF");
  
  // sets the font type of the title in the modal window.
  // for example: modalWin.setTitleFont("Arial");
  // calling the reset function WILL NOT reset this value.
  this.addProperty('titleFont', "Lucida Sans Unicode,impact,arial,sans-serif");
  
  // sets the font type of the main content in the modal window.
  // for example: modalWin.setContentFont("Arial");
  // calling the reset function WILL NOT reset this value.
  this.addProperty('contentFont', "Lucida Sans Unicode,impact,arial,sans-serif");
  
  // sets the font type of the text in the buttons of the modal window.
  // for example: modalWin.setButtonFont("Arial");
  // calling the reset function WILL NOT reset this value.  
  this.addProperty('buttonFont', "Lucida Sans Unicode,impact,arial,sans-serif");
  
  // sets the color of the text in buttons of the modal window.
  // for example: modalWin.setButtonColor("Arial");
  // calling the reset function WILL NOT reset this value.  
  this.addProperty('buttonColor', "#000063");
  
  
  // sets the size of the font in buttons of the modal window.
  // for example: modalWin.setButtonFontSize("20px");
  // calling the reset function WILL NOT reset this value.  
  this.addProperty('buttonFontSize', "11px");
  
  
  // sets the background color of the buttons of the modal window.
  // for example: modalWin.setButtonBackgroundColor("#FF0000");
  // calling the reset function WILL NOT reset this value.  
  this.addProperty('buttonBackgroundColor', "#eeeeee");
  
  
  
  
  
  // private - don't need to change these
  this.addProperty('ownName', $ownName);  // the name of the instance of this object
  this.addProperty('modalWindow', 'ModalWindow_'+$ownName); // the name of the div to use for the main modal window
  this.addProperty('modalWindowBackground', 'ModalWindowBG_'+$ownName); // the name of the background div to use
  this.addProperty('dragHandle', 'dragHandle_'+$ownName);  // name of div having the drag handle
  this.addProperty('dragAlongHandle', 'dragAlongHandle_'+$ownName);  // the name of the div that should be dragged along with the drag handle.
  this.addProperty('zIndex', 101);  // the background div will be zIndex-1 (next child will have zIndex +2 (it's background+1))
  this.addProperty('buttons', ''); // holds buttons that have been added to this modal window
  this.addProperty('focusButtonName', '');  // the name of the button that should have the focus.
  this.addProperty('autoFocusActive', true); // used to temporary disable auto focus of a modal window when another modal window is open in top of this one
  this.privateCanTakeFocus = false; // used to disable temporary auto focus when a speccified field is entered inside the modal div. See the funnction canTakeFocus()
  this._buttonNames = new Array(); // holds the names of all the buttons in this modal window.
  
  
  
  
  // private: creates the divs for this modal window.
  this.createDivs = function(){
  
    // since document.body can be null if the page has not fully loaded, we call
    // this function regually until it has loaded.
    if( document.body == null ){
      setTimeout(this.getOwnName()+'.createDivs()', 35);
      return;
    }
    var d=document.createElement("DIV");
    d.setAttribute('id',this.getModalWindow());
    d.style.display = 'block';
    document.body.appendChild(d);
    
    d=document.createElement("DIV");
    d.setAttribute('id',this.getModalWindowBackground());
    d.style.display = 'block';
    d.onclick = function(){eval($ownName+".setButtonFocus();");};
    document.body.appendChild(d);
  }
  this.createDivs();
	

  // connects this modal window to another modal window (to create modal on top of modal).
  this.setModalParent = function($theParent){
    this.modalParent = $theParent;
    this.setZIndex($theParent.getZIndex()+2);
  }


  // If autofocus is on a element (for example imput field can add <instance>.canTakeFocus() to
  // the onClick event to allow that input field to "steal" the focus.
  // for example: <input type="text" id="someId" onClick="modalWin.canTakeFocus()">
  this.canTakeFocus = function(){
    this.privateCanTakeFocus = true;
  }


  // sets variables to there default again. Should be called in most cases when a modal
  // window is to be shown again.
  this.reset = function(){
    this.setWidth(250);
    this.setButtons("");
    this.setFocusButtonName("");
    this.setTopOffset(85);
    this.setIsDraggable(true);
    this.setTitle("");
    this.setContent("");
    this.setAutoFocusActive(true);
    this.privateCanTakeFocus = false;
    this._buttonNames = new Array();
  };
  
  
  // this function should be called on all elements inside onKeyPress if the modal window 
  // should be closed by the ESC key.
  this.escape = function(e){
    var var_key = e.keyCode || e.wich;
    if (var_key && (var_key == 27)){
      this.hide();
    }
  };
  
  
  // adds a button to the modal window.
  // pName : the name of the button.
  // pText : the text to show on the button.
  // pOnClick : function to call onClick.
  // if the forth parameter is set to true, this button will have the focus when the windows is shown. If 
  // auto focus is on then one button in the modal window must have the forth paraemter.
  this.addButton = function($name, $text, $onClick ){
    this.setButtons(this.getButtons()+'&nbsp;<input type="button" name="'+$name+'" id="'+$name+'" value="'+$text+'" onKeyPress="'+this.getOwnName()+'.escape(event)"; onClick="javascript:'+$onClick+'">&nbsp;');
    if( arguments.length > 3 && arguments[3] == true ){
      this.setFocusButtonName($name);
    }
    this._buttonNames[this._buttonNames.length] = $name;
  };
  
  
  
  
  // private: centers the modal window.
  this.center = function(){

    var div = $('ModalWindow_'+gModalWindow_currentlyOpen);	
    
    eval('div.style.left = Math.max(((getWindowWidth() - div.offsetWidth) / 2)+f_scrollLeft()-('+gModalWindow_currentlyOpen+'.getWidth()/2), 0) + \'px\'');
    eval('div.style.top = Math.max(((getWindowHeight() - div.offsetHeight) / 2)+f_scrollTop()-'+gModalWindow_currentlyOpen+'.getTopOffset(), 0) + \'px\'');;
    
    var divBG = $('ModalWindowBG_'+gModalWindow_currentlyOpen);	
    divBG.style.top = f_scrollTop()+"px";
    divBG.style.left = f_scrollLeft()+"px";
    divBG.style.width = "100%"; 
    divBG.style.height = "100%"; 
  };
  
  
  
  
  // sets the focus to the current button.
  this.setButtonFocus = function(){
  	
    if( !this.privateCanTakeFocus && this.getAutoFocusActive()&&
        $(this.getModalWindow()).style.display == 'block' &&
        this.getFocusButtonName() != ''){
      ($(this.getFocusButtonName())).focus();
    }
    this.privateCanTakeFocus = false;
  };
  
  
  
  // shows the modal window.
  this.show = function(){  


    var mw = $(this.getModalWindow());
    var bg = $(this.getModalWindowBackground());
    
    mw.style.zIndex = this.getZIndex();
    mw.style.position = 'absolute';
    mw.style.display = "none";    
    
    bg.style.zIndex = (this.getZIndex()-1);
    bg.style.position = 'absolute';
    bg.style.backgroundColor= "#222222";
    bg.style.display = "none";    
    bg.style.top = f_scrollTop()+"px";
    bg.style.left = f_scrollLeft()+"px";
    bg.style.width = "100%"; 
    bg.style.height = "100%"; 
    bg.style.opacity = "0.40";
    bg.style.filter = "alpha(opacity=40)";
        
    
         
    
    
    mw.innerHTML = '<div onClick="'+this.getOwnName()+'.setButtonFocus();" style="top:0;left:0;position:absolute;'+(this.getIsDraggable()?"cursor:move;":"")+'" id="'+this.getDragHandle()+'">'+
                   '<table style="border:2px;border-style:solid;border-color:'+this.getBorderColor()+';border-bottom:0px"'+
                   'cellpadding="0" cellspacing="0" width="'+this.getWidth()+'px" border="0">' +
                   '<tr>'+
                   '<td height="21" '+
                   'style="background-color:'+this.getTitleBackgroundColor()+';color:'+this.getTitleTextColor()+
                   ';font-family:'+this.getTitleFont()+';font-size:12px;">'+
                   '&nbsp;'+this.getTitle()+'</td>'+
                   '</tr></table>'+
                   '</div>' +
                   '<div onClick="'+this.getOwnName()+'.setButtonFocus();" style="top:23px;left:0;position:absolute;"'+
                   'id="'+this.getDragAlongHandle()+'">'+
                   '<table cellpadding="0" cellspacing="0" '+
                   'style="background-color:'+this.getContentBackgroundColor()+
                   ';border:2px;border-style:solid;border-color:'+this.getBorderColor()+';" '+
                   'width="'+this.getWidth()+'px" border="0">'+
                   '<tr><td height="10" style="font-size:1px">'+
                   '&nbsp;</td><td style="font-size:1px">&nbsp;</td></tr>'+
                   '<tr><td>&nbsp;</td>'+
                   '<td style="color:'+this.getContentTextColor()+';font-family:'+this.getContentFont()+';font-size:12px;" '+
                   'width="100%" height="*">'+
                   this.getContent()+'<br><br><center>'+this.getButtons()+'</center>'+
                   '</td></tr><tr><td height="10" style="font-size:1px">'+
                   '&nbsp;</td><td style="font-size:1px">&nbsp;</td></tr></table>'+
                   '</div>';
  
    if( this.getIsDraggable() ){
      new this.draggable($(this.getDragHandle()), $(this.getDragAlongHandle()));
    }
  
    gModalWindow_currentlyOpen = this.getOwnName();
    $(this.getModalWindow()).style.display = $(this.getModalWindowBackground()).style.display = 'block';

    for( var i=0; i<this._buttonNames.length; i++){
      var bn = $(this._buttonNames[i]);
      bn.style.color = this.getButtonColor();
      bn.style.fontFamily = this.getButtonFont();
      bn.style.fontSize = this.getButtonFontSize();
      bn.style.background = this.getButtonBackgroundColor();
    }

 
    this.center();
    
    if( this.getModalParent() != null ){
      	var str = new String(this.getModalParent().getOwnName());
      	eval(str+'.setAutoFocusActive(false)');
    }

    this.setButtonFocus();
    window.onscroll=this.center;
  };
  
  
  
  
  
  // shows this modal window as a toolTip!
  // if buttons have been added to this modal window, they are skipped.
  // pElementId: the id of the element showing the tooltip
  // pLeftOrRight: should the tooltip be showned to the right or the left of the element with the id pElementId
  // for example: modalWin.showAsToolTip(this.id, 'right');
  this.showAsToolTip = function(pElementId, pLeftOrRight){

    var mw = $(this.getModalWindow());
   
    mw.style.zIndex = this.getZIndex();
    mw.style.position = 'fixed';
    mw.style.display = "none";    
    var X;
    var Y;
    if( IE ){
      getMouseXY();
      X = mouseX;
      Y = mouseY;
    }
    else{
      X = mouseX-f_scrollLeft();
      Y = mouseY-f_scrollTop();
    }
   /* alert('mouseX: '+mouseX + '   mouseY: '+mouseY );
    alert('f_scrollLeft: '+f_scrollLeft() + '   f_scrollTop: '+f_scrollTop() );*/
    
    
    if( pLeftOrRight.toUpperCase() == 'LEFT' ){
      X -= this.getWidth()+20;
    } 
  
    mw.style.left = X + 'px';
    mw.style.top = Y + 'px';
    

    mw.innerHTML = '<div style="top:'+(Y-20)+'px;left:'+(X+10)+'px;position:fixed;">'+
                   '<table style="border:2px;border-style:solid;border-color:'+this.getBorderColor()+';border-bottom:0px" '+
                   'cellpadding="0" cellspacing="0" width="'+this.getWidth()+'px" border="0">' +
                   '<tr>'+
                   '<td height="21" '+
                   'style="background-color:'+this.getTitleBackgroundColor()+';color:'+this.getTitleTextColor()+
                   ';font-family:'+this.getTitleFont()+';font-size:12px;">'+
                   '&nbsp;'+this.getTitle()+'</td>'+
                   '</tr></table>'+
                   '</div>' +
                   '<div style="top:'+(Y+23-20)+'px;left:'+(X+10)+'px;position:fixed;">'+
                   '<table cellpadding="0" cellspacing="0" '+
                   'style="background-color:'+this.getContentBackgroundColor()+
                   ';border:2px;border-style:solid;border-color:'+this.getBorderColor()+';" '+
                   'width="'+this.getWidth()+'px" border="0">'+
                   '<tr><td colspan="3" height="10" style="font-size:1px">'+
                   '&nbsp;</td></tr>'+
                   '<tr><td>&nbsp;</td>'+
                   '<td style="color:'+this.getContentTextColor()+';font-family:'+this.getContentFont()+';font-size:12px;" '+
                   'width="100%" height="*">'+
                   this.getContent()+'<br>'+
                   '</td><td>&nbsp;</td></tr><tr><td colspan="3" height="10" style="font-size:1px">'+
                   '&nbsp;</td></tr></table>'+
                   '</div>';
    

    /*if( pLeftOrRight.toUpperCase() == 'RIGHT' ){
      mw.style.left = (findPosX($(pElementId))+($(pElementId)).offsetWidth+10) +'px';
    } 
    else{
      mw.style.left = (findPosX($(pElementId))-this.getWidth()-10) +'px';
    }*/
    //mw.style.top = (findPosY($(pElementId))-this.getTopOffset()/2) +'px';    
    
    gModalWindow_currentlyOpen = this.getOwnName();
    $(this.getModalWindow()).style.display = 'block';

  };
  
  
  // shows this modal window as a toolTip!
  // if buttons have been added to this modal window, they are skipped.
  // pElementId: the id of the element showing the tooltip
  // pLeftOrRight: should the tooltip be showned to the right or the left of the element with the id pElementId
  // for example: modalWin.showAsToolTip(this.id, 'right');
  this.showAsToolTipElementAlign = function(pElementId, pLeftOrRight){

    var mw = $(this.getModalWindow());
   
    mw.style.zIndex = this.getZIndex();
    mw.style.position = 'absolute';
    mw.style.display = "none";    

    mw.innerHTML = 
                   '<div style="top:42px;left:-8px;position:absolute;">'+
                   '<table cellpadding="0" cellspacing="0" '+
                   'style="background-color:'+this.getContentBackgroundColor()+
                   ';border:2px;border-style:solid;border-color:'+this.getBorderColor()+';" '+
                   'width="'+this.getWidth()+'px" border="0">'+
                   '<tr><td colspan="3" height="10" style="font-size:1px">'+
                   '&nbsp;</td></tr>'+
                   '<tr><td>&nbsp;</td>'+
                   '<td style="color:'+this.getContentTextColor()+';font-family:'+this.getContentFont()+';font-size:12px;" '+
                   'width="100%" height="*">'+
                   this.getContent()+'<br>'+
                   '</td><td>&nbsp;</td></tr><tr><td colspan="3" height="10" style="font-size:1px">'+
                   '&nbsp;</td></tr></table>'+
                   '</div>';
    

    if( pLeftOrRight.toUpperCase() == 'RIGHT' ){
      mw.style.left = (findPosX($(pElementId))+($(pElementId)).offsetWidth+10) +'px';
    } 
    else{
      mw.style.left = (findPosX($(pElementId))-this.getWidth()-10) +'px';
    }
    mw.style.top = (findPosY($(pElementId))-this.getTopOffset()/2) +'px';    
    
    gModalWindow_currentlyOpen = this.getOwnName();
    $(this.getModalWindow()).style.display = 'block';

  };
  
  

  // quick way to create a tooltip in a modal window and show it.
  // pId: the id of the element showing the tooltip
  // pTitle: the title to have on the tooltip.
  // pContent: the main content to have in the tooltip.
  // pLeftOrRight: should the tooltip be showned to the right or the left of the element with the id pId
  // for example: <img id="tipId" src="tooltip.gif" onmouseover="modalWin.createQuickToolTip(this.id, 'My title', 'my content', 'right');" onmouseout="modalWin.hide()">
  this.createQuickToolTip = function(pId, pTitle, pContent, pLeftOrRight){
    this.reset();
    this.setTitle(pTitle);
    this.setContent(pContent);
    this.showAsToolTip(pId,pLeftOrRight);
  }
  
  this.createQuickToolTipElementAlign = function(pId, pTitle, pContent, pLeftOrRight){
    this.reset();    
    this.addProperty('contentBackgroundColor', "#fcb040");
    this.setWidth(220);
    this.setTitle(pTitle);
    this.setContent(pContent);
    this.showAsToolTipElementAlign(pId,pLeftOrRight);
    this.addProperty('contentBackgroundColor', "#F8F8FF");
  }
  
  this.createQuickToolTipElementAlign2 = function(pId, pTitle, pContent, pLeftOrRight){
    this.reset();    
    this.addProperty('contentBackgroundColor', "#9bcce4");
    this.setWidth(220);
    this.setTitle(pTitle);
    this.setContent(pContent);
    this.showAsToolTipElementAlign(pId,pLeftOrRight);
    this.addProperty('contentBackgroundColor', "#F8F8FF");
  }
  
  this.createQuickToolTipElementAlignP = function(pId, pTitle, pContent, pLeftOrRight){
    this.reset();    
    this.addProperty('contentBackgroundColor', "#4090fc");
    this.setWidth(220);
    this.setTitle(pTitle);
    this.setContent(pContent);
    this.showAsToolTipElementAlign(pId,pLeftOrRight);
    this.addProperty('contentBackgroundColor', "#F8F8FF");
  }
  
  
  // quick way to create alert box with one OK button.
  // pTitle: the title to have on the alert.
  // pContent: the main content to have in the alert.
  // pFocus: optional parameter, if it's set this element will get the focus after OK is pressed. 
  //         should be set as '' if width need to be specified and no focus.
  // pWidth: optional parameter, if it's set this element will get the focus after OK is pressed.
  // for example: modalWin.createAlert('My title', 'my content');">
  this.createAlert = function(pTitle, pContent, pFocus, pWidth){
    this.reset();
    this.setAutoFocusActive(false);
    var focusField = '';
    if( arguments.length > 2 ){
      if( arguments[2].length > 0){
        focusField = '($(\''+arguments[2]+'\')).focus();';
      }
      if( arguments.length > 3 ){
        this.setWidth(pWidth);
      }
    }
    this.addButton('btnOK','OK', this.getOwnName()+'.hide();'+focusField, true);
    this.setTitle(pTitle);
    this.setContent(pContent);    
    this.show();
    setTimeout(this.getOwnName()+'.setAutoFocusActive(true);'+this.getOwnName()+'.setFocusButtonName(\'btnOK\');'+this.getOwnName()+'.setButtonFocus();',35);
  };
  
  
  // hides this modal window.
  this.hide = function(){
  	if( this.getModalParent() != null ){
      	var str = new String(this.getModalParent().getOwnName());
      	eval(str+'.setAutoFocusActive(true)');
      	eval(str+'.setButtonFocus()');
      }
    $(this.getModalWindow()).style.display = $(this.getModalWindowBackground()).style.display = 'none';
    window.onscroll=null;
    gModalWindow_currentlyOpen = '';
  };
  


  // create the drag object for this modal window.
  this.draggable = function($drag, $dragAlong){
    var $deltaX = 0;
    var $deltaY = 0;
    var $startX = 0;
    var $startY = 0;

    // remove the events
    function enddrag(){
      document.onmouseup = null;
      document.onmousemove = null;
    };

    
    function drag(e){
      e = e || window.event;
      $deltaX = $startX - parseInt(e.clientX);
      $deltaY = $startY - parseInt(e.clientY);
      $startX = parseInt(e.clientX);
      $startY = parseInt(e.clientY);
      $drag.style.top = (parseInt($drag.style.top) - $deltaY) + 'px';
      $drag.style.left = (parseInt($drag.style.left) - $deltaX) + 'px';
      if($dragAlong != null ){
        $dragAlong.style.top = (parseInt($dragAlong.style.top) - $deltaY) + 'px';
        $dragAlong.style.left = (parseInt($dragAlong.style.left) - $deltaX) + 'px';
      } 
    };

    
    this.draggableMouseDown = function(e){
      e = e || window.event;
      $startX = parseInt(e.clientX);
      $startY = parseInt(e.clientY);
      document.onmouseup = enddrag;
      document.onmousemove = drag;
    };

    $drag.onmousedown = this.draggableMouseDown;
  };
  
  
 
  
};