JQ("#img_right").scroll(function(){
						nDivHight=JQ(this).height();
						nScrollHight = JQ(this)[0].scrollHeight;
						nScrollTop = JQ(this)[0].scrollTop;
						if(nScrollTop>0){
							$("transparent_div_top").style.display="block";
							
						}else{
							$("transparent_div_top").style.display="none";
						}
						
						if(nScrollTop + nDivHight >= nScrollHight){ //判断到底部
							$("transparent_div_bottom").style.display="none";
						}else{
							$("transparent_div_bottom").style.display="block";
							
						}
				});
				
				function getScrollTop(){
						var scrollTop=0;
						if(document.documentElement && document.documentElement.scrollTop){
							scrollTop= document.documentElement.scrollTop;
						}else if(document.body && document.body.scrollTop){
							scrollTop= document.body.scrollTop;
						}
						return scrollTop;
				}
				function Values(){//闭包类.主要存取value
				 // _val=$("val");// hiddenselct 框  .存放选中的值 
					_val=$('select_'+ $("colour_options_hidden").getAttribute('v')); //下拉框.
					_display_val=$("img_key_value_id");
					_display_img=$("img_image_value");
					_image_small_id=$("img_small_id").getElementsByTagName("img");
					
					return {
							setValue:function(value){
								for(var i=0;i<_val.options.length;i++){
									if(_val.options[i].getAttribute('value')==value){
										_val.options[i].selected="selected";
									};
								}
								for(var i=0,small_id_len=_image_small_id.length;i<small_id_len;i++){
									if(_image_small_id[i].getAttribute("valueid")==value){
											_image_small_id[i].parentNode.className="img_select";
									}else{
											_image_small_id[i].parentNode.className="";
									}
								}
							},
							setDisplay:function(value){
								_display_val.innerHTML=value;
							},
							setValueImg:function(src){
									_display_img.getElementsByTagName("img").item(0).src=src;
							},
							getValueImgSrc:function(){
									return _display_img.getElementsByTagName("img").item(0).src;
							},
							getValue:function(){
								return _val.value;
							}
					 };
				}
				
				var value=new Values();
				function DialogValue(){//弹出框类 作用: 弹出框内的值
						var big_image_range=$("content-big-image");
						var divs=big_image_range.getElementsByTagName("div");
						var _previous=divs.item(0);//上一张按钮
						var _big_image=divs.item(1).getElementsByTagName('img').item(0);//中间的大图片
						var _big_image_info=divs.item(1).getElementsByTagName('p').item(0);//大图片下面的p标签 
						var _big_image_info_index=divs.item(1).getElementsByTagName("b").item(0);  //p标签上面的b标签存放 index/count 数据 
						var _next=divs.item(2);//下一张按钮
						
						var _move_previous=$("move_previous");
						var _move_next=$("move_next");
						var _dialog_ul=$('content-small-list-ul');
						var _start=null;    //setInterval handle
						return {
							setImageSrc:function(src){
								
								_big_image.src=src;
								var div=document.createElement('div');
								div.className='remove_div';
								div.style.cssText="width:100px;height:50px;position:absolute;top:160px;left:230px;border:solid 2px #ccc;background:url(/skin/frontend/default/default/img/Loading00.gif) no-repeat center center;float:left;z-index:10000;";
								var dialog=$("dialog-1");
								if(dialog.lastChild.className == 'remove_div'){
										dialog.removeChild(dialog.lastChild);
								}
								dialog.appendChild(div);
								_big_image.onload=function(){
									if(dialog.lastChild.className == 'remove_div'){
										dialog.removeChild(dialog.lastChild);
									}
								};
							},
							setValue:function(v){
								_big_image_info.innerHTML=v;
							},
							getUl:function(){
								return _dialog_ul;
							},
							getPrevious:function(){
								return _previous;
							},
							getNext:function(){
								return _next;
							},
							getChildImages:function(){
								return _dialog_ul.getElementsByTagName("img");
							},
							getChildLis:function(){
								return _dialog_ul.getElementsByTagName('li');
							},
							getMovePrevious:function(){
								return _move_previous;
							},
							getMoveNext:function(){
								return _move_next;
								
							},
							setPosition:function(index,count){
								
									_big_image_info_index.innerHTML=(index+1)+"/"+count;
									index+=1;
									if(index<=4){
										c=0;
									}else if(index>count-3){
										c=count-7;
									}else{
										c=index-4;
									}
									var leftValue="-"+(67*c)+"px";
									JQ(_dialog_ul).animate({left:leftValue}, 300);
							},
							startMarquee:function(flag){
										
										var s=1;if(flag){s=1;}else{s=-1;}
									_start=setInterval(function(){
											var leftul=parseInt(_dialog_ul.style.left);
											if(isNaN(leftul)){
												leftul=0;
											}
											var templeft=leftul+s;
											if(templeft<=0 && templeft>= -(_dialog_ul.getElementsByTagName("li").length-7)*68){
												_dialog_ul.style.left=templeft+"px";
											}
										},20);
										
							},
							stopMarquee:function(){
								 clearInterval(_start);
							}
						};
				}
				//关闭弹出框 
				function closeDialog(){
						$("dialog-1-overlay").style.display="none";
						$("dialog-1").style.display="none";
				}
				function getInfoByImg(img){
					var info=img.getAttribute('val');
					var valueid=img.getAttribute('valueid');
					var src=img.src;
					var str='<span class="color_info_text">'+info+'</span><span class="selectcolor" onclick="value.setValue('+valueid+');value.setValueImg(\''+src+'\');value.setDisplay(\''+info+'\');closeDialog();">Select Colour</span>';
					return str;
				}
				//弹出框
				function showDialog(o){
						$("dialog-1-overlay").style.display="block";// 弹出框的位置
            var left = (JQ(window).width() - 540) / 2;
            var top = (JQ(window).height() - 560) / 2;
						$("dialog-1").style.display="block";
						$("dialog-1").style.position="fixed";
						$("dialog-1").style.top=top+"px";
						$("dialog-1").style.left=left+"px";
						//new Dialog({type:'id',value:'content-type-id'}).show();
						
						var dialogValue=new DialogValue(); //弹出框数据闭包
						var big_image_range=$("content-big-image");
						var divs=big_image_range.getElementsByTagName("div");
						var previous=dialogValue.getPrevious();
						var next=dialogValue.getNext();
						var src=o.getElementsByTagName("img").item(0).src;
						dialogValue.setImageSrc(src);
						//var valueid=o.getElementsByTagName("img").item(0).getAttribute("valueid");  //这里是那个图片id
						var info=o.getElementsByTagName("p").item(0).innerHTML;
						var dialog_imgs=dialogValue.getChildImages();  //列表小图
						var ul=dialogValue.getUl();
						var _width=dialog_imgs.length*68;
						ul.style.width=_width + "px";
						ul.style.height="100px";
						ul.style.position="relative";
						
						str="";
						for(var i=0;i<dialog_imgs.length;i++){
							if(dialog_imgs[i].getAttribute('val')==info){
								str=getInfoByImg(dialog_imgs[i]);
								break;
							}
						}
						dialogValue.setValue(str);
						dialogValue.getMovePrevious().onmouseover=function(){
							dialogValue.startMarquee(true);
						};
						dialogValue.getMovePrevious().onmouseout=function(){
							dialogValue.stopMarquee();
						};
						dialogValue.getMoveNext().onmouseover=function(){
							dialogValue.startMarquee(false);
						};
						dialogValue.getMoveNext().onmouseout=function(){
							dialogValue.stopMarquee();
						};
						
						if(typeof previous.onclick != 'function'){								//上一页点击事件
							dialogValue.getPrevious().onclick=function(){
									var nodeli=null;
									for(var i=0,imgs_len=dialog_imgs.length;i<imgs_len;i++){ //获取当前选中的下一个
										if(dialog_imgs[i].parentNode.className=="selected"){
											nodeli=dialog_imgs[i].parentNode.previousSibling;
											break;
										}
									}
									if(nodeli==null){ //如果是第一个
											nodeli=dialog_imgs[dialog_imgs.length-1].parentNode;
									}
									for(var j=0,len2=dialog_imgs.length;j<len2;j++){
										 if(nodeli==dialog_imgs[j].parentNode){
												dialog_imgs[j].parentNode.className="selected";
												var img=nodeli.getElementsByTagName("img").item(0);
												var p=nodeli.getElementsByTagName("p").item(0);
												dialogValue.setImageSrc(img.getAttribute("bigimgsrc"));
												dialogValue.setValue(p.innerHTML);
												dialogValue.setPosition(j,dialog_imgs.length);//弹出框小框滚动
												dialogValue.setValue(getInfoByImg(dialog_imgs[j]));
												
										 }else{
												dialog_imgs[j].parentNode.className="";
										 }
									}
							};
						}
						
						if(typeof next.onclick != 'function'){  											//下一页点击事件
							dialogValue.getNext().onclick=function(){
									var nodeli=null;
									for(var i=0,imgs_len=dialog_imgs.length;i<imgs_len;i++){ //获取当前选中的下一个
										if(dialog_imgs[i].parentNode.className=="selected"){
											nodeli=dialog_imgs[i].parentNode.nextSibling;
											break;
										}
									}
									if(nodeli==null){ //如果是最后一个
											nodeli=dialog_imgs[0].parentNode;
									}
									for(var j=0,len2=dialog_imgs.length;j<len2;j++){
										 if(nodeli==dialog_imgs[j].parentNode){
												dialog_imgs[j].parentNode.className="selected";
												var img=nodeli.getElementsByTagName("img").item(0);
												var p=nodeli.getElementsByTagName("p").item(0);
												dialogValue.setImageSrc(img.getAttribute("bigimgsrc"));
												dialogValue.setValue(p.innerHTML);
												dialogValue.setPosition(j,dialog_imgs.length);
												dialogValue.setValue(getInfoByImg(dialog_imgs[j]));
										 }else{
												dialog_imgs[j].parentNode.className="";
										 }
									}
							};
						}
						for(var i=0,imgs_len=dialog_imgs.length;i<imgs_len;i++){
								if(dialog_imgs[i].getAttribute("val")==info){
									dialog_imgs[i].parentNode.className="selected";
								}else{
									dialog_imgs[i].parentNode.className="";
								}
								dialog_imgs[i].parentNode.onclick=function(){
									dialogValue.setImageSrc(this.getElementsByTagName("img").item(0).getAttribute("bigimgsrc"));
									dialogValue.setValue(this.getElementsByTagName('p').item(0).innerHTML);
									for(var j=0,imgs_len2=dialog_imgs.length;j<imgs_len2;j++){
											if(dialog_imgs[j].parentNode==this){
												dialog_imgs[j].parentNode.className="selected";
												dialogValue.setPosition(j,dialog_imgs.length);
												dialogValue.setValue(getInfoByImg(dialog_imgs[j]));
											}else{
												dialog_imgs[j].parentNode.className="";
											}
									}
								};
						}
				}
				//定义要修改的css  class名称 
				var selectedClassName='img_select';     //选中的css样式 
				var mouseoverClassName='img_mouseover'; //鼠标划过css样式
				var aspicClassName="img_aspic";
	  		(function(){
							var hiddenDiv = $("colour_options_hidden");
							var optionId=hiddenDiv.getAttribute('v');
							var imgs=hiddenDiv.getElementsByTagName("img");
							var li=hiddenDiv.getElementsByTagName("li");
							for(var i=0,len=imgs.length;i<len;i++){
								var imgSrc=imgs[i].getAttribute("_basesrc")+material+imgs[i].getAttribute("imgname");
								var bigImgSrc=imgs[i].getAttribute("_basesrc")+material+imgs[i].getAttribute("bigimgname");
								imgs[i].src=imgSrc;
								imgs[i].setAttribute("bigimgsrc",bigImgSrc);
							}
							var img_small_id=$("img_small_id");
							var content_small_list_ul=$("content-small-list-ul");
							for(var i=0,li_len=li.length;i<li_len;i++){
									var newLis=li[i].cloneNode(true);
									var newLi=li[i].cloneNode(true);
									img_small_id.appendChild(newLis);
									content_small_list_ul.appendChild(newLi);
							}
							
          
							
							
							
							
							var lis=img_small_id.getElementsByTagName("li");
							
						
							
							
							for(var i=0;i<lis.length;i++){
									//小图鼠标划过事件
									lis[i].onmouseover=function(e){
                    if (window.event) {  
                      event.cancelBubble = true;  
                    }else if (e){  
                      e.stopPropagation();  
                    }
										if(this.className.indexOf(selectedClassName)==-1 && this.className.indexOf(aspicClassName)==-1){
											this.className=mouseoverClassName; //换样式 
										}
											//鼠标划过把 旁边的大一点的图片更换
											var thisimg=this.getElementsByTagName("img").item(0);
											$("img_big_image_id").innerHTML='<img width="186" height="233" src="'+thisimg.getAttribute("bigimgsrc")+'" /><p>'+thisimg.getAttribute("val")+'</p>';
									};
									//小图鼠标移出事件
									lis[i].onmouseout=function(e){
                    if (window.event) {  
                      event.cancelBubble = true;  
                    }else if (e){  
                      e.stopPropagation();  
                    }
										if(this.className==mouseoverClassName){
											this.className="";  //改变样式 
										}
									};
									//小图点击事件
									lis[i].onclick=function(e){
										e=e||window.event;
										for(var j=0,len=lis.length;j<len;j++){
											if(lis[j]==this){
													//这里要动画效果
													value.setValue(lis[j].getElementsByTagName("img").item(0).getAttribute("valueid")); //写select框 
													value.setDisplay(lis[j].getElementsByTagName("img").item(0).getAttribute("val"));//显示的值
													var src=lis[j].getElementsByTagName("img").item(0).src;						//你点击的图片的src 
													var nam=lis[j].getElementsByTagName("img").item(0).getAttribute("val");
													if(e != undefined){
													var img=document.createElement("img");  													//创建一张图片
													img.src=src;  	 //复制一张图片
													var x=0;
													switch((j+1)%4){
														case 1:
															x=620;break;
														case 2:
															x=690;break;
														case 3:
															x=760;break;
														case 0:
															x=830;break;
															break;
													}
													var scrollTop=getScrollTop();
													
													var y=e.clientY-220+scrollTop; //鼠标点击的y坐标
													cssText="float:left;width:75px;height:108px;position:absolute;left:"+x+"px;top:"+y+"px;z-index:9999;";
													img.style.cssText=cssText;
													lis[j].appendChild(img);
													var animateStyle={left: "502px",top:"175px",height:"23px",width:"40px"};
													//动画参数   left top  height width ...
													
														JQ(img).animate(animateStyle, 1000,function(self){  //执行动画 
																img.parentNode.removeChild(img);  //动画执行完执行删这个图片操作
																value.setValueImg(src); 
																JQ('#img_image_value .othercolours').html(nam);
														});
													}else{
														value.setValueImg(src);
													}
					                //改变下方的图片
					                if(lis[j]==lis[0]){
														if(lis[j].getElementsByTagName("div").length==0){
															var ele=document.createElement("div");
															ele.className="aspic_div_zindex";
															lis[j].appendChild(ele);
														}
														lis[j].className=aspicClassName + " "+selectedClassName;
					                }else{
														lis[j].className=selectedClassName;		 //设置点击之后的className
													}
											}else{
													lis[j].className="";
											}
										}
									};
							}
							
							lis[0].onclick.call(lis[0]);
							
							//取消 ul 事件冒泡
							img_small_id.onmouseout=function(e){
                  //if (window.event) {  
                  //    event.cancelBubble = true;  
                  //    }else if (e){  
                  //    e.stopPropagation();  
                  //    }
              };
							
							
								//监听ul下面的div 离开事件
              $("img_right").onmouseover=function(e){
                      if (window.event) {  
                      event.cancelBubble = true;  
                      }else if (e){  
                      e.stopPropagation();  
                      } 
                      this.onmouseout=function(){
                          for(var i=0,len=lis.length;i<len;i++){
                            if(lis[i].className.indexOf(selectedClassName)>-1){
                              (function(i){
                              lis[i].onmouseover.call(lis[i]);
                              })(i);
                             break; 
                            }
                          }
                      }
              };
              
              $("transparent_div_top").onmouseover=function(){
                  for(var i=0,len=lis.length;i<len;i++){
                      if(lis[i].className.indexOf(selectedClassName)>-1){
                          (function(i){
                          lis[i].onmouseover.call(lis[i]);
                          })(i);
                         break; 
                      }
                  }
              };
              
              $("transparent_div_bottom").onmouseover=function(){
                   $("transparent_div_top").onmouseover.call(this);
              };
              
							
							
					})();