/************************************************************
                    Dragable layer creator
               By Mark Wilton-Jones 14/10/2002
     v1.0.1 updated 7/12/2003 for strict doctype bug fix
*************************************************************

Please see http://www.howtocreate.co.uk/jslibs/ for details and a demo of this script
Please see http://www.howtocreate.co.uk/jslibs/termsOfUse.html for terms of use

To use:

Inbetween the <head> tags, put:

	<script src="PATH TO SCRIPT/draglayer.js" type="text/javascript" language="javascript1.2"></script>

To create a dragable layer put:

	<script type="text/javascript" language="javascript1.2"><!--
		createDragableLayer(
			'This layer is dragable', //contents of dragable layer (can contain HTML etc.)
			10,                       //left coordinate of dragable layer
			100,                      //top coordinate of dragable layer
			150,                      //width of dragable layer
			30,                       //optional: height of dragable layer (use null for default)
			'#ff0000'                 //optional: background colour of dragable layer (use null for default)
		);
	//--></script>
___________________________________________________________________________________________*/
function createDragableLayer_2(lID, layerContent,leftPos,topPos,layerWidth,layerHeight,layerBG) {
	if( document.layers ) {
		return '<layer id ='+ lID + ' left="'+leftPos+'" top="'+topPos+'" width="'+layerWidth+'" '+(layerHeight?('height="'+layerHeight+'" '):'')+(layerBG?('bgcolor="'+layerBG+'" '):'')+'onmouseover="this.captureEvents(Event.MOUSEDOWN);this.onmousedown=dragIsDown;">'+layerContent+'</layer>' ;
	} else {
		return '<div id = '+ lID + ' style="border-style:solid;border-width:0;position:absolute;left:'+leftPos+'px;top:'+topPos+'px;width:'+layerWidth+'px;'+(layerHeight?('height:'+layerHeight+'px;'):'')+(layerBG?('background-color:'+layerBG+';'):'')+'" onmouseover="this.onmousedown=dragIsDown;" ondragstart="return false;" onselectstart="return false;">'+layerContent+'</div>';
	}
}
function createDragableLayer(lID, layerContent,leftPos,topPos,layerWidth,layerHeight,layerBGx) {
	if( document.layers ) {
		document.write( '<layer id ='+ lID + ' left="'+leftPos+'" top="'+topPos+'" width="'+layerWidth+'" '+(layerHeight?('height="'+layerHeight+'" '):'')+(layerBG?('bgcolor="'+layerBG+'" '):'')+'onmouseover="this.captureEvents(Event.MOUSEDOWN);this.onmousedown=dragIsDown;">'+layerContent+'</layer>' );
	} else {
		document.write( '<div id = '+ lID + ' style="border-style:solid;border-width:0;position:absolute;left:'+leftPos+'px;top:'+topPos+'px;width:'+layerWidth+'px;'+(layerHeight?('height:'+layerHeight+'px;'):'')+(layerBG?('background-color:'+layerBG+';'):'')+'" onmouseover="this.onmousedown=dragIsDown;" ondragstart="return false;" onselectstart="return false;">'+layerContent+'</div>' );
	}
}

