/****************************************************************
Drag Classes - Copyright by Simon Käser
endlessx.com || admin@endlessx.com
this code could be used freely, as long as this message is
intact!

Modified by Sebastian Brink:
- cleaned the JavaScript
- container can now be inside other elemtents
- some other stuff
****************************************************************/

var check=( document &&
            document.getElementById  &&
            document.getElementsByTagName );

if(check)
{

        var drag_elm=false;
        var temp=document.onselectstart;

        document.getElementsByClassName=function(cls)
        {
                var arr=[];
                var n=document.getElementsByTagName('div').length;
                for(var x=0; x<n; x+=1)
                {
                        var ncls=document.getElementsByTagName('div')[x].className;
                        var nclsa=ncls.split(' ');
                        for(var y in nclsa)
                        {
                                ncls=nclsa[y];
                                if( ncls == cls ) {
                                   arr[ arr.length ]=document.getElementsByTagName( 'div' )[ x ];
                                }
                        }
                }
                return arr;
        };

		function findPos(obj)
		{
			var curleft = curtop = 0;
			if (obj.offsetParent) {
				curleft = obj.offsetLeft
				curtop = obj.offsetTop
				while (obj = obj.offsetParent) {
					curleft += obj.offsetLeft
					curtop += obj.offsetTop
				}
			}
			return [curleft,curtop];
		}

        function checkover( elm, mx, my )
        {
                if( elm.parentNode.className == 'container' )
                {
						var offset = findPos(elm.parentNode);
						mx-=(offset[0] - elm.parentNode.offsetLeft);
						my-=(offset[1] - elm.parentNode.offsetTop);
                }

                if( mx > elm.offsetLeft  &&
                    mx < elm.offsetLeft + elm.offsetWidth &&
                    my > elm.offsetTop &&
                    my < elm.offsetTop + elm.offsetHeight ) {
						return true;
                } else {
                        return false;
                }
        }

		function getScreenSize() {
			// get screen size
			var x = y = 0;
			if (self.innerHeight) // all except Explorer
			{
				x = self.innerWidth;
				y = self.innerHeight;
			}
			else if (document.documentElement && document.documentElement.clientHeight)
				// Explorer 6 Strict Mode
			{
				x = document.documentElement.clientWidth;
				y = document.documentElement.clientHeight;
			}
			else if (document.body) // other Explorers
			{
				x = document.body.clientWidth;
				y = document.body.clientHeight;
			}
		
			return [x,y];
		}

        document.onmousedown=function( e )
        {
	        drag_elm=false;
	
			// fix for IE (without support for scrolling windows)
	        //var mx=window.event ? event.x : e.pageX;
	        //var my=window.event ? event.y : e.pageY;
			var posx = 0;
			var posy = 0;
			if (!e) var e = window.event;
			if (e.pageX || e.pageY) {
				mx = e.pageX;
				my = e.pageY;
			}
			else if (e.clientX || e.clientY) {
				mx = e.clientX;
				my = e.clientY;
			}
	
	        var drs=document.getElementsByClassName( 'drag' );
	        var n=drs.length;
	        for(var x=(n-1); x>=0 ;x-=1)
	        {
	                var elm=drs[ x ];
	                if( checkover( elm, mx, my ) )
	                {
                        document.onselectstart=function(){ return false; };
                        drag_elm=elm;
                        drag_elm.dx=mx - elm.offsetLeft + elm.parentNode.offsetLeft;
                        drag_elm.dy=my - elm.offsetTop + elm.parentNode.offsetTop;
                        drag_elm.ex=false;
                        drag_elm.ey=false;

                        if( elm.parentNode.className == 'container' )
                        {
                        	drag_elm.ex=elm.parentNode.offsetWidth - elm.offsetWidth;
                        	drag_elm.ey=elm.parentNode.offsetHeight - elm.offsetHeight;
                        }
                        return drag_elm;
	                }
	        }
        };

        document.onmouseup=function( e )
        {
                drag_elm=false;
                document.onselectstart=temp;
        };

        document.onmousemove=function( e )
        {
				// fix for IE (without support for scrolling windows)
		        //var mx=window.event ? event.x : e.pageX;
		        //var my=window.event ? event.y : e.pageY;
				var posx = 0;
				var posy = 0;
				if (!e) var e = window.event;
				if (e.pageX || e.pageY) {
					mx = e.pageX;
					my = e.pageY;
				}
				else if (e.clientX || e.clientY) {
					mx = e.clientX;
					my = e.clientY;
				}
	
                if( drag_elm )
                {
                        var x=mx - drag_elm.dx;
                        var y=my - drag_elm.dy;
                        if( drag_elm.ex )
                        {
                                if( mx - drag_elm.dx > drag_elm.ex ) {
                                        x=drag_elm.ex;
                                }
                                if( mx - drag_elm.dx < 0 ) {
                                        x=0;
                                }
                                if( my - drag_elm.dy > drag_elm.ey ) {
                                        y=drag_elm.ey;
                                }
                                if( my - drag_elm.dy < 0 ) {
                                        y=0;
                                }
                        }
                        drag_elm.style.left=x + "px";
                        drag_elm.style.top=y + "px";
						
						var multiTop = parseInt(Element.getStyle('map_large', 'height')) / parseInt(Element.getStyle('map_small', 'height'));
						var multiLeft = parseInt(Element.getStyle('map_large', 'width')) / parseInt(Element.getStyle('map_small', 'width'));
						
						var newMarginTop = '-' + Math.round(y*multiTop) + 'px';
						var newMarginLeft = '-' + Math.round(x*multiLeft) + 'px';
						
						var screensize = getScreenSize();

						if(Math.round(y*multiTop) >= (parseInt(Element.getStyle('map_large', 'height')) - screensize[1])) {
							newMarginTop = '-' + (parseInt(Element.getStyle('map_large', 'height')) - screensize[1]) + 'px';
						}
						if(Math.round(x*multiLeft) >= (parseInt(Element.getStyle('map_large', 'width')) - screensize[0])) {
							newMarginLeft = '-' + (parseInt(Element.getStyle('map_large', 'width')) - screensize[0]) + 'px';
						}

						Element.setStyle('map_large', {marginTop: newMarginTop});
						Element.setStyle('map_large', {marginLeft: newMarginLeft});
                }
        };
}