var widget={
	div_3parts:function(imgs, width , height)
	{
		var me=Builder.node('div');
		//内部的div
		//var holder=Builder.node('div', {style:'margin-top:0.2em'});
		var holder;
		var built=false;
		this.get_holder=function()
		{
		
			return  holder;
		
		
		}
		//得到自己的element
		this.get_me=function()
		{
			if(built)
			{
				return  me;
			}else{
				return;
			
			}
		
		}
		
		
		this.build=function()
		{
			if(Object.isArray(imgs))
			{
				if(imgs.length!=3)
				{
					return ;
				}
			}
			
			var div_left=Builder.node('div', {style:'float:left'}, Builder.node('img', {'src': imgs[0]}) );
			me.appendChild(div_left);
			
			//<div style="background-image:url(img/tag_body.gif); color: white; width:100px; float:left; height:29px;text-align:center;"><div style="margin-top:0.2em;"><a href="index.html" class="cat">家用电器</a></div></div>
			var styleTemplate = new Template('background-image:url(#{img});width:#{width}; height:#{height};float:left; text-align:center;');
			
			var div_body=Builder.node('div', {style:styleTemplate.evaluate({width:width,  height:height, img:imgs[1]})});
			holder = div_body;
			me.appendChild(div_body);
			
			var div_left=Builder.node('div', {style:'float:left'}, Builder.node('img', {'src': imgs[0]}) );
			var div_right=Builder.node('div', {style:'float:left'}, Builder.node('img', {'src': imgs[2]}) );
			me.appendChild(div_right);
			built=true;
			return me;
			
		
		
		}
	
	},
	
	
	div_9parts:function(imgs, width, height, h1, h2, w1, w2)
	{
	
		var _h1='100%';
		var _h2='100%';
		var _w1='50%';
		var _w2='50%';
		
		if(arguments[3])
		{
				_h1 = h1.toString()+'px';
		}
		if(arguments[4])
		{
				_h2 = h2.toString()+'px';
		}
		if(arguments[5])
		{
				_w1 = w1.toString()+'px';
		}
		if(arguments[6])
		{
				_w2 = w2.toString()+'px';
		}
		
		
		var _width = width.toString()+'px';
		var _height =  height.toString()+'px';
		var _total_width = (width+w1+w2).toString()+'px';
		var _total_height = (height+h1+h2).toString()+'px';
		//alert(_total_height);
		// alert(_h1);
		// alert(_h2);
		// alert(_w1);
		// alert(_w2);
		var me=Builder.node('div');
		//内部的div
		//var holder=Builder.node('div', {style:'margin-top:0.2em'});
		var holder;
		
		var holder_top;
		var holder_bottom;
		var built=false;
		this.get_holder=function()
		{
			if(holder!=null)
				return  holder;
			else
				return;
				
		
		
		}
		this.get_holder_top=function()
		{
			if(holder_top!=null)
				return  holder_top;
			else
				return;
				
		
		
		}
		this.get_holder_bottom=function()
		{
			if(holder_bottom!=null)
				return  holder_bottom;
			else
				return;
				
		
		
		}
		//得到自己的element
		this.get_me=function()
		{
			if(built)
			{
				return  me;
			}else{
				return;
			
			}
		
		}
		this.replace_holder= function(node)
		{
			//new_holder= node.cloneNode(true);
		//alert(_width);alert(_height);
		
		//new_holder.style.width= _width;
			//new_holder.style.height= _height;
			
		//holder= new_holder;	
		//holder.parentNode.replaceChild(new_holder, holder);
		
			
			//new_holder. style.cssFloat= 'left';
			//new_holder.style.display= 'block';
			
					
		}
		// this.append_holder_with_childs=function( some_parent)
		// {
			 // var children = some_parent.childNodes;
			 // for (var i = 0; i < children.length; i++) 
			 // {
				// var n = children[i].cloneNode(true);
				// //alert(children[i].tagName);
				// //some_parent.removeChild(children[i]);
				// holder.appendChild(n );
			   
			 // };
		
		
		
		// }
		
		
		this.build=function()
		{
			if(Object.isArray(imgs))
			{
				if(imgs.length!=8)
				{
					return ;
				}
			}
			me.style.width=_total_width;
			
			me.style.height=_total_height;
			//alert(_total_width);
			//alert(_total_height);
			var div_top = Builder.node('div', {style:'clear:both;'+'height:'+_h1+';background-color:red;'});
			var div_top_left=Builder.node('div', {style:'float:left;width:'+_w1+';height:'+_h1}, Builder.node('img', {'src': imgs[0]}) );
			div_top.appendChild(div_top_left);
			
			
			
			var styleTemplate0 = new Template('background-image:url(#{img});width:#{width}; height:#{height}; float:left; background-repeat: repeat-x;');
			var div_top_middle=Builder.node('div', {style:styleTemplate0.evaluate({width:_width, height:_h1, img:imgs[1]})});
			
			div_top.appendChild(div_top_middle);
			holder_top = div_top_middle;
			var div_top_right = Builder.node('div', {style:'float:left;width:'+_w2+';height:'+_h1}, Builder.node('img', {'src': imgs[2]}) );
			
			div_top.appendChild(div_top_right);
			me.appendChild(div_top);
			
			
			
			var div_middle = Builder.node('div', {style:'clear:both'+'height:'+_height+'width:'+_width});
			//var styleTemplate = new Template('background-image:url(#{img});width:#{width}; float:left; height:#{height};text-align:center;');
			var styleTemplate1 = new Template('background-image:url(#{img});height:#{height};float:left;width:#{width}; background-repeat: repeat-y;');
			var div_middle_left=Builder.node('div', {style:styleTemplate1.evaluate({height: _height, img:imgs[3], width:_w1})});
			
			div_middle.appendChild(div_middle_left);
			
			
			var styleTemplate2 = new Template('height:#{height};float:left;width:#{width}; ');
			var div_middle_middle=Builder.node('div', {style:styleTemplate2.evaluate({height: _height, width:_width})});
			div_middle.appendChild(div_middle_middle);
			holder = div_middle_middle;
			
			var styleTemplate3 = new Template('background-image:url(#{img});height:#{height};float:left; width:#{width};background-repeat: repeat-y;');
			//alert(_height);
			//alert(_w2);
			var div_middle_right=Builder.node('div', {style:styleTemplate3.evaluate({height: _height, img:imgs[4], width:_w2})});
			
			div_middle.appendChild(div_middle_right);
			
			
			me.appendChild(div_middle);
			
			
			var div_bottom = Builder.node('div', {style:'clear:both;'+'height:'+_h2});
			var div_bottom_left=Builder.node('div', {style:'float:left'}, Builder.node('img', {'src': imgs[5]}) );
			div_bottom.appendChild(div_bottom_left);
			
			
			
			var styleTemplate4 = new Template('background-image:url(#{img});width:#{width}; height:#{height}; float:left; background-repeat: repeat-x;');
			var div_bottom_middle=Builder.node('div', {style:styleTemplate0.evaluate({width:_width, height:_h2, img:imgs[6]})});
			
			div_bottom.appendChild(div_bottom_middle);
			holder_bottom = div_bottom_middle;

			var div_bottom_right = Builder.node('div', {style:'float:left'}, Builder.node('img', {'src': imgs[7]}) );
			
			div_bottom.appendChild(div_bottom_right);
			me.appendChild(div_bottom);
			
			
			
			
			
			
			
			
			
			
			built = true;
			return me;
			
		}
		
		
	}
	

}
widget.fade_img_list=function(imgs, width,height, btn_imgs0,btn_imgs1, btn_width, btn_height)
{
	var _width=width.toString()+'px';
	var _height=height.toString()+'px';
	
	
	
	var built= false;
	var me=Builder.node('div');
	
	//按钮板
	var btn_bar=Builder.node('div');
	
	var img_els = [];
	
	var active_img=0;
	var btns = [];
	var stop_motion= false;
	this.get_me=function()
	{
		if(built)
		{
			return  me;
		}else{
			throw Error('object not built yet');
		
		}
		
	}
	
	start_action=function()
	{
	
	
	}
	hightlight_all_btn=function()
	{
	
	
	
	
	}
	
	delight_all_btn=function()
	{
		for(var i= 0; i< btns.length; ++i)
		{
				delight_btn(btns[i]);
		
		
		}
	
	
	
	}
	hl_btn=function(div_img)
	{
		
		div_img.lastChild.style.display = '';
		div_img.firstChild.style.display = 'none';
	
	}
	
	delight_btn=function(div_img)
	{
		//alert(div_img.tagName);
		div_img.lastChild.style.display = 'none';
		div_img.firstChild.style.display = '';
	
	}
	
	hide_all_img=function()
	{
		for(var i = 0 ;i<img_els.length;++i)
		{
			img_els[i].style.display='none';
			
		
		}
	
	
	}
	build_single_btn = function(img_filename ,  img_fn1, x, idx)
	{
		//每个img都有自己的div
		var div_img = Builder.node('div', {style:'float:left'});
		
		var img0 = Builder.node('img', {src:img_filename, style:'position:absolute;left:'+x.toString()+'px;top:0'});
		var img1 = Builder.node('img', {src:img_fn1, style:'position:absolute;left:'+x.toString()+'px;top:0'});
		//alert(img0.style.left);
		//alert(x);
		if(active_img ==idx)
		{
			img0.style.display ='none';
		
		}else{
			img1.style.display ='none';

		
		}
		div_img.appendChild(img0);
		div_img.appendChild(img1);
		
		
		onover_btn = function()
		{
						
			if(btns.indexOf(this) == active_img)
			{
			
				return;
			}
			
			hl_btn(this);
			
		}
		onout_btn = function()
		{
			
			if(btns.indexOf(this) == active_img)
			{
			
				return;
			}
			delight_btn(this);
			
		}
		
		onclick_btn = function()
		{
			stop_motion = true;
			
			delight_all_btn();
			hl_btn(this);
			active_img = btns.indexOf(this) ;
			//hide_all_img();
			adjust_z_index();
			
			img_els[active_img].hide();
			Effect.Appear(img_els[active_img]);
		}
		
		div_img.onmouseover = onover_btn;
		div_img.onmouseout = onout_btn;
		
		div_img.onclick = onclick_btn;

		return div_img;
	
	
	
	}
	//按钮板,写出来是一个div
	build_button_bar=function()
	{
		if(btn_imgs0.length!=btn_imgs1.length)
			throw Error('image length not equal');
		//定位
		btn_bar.style.position = 'absolute';
		btn_bar.style.left =  (width - btn_width*btn_imgs0.length-2).toString()+'px';
		btn_bar.style.top =  (height - btn_height-2).toString()+'px';
		//alert(btn_bar.style.left);
		for(var i = 0 ; i <btn_imgs0.length; ++i)
		{
			var div_img = build_single_btn(btn_imgs0[i],btn_imgs1[i], i*btn_width, i);
			btns.push(div_img);
			btn_bar.appendChild(div_img);
		
		
		}
		
	
	
	}
	set_active_img=function( n )
	{
		active_img = n;
	
	
	}
	next_img_idx=function( n )
	{
		if(n+1>imgs.length-1)
			return 0;
		else
			return  n+1;
	
	
	}
	
	// fade_func=function()
	// {
		// if(stop_motion)
			// return;
		// Effect.Fade(img_els[active_img]);
		// //img_els[active_img].style.display='none';
		// delight_btn(btns[active_img]);
		// active_img = next_img();
		// hl_btn(btns[active_img]);
	// }
	
	
	
	//将所有图片设为可见
	
	display_all_img = function()
	{
		
		for(var i = 0 ;i<img_els.length;++i)
		{
			img_els[i].setOpacity(1);
			img_els[i].style.display = '';
			
		
		}
	
	
	
	
	}
	
	adjust_z_index=function()
	{
	
		var  start = active_img;
		for(var i = 0 ;i<img_els.length;++i)
		{
			img_els[start].style.zIndex= (20-i).toString();
			start = next_img_idx(start);
			
		
		}
	
	
	}
	
	fade_func = function()
	{
		if(stop_motion)
			return;
		Effect.Fade(img_els[active_img]);
	
	
	}

	after_fade_func = function()
	{
		if(stop_motion)
			return;
		delight_btn(btns[active_img]);
		active_img = next_img_idx(active_img);
		hl_btn(btns[active_img]);
	
	
	}
	//动画正常的timeout函数
	motion=function()
	{
		if(stop_motion)
		{
		
			return;
		}
		
		//alert(img_els[active_img].getOpacity());
		//alert(img_els[active_img].style.display);
		adjust_z_index();
		display_all_img();
		
		
		
		
		
		// img_els[active_img].setOpacity(1);
		// img_els[active_img].style.display = '';
		
		
		var t0 = setTimeout("fade_func();",2000);
		
		//alert(active_img);
		
		
		
		if(stop_motion)
			return;
			
		var t1 = setTimeout("after_fade_func();",2300);
		
		if(stop_motion)
			return;
		var t2 = setTimeout("motion();",4000);
			
	
	}
	this.build=function()
	{
		me.style.width = _width;
		me.style.height = _height;
		me.style.border = '1px solid black';
		me.style.position = 'relative';
		
		for(var i=0;i<imgs.length;++i)
		{
			var imgx= Builder.node('img',{src:imgs[i], width:_width, height:_height, style:'position:absolute;left:0;top:0;'});
			
			imgx.style.zIndex = (20-i).toString();
			img_els.push(imgx);
			
		
			me.appendChild(imgx);
		}
		
		//动画部分
			
		build_button_bar();
		
		
		//alert(btn_bar.style.left);
		me.appendChild(btn_bar);
		btn_bar.style.zIndex= '25';
		
		motion();
		
		
		built = true;
		return me;
	}

}