function createDragableLayer1(layerContent,leftPos,topPos,layerWidth,layerHeight,layerBG) {
	if( document.layers ) {
		document.write( '<layer left="'+leftPos+'" top="'+topPos+'" width="'+layerWidth+'" '+(layerHeight?('height="'+layerHeight+'" '):'')+(layerBG?('bgcolor="'+layerBG+'" '):'')+'onmouseover="this.captureEvents(Event.MOUSEDOWN);this.onmousedown=dragIsDown;">'+layerContent+'</layer>' );
	} else {
		document.write( '<div style="border-style:solid;border-width:1;position:absolute;left:'+leftPos+'px;top:'+topPos+'px;width:'+layerWidth+'px;'+(layerHeight?('height:'+layerHeight+'px;'):'')+(layerBG?('background-color:'+layerBG+';'):'')+'" onmouseover="this.onmousedown=dragIsDown;" ondragstart="return false;" onselectstart="return false;">'+layerContent+'</div>' );
	}
}
function createDragableRule(layerContent,leftPos,topPos,layerWidth,layerHeight,layerBG) {
	if( document.layers ) {
		document.write( '<layer left="'+leftPos+'" top="'+topPos+'" width="'+layerWidth+'" '+(layerHeight?('height="'+layerHeight+'" '):'')+(layerBG?('bgcolor="'+layerBG+'" '):'')+'onmouseover="this.captureEvents(Event.MOUSEDOWN);this.onmousedown=dragIsDown;">'+layerContent+'</layer>' );
	} else {
		document.write( '<div style="border-style:solid;border-width:0;position:absolute;left:'+leftPos+'px;top:'+topPos+'px;width:'+layerWidth+'px;'+(layerHeight?('height:'+layerHeight+'px;'):'')+(layerBG?('background-color:'+layerBG+';'):'')+'" onmouseover="this.onmousedown=dragIsDown;" ondragstart="return false;" onselectstart="return false;">'+layerContent+'</div>' );
	}
}
function createDragableRule1(layerContent,leftPos,topPos,layerWidth,layerHeight,layerBG) {
	if( document.layers ) {
		document.write( '<layer left="'+leftPos+'" top="'+topPos+'" width="'+layerWidth+'" '+(layerHeight?('height="'+layerHeight+'" '):'')+(layerBG?('bgcolor="'+layerBG+'" '):'')+'onmouseover="this.captureEvents(Event.MOUSEDOWN);this.onmousedown=dragIsDown;">'+layerContent+'</layer>' );
	} else {
		document.write( '<div style="border-style:solid;border-width:0;position:absolute;left:'+leftPos+'px;top:'+topPos+'px;width:'+layerWidth+'px;'+(layerHeight?('height:'+layerHeight+'px;'):'')+(layerBG?('background-color:'+layerBG+';'):'')+'" onmouseover="this.onmousedown=dragIsDown;" ondragstart="return false;" onselectstart="return false;">'+layerContent+'</div>' );
	}
}
function createDragableDLG(layerContent,leftPos,topPos,layerWidth,layerHeight,layerBG) {
	if( document.layers ) {
		document.write( '<layer left="'+leftPos+'" top="'+topPos+'" width="'+layerWidth+'" '+(layerHeight?('height="'+layerHeight+'" '):'')+(layerBG?('bgcolor="'+layerBG+'" '):'')+'onmouseover="this.captureEvents(Event.MOUSEDOWN);this.onmousedown=dragIsDown;">'+layerContent+'</layer>' );
	} else {
		document.write( '<div style="background-color:#cccccc;border-left-width:1px; border-left-color:#ffffff;border-top-width:1px; border-top-color:#ffffff;border-bottom-width:1px;border-right-width:1px;border-right-color:#666666; border-right-style:solid;border-style:solid; font-size:10px; font-weight:normal;  font-family:Verdana, Arial, Helvetica, sans-serif; position:absolute;left:'+leftPos+'px;top:'+topPos+'px;width:'+layerWidth+'px;'+(layerHeight?('height:'+layerHeight+'px;'):'')+(layerBG?('background-color:'+layerBG+';'):'')+'" onmouseover="this.onmousedown=dragIsDown;" ondragstart="return false;" onselectstart="return false;">'+layerContent+'</div>' );
	}
}
function dragMousePos(e) {
	//get the position of the mouse
	if( !e ) { e = window.event; } if( !e || ( typeof( e.pageX ) != 'number' && typeof( e.clientX ) != 'number' ) ) { return [0,0]; }
	if( typeof( e.pageX ) == 'number' ) { 
		var xcoord = e.pageX; var ycoord = e.pageY; } 
	else {
		var xcoord = e.clientX; 
		var ycoord = e.clientY;
		if( !( ( window.navigator.userAgent.indexOf( 'Opera' ) + 1 ) || ( window.ScriptEngine && ScriptEngine().indexOf( 'InScript' ) + 1 ) || window.navigator.vendor == 'KDE' ) ) {
			if( document.documentElement && ( document.documentElement.scrollTop || document.documentElement.scrollLeft ) ) {
				xcoord += document.documentElement.scrollLeft; //ycoord += document.documentElement.scrollTop;
			} else if( document.body && ( document.body.scrollTop || document.body.scrollLeft ) ) {
				xcoord += document.body.scrollLeft;// ycoord += document.body.scrollTop; 
			} 
		} 
	}
	return [xcoord,ycoord];
}

