var Drag = {



	obj : null,



	init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)

	{

		o.onmousedown	= Drag.start;



		o.hmode			= bSwapHorzRef ? false : true ;

		o.vmode			= bSwapVertRef ? false : true ;



		o.root = oRoot && oRoot != null ? oRoot : o ;



		if (o.hmode  && isNaN(parseInt(o.root.style.left  ))) o.root.style.left   = "0px";

		if (o.vmode  && isNaN(parseInt(o.root.style.top   ))) o.root.style.top    = "0px";

		if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right  = "0px";

		if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";



		o.minX	= typeof minX != 'undefined' ? minX : null;

		o.minY	= typeof minY != 'undefined' ? minY : null;

		o.maxX	= typeof maxX != 'undefined' ? maxX : null;

		o.maxY	= typeof maxY != 'undefined' ? maxY : null;



		o.xMapper = fXMapper ? fXMapper : null;

		o.yMapper = fYMapper ? fYMapper : null;



		o.root.onDragStart	= new Function();

		o.root.onDragEnd	= new Function();

		o.root.onDrag		= new Function();

	},



	start : function(e)

	{

		var o = Drag.obj = this;

		e = Drag.fixE(e);

		var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);

		var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );

		o.root.onDragStart(x, y);



		o.lastMouseX	= e.clientX;

		o.lastMouseY	= e.clientY;



		if (o.hmode) {

			if (o.minX != null)	o.minMouseX	= e.clientX - x + o.minX;

			if (o.maxX != null)	o.maxMouseX	= o.minMouseX + o.maxX - o.minX;

		} else {

			if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;

			if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;

		}



		if (o.vmode) {

			if (o.minY != null)	o.minMouseY	= e.clientY - y + o.minY;

			if (o.maxY != null)	o.maxMouseY	= o.minMouseY + o.maxY - o.minY;

		} else {

			if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;

			if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;

		}



		document.onmousemove	= Drag.drag;

		document.onmouseup		= Drag.end;



		return false;

	},



	drag : function(e)

	{

		e = Drag.fixE(e);

		var o = Drag.obj;



		var ey	= e.clientY;

		var ex	= e.clientX;

		var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);

		var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );

		var nx, ny;



		if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);

		if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);

		if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);

		if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);



		nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));

		ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));



		if (o.xMapper)		nx = o.xMapper(y)

		else if (o.yMapper)	ny = o.yMapper(x)



		Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";

		Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";

		Drag.obj.lastMouseX	= ex;

		Drag.obj.lastMouseY	= ey;



		Drag.obj.root.onDrag(nx, ny);

		return false;

	},



	end : function()

	{

		document.onmousemove = null;

		document.onmouseup   = null;

		Drag.obj.root.onDragEnd(	parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]), 

									parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));

		Drag.obj = null;

	},



	fixE : function(e)

	{

		if (typeof e == 'undefined') e = window.event;

		if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;

		if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;

		return e;

	}

};



function Slide_change_page(id, page) {

	try{

		eval("var curr_page = " + id + "_curr_page;");

		eval("var total_page = " + id + "_total_page;");

		

		// chuyen style cua link page

		for(var i=1;i <= total_page;i++) {

			if ($ele(id + "_page1_" + i)) 

				$ele(id + "_page1_" + i).className='normal';

			

			if ($ele(id + "_page2_" + i)) 

				$ele(id + "_page2_" + i).className='normal';

		}	

		

		// Chuyen style page moi

		if ($ele(id + "_page1_" + page)) 

			$ele(id + "_page1_" + page).className='selected';

		if ($ele(id + "_page2_" + page)) 

			$ele(id + "_page2_" + page).className='selected';

		

		//update vi tri contro

		var dv = aSelect1.offsetWidth / total_page;		// don vi cho 1 trang

		var d1 = dv * page;

		

		var d2 = d1 + parseInt(aSelect1.style.left);

		

		// if page is outside (right) display zone

		if (d2 > aZone12.offsetWidth) {

			//Move display zone to the left:

			var k = parseInt(aZone12.offsetWidth/2 - d1);

			

			Move_slide("aSelect1", k);

			Move_slide("aSelect2", k);

			

			Move_slide("aThumb1", -k);	

			Move_slide("aThumb2", -k);		

			

		}else if (d2 < 0)  {	// page is outside (left) dispplay zone

			//Move display zone to the right:

			

			Move_slide("aSelect1", -d1);

			Move_slide("aSelect2", -d1);

			

			Move_slide("aThumb1", -d1);	

			Move_slide("aThumb2", -d1);	

			

			//aSelect1.style.left = d1 * (-1) + "px";

		}else {		//page is inside display zone

			

		}

	/*	if () {

			 && ((page-1) * dv )) {

		 	

		 	aSelect1.style.left= (page-1) * dv * (-1) +"px";	

		}*/

	}catch(ex) {

		alert(ex.message);

	}

	return false;

}	



function Move_slide( obj, new_pos, detla) {

	if (typeof delta == 'undefined') {

		var delta = 2;

	}



	eval("var p = " + obj + ";");

	var pos = parseInt(p.style.left);

	var d = new_pos - pos;

	

	if (d && ( Math.abs(d) > delta) ) {

		if (d > 0) {

			p.style.left = pos + delta + "px";

		}else p.style.left = pos - delta + "px";

		

		setTimeout("Move_slide('" + obj + "'," + new_pos + "," + (delta+1) + ");", 20);

	}

	

}

// Use when click back/forward button

function Update_page_navigator(id) {

	eval("var curr_page = " + id + "_curr_page;");

	Slide_change_page(id, curr_page, false)

}

/**************************************************

 * dom-drag.js

 * 09.25.2001

 * www.youngpup.net

 * Script featured on Dynamic Drive (http://www.dynamicdrive.com) 12.08.2005

 **************************************************

 * 10.28.2001 - fixed minor bug where events

 * sometimes fired off the handle, not the root.

 **************************************************/



function Page_slide_init() {

	

	if (aZone21.offsetWidth > aSelect1.offsetWidth ) {

		aZone21.style.width = aSelect1.offsetWidth + "px";

		aZone22.style.width = aSelect1.offsetWidth + "px";

		

		aZone11.style.width = aSelect1.offsetWidth + 60 + "px";

		aZone12.style.width = aSelect1.offsetWidth + 60 + "px";

	}

	if (aZone21.offsetHeight > aSelect1.offsetHeight) {

		aZone21.style.height = aSelect1.offsetHeight + "px";	

		aZone22.style.height = aSelect1.offsetHeight + "px";

		

		aZone11.style.height = aSelect1.offsetHeight + "px";	

		aZone12.style.height = aSelect1.offsetHeight + "px";			

	}



	Drag.init(aThumb1, null, 0, aZone21.offsetWidth, 0, 0);

	Drag.init(aThumb2, null, 0, aZone22.offsetWidth, 0, 0);

	

	aThumb1.onDrag = function(x, y) {

		if (aSelect1)

	 		aSelect1.style.left=x * (-1) +"px";

	 	if (aSelect2)

	 		aSelect2.style.left=x * (-1) +"px";	

	 	

	 	aThumb2.style.left = x + "px";

	}

	aThumb2.onDrag = function(x, y) {		

		if (aSelect2)

	 		aSelect2.style.left=x * (-1) +"px";

	 	if (aSelect1)

	 		aSelect1.style.left=x * (-1) +"px";	

	 	aThumb1.style.left = x + "px";	

	}

	

	

}