tag_bar_3parts=function()
{
	var me=Builder.node('div');
	
	var _li_style = 'list-style-type: none; margin-left:1px; float:left;';
	var tag_ul = Builder.node('ul', {style:'list-style-type: none;margin-left:0px;padding:0'});
	
	var _tags =new Array();
	var built=false;
	this.add_active_tag=function(text, href)
	{
			var obj = { text:text,  active:true, href: href}
	
	
			_tags.push(obj);
	}

	this.add_tag=function(text,href)
	{
			var obj = { text:text,  active:false, href:href }
			_tags.push(obj);
	}
	
	build_tag_li=function(tag_data)
	{
		var tag_li = Builder.node('li', {style:_li_style});
		var tag;
		if(tag_data.active)
		{
		
			tag= new widget.div_3parts(['/s680_img/black_tag_01.gif', '/s680_img/black_tag_02.gif', '/s680_img/black_tag_03.gif'], '80px', '33px');
		
		}else{
		
			tag=new widget.div_3parts(['/s680_img/blue_tag_01.gif', '/s680_img/blue_tag_02.gif', '/s680_img/blue_tag_03.gif'], '80px', '33px');
		
		}
		
		var a_holder=Builder.node('div', {style:'margin-top:5px'});
		tag.build();
		tag.get_holder().appendChild(a_holder);
		
		if(tag_data.active)
		{
			a_holder.appendChild(Builder.node('a', {href: tag_data.href, className:'tag_active'}, tag_data.text));
		}else{
			a_holder.appendChild(Builder.node('a', {href: tag_data.href, className:'tag'}, tag_data.text));
		
		}
		tag_li.appendChild(tag.get_me());
		return tag_li;
	
	
	}
	this.build=function()
	{
		
		//var tag_ul = Builder.node('ul', {style:'list-style-type: none;margin-left:0px'});
		me.appendChild(tag_ul);
		var i = 0;
		for (i=0; i<_tags.length;++i)
		{
			 //alert(_tags.length);
			 tag_ul.appendChild(build_tag_li(_tags[i]));
		
		
		
		}
		built=true;
		return me;
	}
	this.get_me=function()
	{
	
			if(built)
			{
				return  me;
			}else{
				return;
			
			}
	}








}



widget.div2_win=function(w, h1, h2)
{

	this.set_size=function(w, h1, h2)
	{
		var _w=w.toString()+'px';
		var _h1=h1.toString()+'px';
		var _h2=h2.toString()+'px';
		var _h=(h1+h2).toString()+'px';
	
		_up.style.height = _h1;
		_lp.style.height = _h2;
		
		_up.style.width  = '100%';
		_up.style.width = '100%';
		me.style.height = _h;
		me.style.width = _w;
		
		
	}
	this.set_pos = function (left , top)
	{
		me.style.left = left.toString()+'px';
		me.style.top = top.toString()+'px';
	
	}
	
	
	var built= false;
	var me=Builder.node('div');
	
	//上部
	var _up = Builder.node('div');
	//下部
	var _lp = Builder.node('div');
	this.get_me=function()
	{
		if(built)
		{
			return  me;
		}else{
			throw Error('object not built yet');
		
		}
		
	}
	this.up = function()
	{
		return _up;
	
	}
	this.lp = function()
	{
		return _lp;
	
	}
	this.build=function()
	{
		
		
		me.appendChild(_up);
		me.appendChild(_lp);
	
		built= true;
		return me;
	}
	
}