function CDiv() {
	this.state = 'l';
}

function CMain($objname) {
	/**
	 * objname 对象名称
	 * issliding 是否正在滑动
	 */
	this.objname = $objname;
	this.issliding = false;

	/**
	 * 构造视图显示对象
	 */
	this.init = function() {
		/**
		 * data 所有的外来数据
		 * tid 总层数
		 * cid 当前打开的层编号
		 * lid 上一次激活的层编号
		 * view_width 可视化范围宽度
		 * tag_width 书签宽度
		 * div_width 显示层的宽度
		 */
		this.tid = 5;				// 总层数
		this.cid = 1;				// 当前显示的层编号
		this.lid = 1;				// 上一次被覆盖的层编号

		this.data = new Array();
		for (var i = 1; i < this.tid+1; i++) {
			this.data[i] = new CDiv();
		}
		this.data[1].state = 'r';

		/* 基础显示数据 */
		this.view_id = 'div_view1'; 	// 可视化标签的名称
		this.view_width = parseInt(document.getElementById(this.view_id).style.width);		// 可视化范围宽度
		this.tag_width = 13;		// 书签宽度
		this.div_width = this.view_width - this.tag_width * this.tid;	// 显示层的宽度

		/* 构建图像 */
		// 创建书签
		// 创建内部层
	}

	/**
	 * 开始移动
	 */
	this.move = function($num) {
		/**
		 * pTime 单次移动时间
		 * tTime 总移动时间
		 * tNum 总移动次数
		 * lm 剩余移动距离
		 * tm 总移动距离
		 * m 单次移动距离与方向
		 * m1 最后一次移动距离
		 */
		if (this.issliding) return;
		this.issliding = true;

		/* 时间 */
		this.pTime = 0.01;			// 单次滑动时间
		this.tTime = 0.2;			// 总滑动时间

		/* 次数 */
		if ((this.tTime * 1000) % (this.pTime * 1000) > 0) {	// 总移动次数
			this.tNum = Math.ceil(this.tTime / this.pTime);
		} else {
			this.tNum = this.tTime * 1000 / (this.pTime * 1000);
		}

		/* 距离与方向 */
		this.lm = this.div_width;								// 剩余移动距离
		this.tm = this.lm;										// 总移动距离
		if (this.tm % this.tNum > 0) {							// 单次移动距离
			this.m = Math.ceil(this.tm / this.tNum);
		} else {
			this.m = this.tm / this.tNum;
		}
		this.m = $num / Math.abs($num) * this.m;				// 单次移动方向
		this.ml = this.tm - Math.abs(this.m) * (this.tNum - 1);	// 最后一次移动距离
		this.ml = $num / Math.abs($num) * this.ml;				// 最后一次移动方向

		/* 移动对象的编号 */
		this.lid = this.cid;											// 更新上一次移动对象编号
		//if ($num > 0) this.cid = $num;									// 更新当前移动对象编号
		//if ($num < 0) this.cid = Math.abs($num) - 1;
		this.cid = $num;												// 更新当前移动对象编号

		/* 循环执行 */
		setTimeout(this.objname+'.sliding(1)', 0);
	}

	/**
	 * 循环移动
	 */
	this.sliding = function($step) {
		/**
		 * 判断是否为最后一次移动
		 */
		if ($step == this.tNum) {
			this.m = this.ml;
		}

		/**
		 * 滑动层循环滑动
		 */
		var div_sliding;
		if (this.m > 0) {												// 向右移动
			for (i = Math.abs(this.cid); i > 1; i--) {
				if (this.data[i].state != 'r') {						// 所有需要向右移动且没有靠右的层
					div_sliding = document.getElementById('div_namex'+i);
					div_sliding.style.left = (parseInt(div_sliding.style.left) + this.m) + 'px';
				}
			}
		} else {														// 向左移动
			for (i = Math.abs(this.cid); i < this.tid+1; i++) {
				if (this.data[i].state != 'l') {						// 所有需要向右移动且没有靠右的层
					div_sliding = document.getElementById('div_namex'+i);
					div_sliding.style.left = (parseInt(div_sliding.style.left) + this.m) + 'px';
				}
			}
		}

		/* 循环移动 */
		this.lm = this.lm - Math.abs(this.m);
		var i, pic;
		if (this.lm <= 0) {			// 结束则退出
			if (this.m > 0) {
				for (i = Math.abs(this.cid); i > 1; i--) {
					this.data[i].state = 'r';
					pic = document.getElementById("picx"+i);
					eval('pic.onmouseover = function(){ cmain.move(-'+i+') };');
					document.getElementById("o"+Math.abs(i)).src = "images/tag_2.gif";
				}
				document.getElementById("o1").src = "images/tag_2.gif";
				document.getElementById("o"+Math.abs(this.cid)).src = "images/tag_1.gif";
			} else {
				for (i = Math.abs(this.cid); i < this.tid+1; i++) {
					this.data[i].state = 'l';
					pic = document.getElementById("picx"+i);
					eval('pic.onmouseover = function(){ cmain.move('+i+') };');
					document.getElementById("o"+Math.abs(i)).src = "images/tag_2.gif";
				}
				document.getElementById("o"+(Math.abs(this.cid)-1)).src = "images/tag_1.gif";
			}
			this.lm = 0;
			this.issliding = false;
			return;
		} else {
			$step++;
			setTimeout(this.objname + ".sliding("+$step+")", this.pTime*1000);
		}
	}

}