Ext.ns('com.trs.ImageDragger');
/**
*本組件對頁面中的圖片提供了拖動的功能，該功能主要是為了實現類似地圖的拖動效果，
*即：通過拖動圖片，可以將區域外的圖片顯示在當前的區域內部，從而對用戶可見。
*為了使頁面中的圖片支持拖動，需要進行以下步驟：
*	1)引入當前js依賴的基礎js庫﹔
*	2)引入當前的js﹔
*	3)對需要支持拖動的元素添加draggable-image樣式，屬性值可以任意﹔
*	4)對需要支持拖動的元素添加背景圖片樣式，該圖片將作為拖動的圖片﹔
*/
(function(){
	var 
	/**
	*頁面上需要支持圖片拖動的標識樣式，如果存在該class，則該元素將支持拖動
	*/
	className = 'draggable-image',
	/**
	*計算出圖片的原始寬度，並將該寬度設置到元素的屬性上，imageWidth為屬性的名稱
	*/
	imageWidth = 'data-image-width', 
	/**
	*計算出圖片的原始高度，並將該高度設置到元素的屬性上，imageHeight為屬性的名稱
	*/
	imageHeight = 'data-image-height',
	/**
	*從拖動元素的backgroundImage樣式內部反解出來圖片地址的正則
	*/
	backgroundImageReg = /url\((["']*)([^)]*?)\1\)/i;

	com.trs.ImageDragger = function(cfg){
		Ext.apply(this, cfg);
		this.el = $(this.el);
		this.init();
	};

	com.trs.ImageDragger.prototype = {
		init : function(){
			var el = this.el;

			var backgroundImage = el.style.backgroundImage;
			if(!backgroundImage) return;

			//獲取圖片的原始大小，以便拖動時限制圖片的拖動范圍
			var img = new Image();
			img.onload = function(){				
				el.setAttribute(imageWidth, this.width);
				el.setAttribute(imageHeight, this.height);
			};
			img.src = backgroundImage.replace(backgroundImageReg, '$2');

			this.initEvents();
		},
		//private
		initEvents : function(){
			var context = this;
			Event.observe(this.el, 'mousedown', function(event){
				var el = context.el;
				//獲取圖片的初始位置信息
				var position = el.style.backgroundPosition.split(" ");
				var l = parseInt(position[0], 10), t = parseInt(position[1], 10);
				var w = parseInt(el.offsetWidth, 10), h = parseInt(el.offsetHeight, 10);
				var ox = event.pageX || event.clientX, oy = event.pageY || event.clientY;
				
				var drag = function(event){
					var x = event.pageX || event.clientX, y = event.pageY || event.clientY;
					var px=x-ox+l, py=y-oy+t;
					px = Math.min(Math.max(-(el.getAttribute(imageWidth)-w), px), 0);
					py = Math.min(Math.max(-(el.getAttribute(imageHeight)-h), py), 0);
					el.style.backgroundPosition = px+"px " + py + "px";
				}
				var dragStop=function(a){
					if(drag){
						Event.stopObserving(el, 'mousemove', drag, false);
						drag = null;
					}
					if(dragStop){
						Event.stopObserving(el, 'mouseup', dragStop, false);
						dragStop = null;
					}
				};
				Event.observe(el, 'mousemove', drag, false);
				Event.observe(el, 'mouseup', dragStop, false);
				Event.observe(el, 'mouseout', dragStop, false);
			});
		},

		destroy : function(){
			delete this.el;
		}
	};

	DOM.ready(function(){
		var doms = document.getElementsByClassName(className);
		for(var index = 0; index < doms.length; index++){
			new com.trs.ImageDragger({el : doms[index]});
		}
	});
})();