var pic_view = {
	view_width:		400,		// 预览框的宽度
	view_height:	200,		// 预览框的高度
	view_border:    5,			// 预览框的边框厚度

	source_param:	"hiRes", // 原图地址的属性名称

	// 下面的是私有变量, 由程序自动管理
	window_width:	0, // 移动框的宽度
	window_height:  0, // 移动框的高度

	source_width:	0, // 原图片(大图)宽度
	source_height:	0, // 原图片(大图)高度

	preview_width:  0, // 预览图(小图)宽度
	preview_height:	0, // 预览图(小图)高度
	preview_top:	0, // 预览图片的坐标
	preview_left:	0, // 预览图片的坐标

	scale_rate:		0, // 缩放比例

	source_img_src: "",
	source_img:		null,
	
	controls:		null, // 预览框对象列表
	cancle:			false,

	// 功能函数
	/* 初始化功能函数 */
	init: function(img_obj, view_width, view_height)
	{
		if (this.source_param in img_obj){
			this.source_img_src = img_obj[this.source_param];
			if (this.source_img_src == ''){
				return false;
			}
		}else {
			return false;
		}

		// 初始化内部变量
		var pos = this.getObjectPos(img_obj);
		this.preview_width  = img_obj.width;
		this.preview_height	= img_obj.height;
		this.preview_top	= pos.top + 1;
		this.preview_left	= pos.left + 1;
		this.cancle			= false;
		if (view_width != null)  this.view_width = view_width;
		if (view_height != null) this.view_height = view_height;

		// 创建预览框
		this.createControl();
		this.showFlash();

		// 下载大图
		if (this.source_img == null){
			this.source_img = new Image();
		} else {
			this.source_img.onload = null;
			this.source_img = new Image();
		}
		this.source_img.onload = function (){ pic_view.onImageLoad(this) }; // #OBJECT#
		this.source_img.src = this.source_img_src;
	},

	
	/* 图片下载完成, 显示预览框 */
	onImageLoad: function(img_obj)
	{
		this.source_width  = this.source_img.width;
		this.source_height = this.source_img.height;
		if (this.source_height < this.view_height) {
			this.view_height = this.source_height;
		}
		if (this.source_width < this.view_width) {
			this.view_width = this.source_width;
		}
		this.createControl();

		this.scale_rate = this.preview_width / this.source_width;
		
		this.window_width  = Math.round(this.scale_rate * this.view_width);
		this.window_height = Math.round(this.scale_rate * this.view_height);

		if (this.window_height > this.preview_height) {
			this.window_height = this.preview_height;
		}

		if (this.window_width > this.preview_width) {
			this.window_width = this.preview_width;
		}

		this.scale_rate = this.source_width / this.preview_width;

		this.controls.loading.style.display = "none";
		this.start();
	},
	
	start: function()
	{
		if (this.cancle){
			return false; // 用户移走了鼠标, 放弃浏览
		}
		this.controls.image.src = this.source_img_src;
		this.controls.image.style.display = "block";
		this.controls.source.style.display = "block";
		this.controls.contain.style.display = "block";
		this.onMouseMove();
	},
	
	stop: function()
	{
		if (this.controls != null){
			this.controls.contain.style.display = "none";
			this.controls.source.style.display = "none";
			this.controls.image.style.display = "none";
		}
	},
	
	onMouseMove: function(e)
	{
		var e = window.event?window.event:e;
		var iebug = 0;
		var oDiv = this.controls.contain;

		//vX,vY:view框相对于缩图的坐标
		var viewTop = 0, viewLeft = 0;

		if (window.event){
			if (("offsetX" in e) && ("offsetY" in e)){
				viewLeft = e.offsetX - this.window_width/2;
				viewTop  = e.offsetY - this.window_height/2;
			}
		}else{
			if (("pageX" in e) && ("pageY" in e)){
				viewLeft = e.pageX - this.window_width/2 - this.preview_left;
				viewTop	= e.pageY - this.window_height/2 - this.preview_top;
				iebug	= 2;
			}
		}

		if (viewLeft < 0) viewLeft = 0;
		if (viewTop < 0)  viewTop = 0;

		var viewMaxWidth = this.preview_width - this.window_width - iebug;
		if (viewLeft > viewMaxWidth) viewLeft = viewMaxWidth;

		var viewMaxHeight = this.preview_height - this.window_height - iebug;
		if (viewTop > viewMaxHeight) viewTop = viewMaxHeight;

		this.draw(Math.round(viewLeft), Math.round(viewTop));
	},
	
	draw: function(viewLeft, viewTop)
	{
		//确定原图显示的起点
		move_left = viewLeft * this.scale_rate;
		move_top  = viewTop * this.scale_rate;
		max_left  = this.source_width - this.view_width;
		max_top   = this.source_height - this.view_height;
		
		this.controls.move.style.marginLeft = - ((move_left > max_left)?max_left:move_left);
		this.controls.move.style.marginTop  = - ((move_top > max_top)?max_top:move_top);

		// 范围框
		var oView = this.controls.view;
		oView.style.left = viewLeft;
		oView.style.top  = viewTop;
		oView.style.width = this.window_width;
		oView.style.height = this.window_height;

		// 左边阴影
		var oLeft = this.controls.left;
		oLeft.style.left = 0;
		oLeft.style.top = 0;
		oLeft.style.width = viewLeft;
		oLeft.style.height = this.preview_height;

		// 上边阴影
		var oTop = this.controls.top;
		oTop.style.left = viewLeft;
		oTop.style.top = 0;
		oTop.style.width = this.window_width + 1;
		oTop.style.height = viewTop;

		// 下边阴影
		var oBottom = this.controls.bottom;
		oBottom.style.left = viewLeft;
		oBottom.style.top  = viewTop + this.window_height + 1;
		oBottom.style.width = this.window_width + 1;
		oBottom.style.height = (this.preview_height > oBottom.offsetTop) ? (this.preview_height - oBottom.offsetTop) : 0;

		// 右边阴影
		var oRight = this.controls.right;
		oRight.style.left = oView.offsetLeft + this.window_width + 1;
		oRight.style.top = 0;
		oRight.style.width = (this.preview_width > oRight.offsetLeft) ? (this.preview_width - oRight.offsetLeft) : 0;
		oRight.style.height = this.preview_height;
	},

	/* 创建浏览框 */
	createControl: function()
	{
		if (this.controls == null){
			var ctrl = {};
			ctrl.contain = document.createElement("div");
			ctrl.left	 = document.createElement("div");
			ctrl.top	 = document.createElement("div");
			ctrl.bottom	 = document.createElement("div");
			ctrl.right	 = document.createElement("div");
			ctrl.view	 = document.createElement("div");
			ctrl.event	 = document.createElement("div");
			ctrl.source	 = document.createElement("div");
			ctrl.move    = document.createElement("div");
			ctrl.loading = document.createElement("div");
			ctrl.image	 = document.createElement("img");

			ctrl.contain.appendChild(ctrl.left);
			ctrl.contain.appendChild(ctrl.top);
			ctrl.contain.appendChild(ctrl.bottom);
			ctrl.contain.appendChild(ctrl.right);
			ctrl.contain.appendChild(ctrl.view);
			ctrl.contain.appendChild(ctrl.event);
			ctrl.source.appendChild(ctrl.move);
			ctrl.move.appendChild(ctrl.image);

			var ctrl_css = "position:absolute; overflow:hidden; filter:alpha(opacity=30); background-color:#000000; margin:0; padding:0; border:0; z-index:1;";
			ctrl.contain.style.cssText	= "position:absolute; overflow:hidden; display:none; z-index:100;";
			ctrl.source.style.cssText	= "position:absolute; overflow:hidden; display:none; border:"+this.view_border+"px #aaa solid;";
			ctrl.view.style.cssText		= "position:absolute; overflow:hidden; border:1px #ddd solid; margin:0; padding:0; z-index:1;";
			ctrl.event.style.cssText	= "position:absolute; left:0px; top:0px; background-color:#ccc; filter:alpha(opacity=0); z-index:1000; cursor:hand;";
			ctrl.loading.style.cssText	= "position:absolute; overflow:hidden; display:none; background-color:#000000; text-align:center; font-family:Arial; font-size:10px; color:#fff; filter:alpha(opacity=30);";

			ctrl.left.style.cssText	= ctrl.top.style.cssText = ctrl.bottom.style.cssText = ctrl.right.style.cssText = ctrl_css;
			ctrl.image.style.display	= "none";

			document.body.appendChild(ctrl.contain);
			document.body.appendChild(ctrl.source);
			document.body.appendChild(ctrl.loading);

			ctrl.loading.innerHTML = "<b>Loading Image..</b>";
			ctrl.left.innerHTML = ctrl.right.innerHTML = ctrl.top.innerHTML = ctrl.bottom.innerHTML = "<span></span>";

			ctrl.loading.onmouseleave = function(){ pic_view.hideFlash(); } // #OBJECT#
			ctrl.event.onmousemove    = function(event){ pic_view.onMouseMove(event); } // #OBJECT#
			ctrl.event.onmouseleave   = function(){ pic_view.stop(); } // #OBJECT#

			this.controls = ctrl;
		}

		// 根据对象的位置初始化控件
		/* 控制控件 */
		var oDiv = this.controls.contain;
		oDiv.style.top		= this.preview_top;
		oDiv.style.left		= this.preview_left;
		oDiv.style.width	= this.preview_width;
		oDiv.style.height	= this.preview_height;
		
		/* 移动事件控件 */
		oDiv = this.controls.event;
		oDiv.style.top		= 0;
		oDiv.style.left		= 0;
		oDiv.style.width	= this.preview_width;
		oDiv.style.height	= this.preview_height;

		/* 浏览控件 */
		oDiv = this.controls.source;
		oDiv.style.top		= this.preview_top + this.preview_height - this.view_height - 3;
		oDiv.style.left		= this.preview_left - this.view_width - 14;// - this.preview_width + 7;
		oDiv.style.width	= this.view_width;
		oDiv.style.height	= this.view_height;

	},
	
	showFlash: function()
	{
		var oDiv = this.controls.loading;
		var pad = Math.round((this.preview_height - 11)/2);
		oDiv.style.top		= this.preview_top;
		oDiv.style.left		= this.preview_left;
		oDiv.style.width	= this.preview_width;
		oDiv.style.height	= this.preview_height - pad;
		oDiv.style.paddingTop = pad + "px";
		oDiv.style.display	= "block";
	},
	
	hideFlash: function()
	{
		this.cancle = true;
		var oDiv = this.controls.loading;
		oDiv.style.display	= "none";
	},
	
	getObjectPos: function(obj)
	{
		if (obj == null || obj.tagName == 'BODY'){
			return {'top': 0, 'left': 0};
		}
		
		var ret = {
			'top':  (("offsetTop"  in obj) ? obj.offsetTop : 0),
			'left': (("offsetLeft" in obj) ? obj.offsetLeft : 0)
		};

		if (("offsetParent" in obj) && (obj.offsetParent != null)){
			var pos = this.getObjectPos(obj.offsetParent);
			ret.top  += pos.top;
			ret.left += pos.left;
		}
		return ret;
	},

	debugDiv: null,
	debug: function(obj)
	{
		var s="";
		for (i in obj){
			s += i + " = " + obj[i] + "; \n";
		}
		
		if (this.debugDiv == null){
			this.debugDiv = document.createElement('div');
			this.debugDiv.style.cssText = "position:absolute; left:0px; top:0px; width:300px;"
			document.body.appendChild(this.debugDiv);
		}
		this.debugDiv.innerText = s;
	},

	/*********************/
	classEndTag: null
};

//var ret = pic_view.init();

window.onload = function(){
}