function dragIsDown(e) {
	//make note of starting positions and detect mouse movements
	if( ( e && ( e.which > 1 || e.button > 1 ) ) || ( window.event && ( window.event.which > 1 || window.event.button > 1 ) ) ) { return false; }
	window.msStartCoord = dragMousePos(e); window.lyStartCoord = this.style?[parseInt(this.style.left),parseInt(this.style.top)]:[parseInt(this.left),parseInt(this.top)];
	if( document.captureEvents && Event.MOUSEMOVE ) { document.captureEvents(Event.MOUSEMOVE); document.captureEvents(Event.MOUSEUP); }
	window.storeMOUSEMOVE = document.onmousemove; window.storeMOUSEUP = document.onmouseup; window.storeLayer = this;
	document.onmousemove = dragIsMove; document.onmouseup = dragIsMove; return false;
}

function dragIsMove(e) {
	//move the layer to its newest position
	var msMvCo = dragMousePos(e); 
	if( !e ) { 
		e = window.event ? window.event : ( new Object() );
	}
	var newX = window.lyStartCoord[0] + ( msMvCo[0] - window.msStartCoord[0] );
	/// fixed y position from start
	var newY = window.lyStartCoord[1];// + ( msMvCo[1] - window.msStartCoord[1] );
	//reset the mouse monitoring as before - delay needed by Gecko to stop jerky response (hence two functions instead of one)
	//as long as the Gecko user does not release one layer then click on another within 1ms (!) this will cause no problems
	if( e.type && e.type.toLowerCase() == 'mouseup' ) { 
		document.onmousemove = storeMOUSEMOVE; 
		document.onmouseup = window.storeMOUSEUP; 
		
			document.body.style.cursor = 'wait';
            var t=setTimeout("update_scatterplot()",10);
		
	}else{
	
	    if ( slider_flag == 0 )
		{
			if (newX >=0  && newX <slider_flag_x ) /// the range of max and min X for icon to move, icon width is 30
			{
				setDaysByX(newX);
			} 
		}else{
			if (newX >slider_flag_x  && newX < 300 ) /// the range of max and min X for icon to move, icon width is 30
			{
				setDaysByX(newX);
			}  
		}
	    
	}
	if( navigator.product == 'Gecko' ) { 
		window.setTimeout('dragIsMove2('+newX+','+newY+');',1);
	} 
	else { 
		dragIsMove2(newX,newY); 
	}
}

function dragIsMove2(x,y) { 
	var oPix = ( document.childNodes ? 'px' : 0 ), theLayer = ( window.storeLayer.style ? window.storeLayer.style : window.storeLayer ); 
	
	if ( slider_flag == 0 )
	{
		if (x >-10  && x <slider_flag_x -10) /// the range of max and min X for icon to move, icon width is 30
		{
			theLayer.left = x + oPix; theLayer.top = y + oPix; 
		} 
         
    }else{
		if (x >slider_flag_x +5 && x < 300 ) /// the range of max and min X for icon to move, icon width is 30
		{
			theLayer.left = x + oPix; theLayer.top = y + oPix; 
		}  
    }
}