<%@ Page Language="C#" MasterPageFile="~/Admin/MasterPage.master" AutoEventWireup="true" Inherits="Kesion.NET.WebSite.Admin_Label_FunLabel_SlideNew" Title="Untitled Page" Codebehind="KS.Label.SlideNew.aspx.cs" %>
<%@ Register Src="~/Config/Control/manage/LabelJS.ascx" TagName="LabelJS" TagPrefix="uc1" %>
<%@ Import Namespace="Kesion.Cache"%>
<%@ Import Namespace="Kesion.BLL"%>

<asp:Content ID="Content1" ContentPlaceHolderID="KSContent" Runat="Server">
<uc1:LabelJS ID="LabelJS1" runat="server"/>
<link rel="stylesheet" href="/admin/drag/color/colorpicker.css" type="text/css" />
<link rel="stylesheet" href="/admin/drag/color/layout.css" type="text/css" />
<link rel="Stylesheet" href="/admin/drag/css/setcarousel.css" type="text/css" />

 <div id="setCarousel">
  <table width="100%" align="center" cellpadding="1" cellspacing="1" class="CTable">
        <tr>
            <td class="lefttd" style="height: 30px; text-align: right">
                <strong>标签名称：</strong></td>
            <td runat="server" class="righttd" style="height: 30px; text-align: left">
                <asp:TextBox CssClass="noborder" ID="LabelName" runat="server" Width="250px"></asp:TextBox><span class="tips"> <font color="#FF0000">*</font> 调用格式：{KS_标签名称}</span><asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="LabelName"
                    Display="Dynamic" ErrorMessage="标签名称必须输入"></asp:RequiredFieldValidator></td>
		</tr>
		
        <tr>
        	<td colspan="2" class="td-carousel">
                	<div class="carousel-title"><span class="add-img" onclick="addImg()">+ 添加图片</span><strong>图片设置</strong></div>
                    <div class="carousel-img">
                        <ul id="carouselBox">                      
                        </ul>
                    </div>
                    
                	<div class="carousel-title"><strong>参数设置</strong></div>
                    <div class="carousel-parameter">
                    	<ul>
                        	<li class="clearfix" id="carouselType"><div class="p-name">轮播效果</div><div class="option active" data-value="slide">滑动</div><div class="option" data-value="fade">淡入淡出</div></li>
                            <li class="clearfix" id="carouselAxis"><div class="p-name">滚动方向</div><div class="option active" data-value="X">横轴滚动</div><div class="option" data-value="Y">纵轴滚动</div></li>
                            <li>
			                	<div class="p-name">设置宽度</div>
			                    <input type="checkbox" name="full" class="drag-checkbox" />
			                </li>
			                <li id="width" class="d-none">
			                    <input type="text" class="text" name="width" value="900" style="width: 100px;" class="ks-text mr10" /><span class="ks-tips">px</span>
			                </li>
			                <li>
			                	<div class="tips">不设置宽度，默认为100%;</div>
			                </li>
			                <li>
			                	<div class="p-name">高度设置</div>
			                    <input type="text" name="height" value="300" style="width: 100px;" class="text" />px
			                </li>
                        	<li><div class="p-name">左右按钮</div><input name="arrow" type="checkbox" value="" class="drag-checkbox" checked="checked" style="display:none;" /></li>
                        	<li><div class="p-name">小圆点</div><input name="dots" type="checkbox" value="" class="drag-checkbox" checked="checked" style="display:none;" /></li>
                        	<li><div class="p-name">动画执行速度</div><input name="speed" type="text" class="text" style="width:100px;" value="400" />ms</li>
                        	<li><div class="p-name">自动播放</div><input name="autoplay" type="checkbox" class="drag-checkbox" checked="checked" style="display:none;" /></li>
                        	<li><div class="p-name">自动播放间隔</div><input name="interval" type="text" value="3000" class="text" style="width:100px;" />ms</li>
                        </ul>
                    </div>
            </td>
        </tr>
        
        
    </table>
     </div>

      <div class="set-link-box">
          <div class="title"><span class="close" onClick="closeLinkBox()"></span>设置链接</div>
          <div class="ks-tab ks-tab-small">
              <ul>
                  <li class="active"><span>常用</span></li>
                  <li><span>栏目</span></li>
                  <li><span>内容</span></li>
              </ul>
          </div>
          <div class="clear"></div>
          <div class="tab-box">
              
              <div class="box">
                  <div class="box-rt" style="margin-left:0;">
                      <ul id="commonClass" class="selectClass">
                          
                      </ul>
                  </div>
              </div>
              
              <div class="box d-none">
                  <div class="box-lt">
                      <ul id="modelClass" class="mClass">
                      </ul>
                  </div>
                  <div class="box-rt">
                      <ul id="classCont" class="selectClass">
                          <div class="tips">请先选择模型</div>
                      </ul>
                  </div>
              </div>
              
              <div class="box d-none">
                  <div class="box-lt">
                      <ul id="viewClass" class="mClass">
                      </ul>
                  </div>
                  <div class="box-rt">
                      <div class="rt-sc">
                          <div class="class-select" id="select">
                              <div class="checked"><i class="icon-xiala"></i><span>全部</span></div>
                              <ul>
                                 <!--子分类赋值-->
                              </ul>
                          </div>
                          <input name="sckey" type="text" class="sc-text"><input name="" value="&#xe60a;" type="button" class="sc-button drag-font" onClick="contSearch()">
                      </div><!--rt-sc-->
                      
                      <div>
                          <ul id="viewCont" class="selectClass" style="height:120px;">
                              <div class="tips">请先选择模型</div>
                          </ul>
                      </div>
                  </div>
              </div>
              
              <div class="clear"></div>
             
          </div>
          
          
      </div>
 

     <div class="pop-button">
     	
  	    <asp:TextBox ID="LabelContent" runat="server"></asp:TextBox>
  	    <asp:HiddenField ID="HidTemplateID" runat="server" Value="0" />
        <asp:Button ID="Button1" CssClass="button" runat="server" Text="确定创建(O)" AccessKey="O" OnClick="Button1_Click"/>

           <%if (from != "drag")
             { %>
           <input type="button" class="button" onclick="javascript: parent.isreload = false; parent.box.close();" accesskey="C" value="关闭取消(C)" />
         <%}else { %>
           <input type="button" class="button" onclick="parent.closeWindow(window.name);" accesskey="C" value="关闭取消(C)" />
         <%} %><br />
     </div>

    
  <!--引入颜色选择js-->
  <script src="/admin/drag/js/colorpicker.js"></script>
 
  <script>
  	  $("#<%=this.LabelContent.ClientID %>").hide();

  	 $('#setCarousel').height(window.innerHeight-$('.pop-button').outerHeight());
  	 setTimeout(function(){
  	 	$('#setCarousel').height(window.innerHeight-$('.pop-button').outerHeight());
  	 },1000); 
  	 
  
  	  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
		/*RGB颜色转换为16进制*/
		String.prototype.colorHex = function(){
			 var that = this;
			 if(/^(rgb|RGB)/.test(that)){
				  var aColor = that.replace(/(?:\(|\)|rgb|RGB)*/g,"").split(",");
				  var strHex = "#";
				  for(var i=0; i<aColor.length; i++){
					   var hex = Number(aColor[i]).toString(16);
					   if(hex === "0"){
							hex += hex;    
					   }
					   strHex += hex;
				  }
				  if(strHex.length !== 7){
					   strHex = that;    
				  }
				  return strHex;
			 }else if(reg.test(that)){
				  var aNum = that.replace(/#/,"").split("");
				  if(aNum.length === 6){
					   return that;    
				  }else if(aNum.length === 3){
					   var numHex = "#";
					   for(var i=0; i<aNum.length; i+=1){
							numHex += (aNum[i]+aNum[i]);
					   }
					   return numHex;
				  }
			 }else{
				  return that;    
			 }
		};

		//返回16进制颜色
		function colorHexBack(value){
				return value.colorHex();
		}


  	  var $carouselBox = $('#carouselBox');
  	  var operateFlag = 'add';
  	  //选择图片
  	  function SelectFiles(target) {
  	  	 var FieldID = $(target).attr('data-id');
  	  	 var path = '';
  	  	 if(window.name!='Opentopbox'){
  	  	 	path = '../';
  	  	 }

		 top.popup.open({
				title:'选择文件', //窗口标题
				area: ['800', '500'], //窗口大小 宽×高
				drag:false, //是否支持拖动
				shade:0.1, //灰色遮罩层透明度
				scrollbar:false,//是否允许页面滚动
				zIndex:11000000,
				url:path+'Include/SelectFile.aspx?fieldID=' + FieldID + '&showtype=vision',//指向链接
		});
	 };

	 //选择图片返回值
    top.SelectImgBack = function(Src,FieldID,WindowName){
        document.getElementById(FieldID+'_text').value = Src;
        document.getElementById(FieldID).innerHTML = '<img src="'+Src+'" />';
        top.closePopup(WindowName);
        
    };

    //配置颜色选择器
    function setcolor(){
		$('.colorpickerField').each(function() {
			  var $that = $(this);
			  $(this).ColorPicker({
				  onSubmit: function(hsb, hex, rgb, el) {
					  $(el).val(hex);
					  $(el).ColorPickerHide();
				  },
				  onBeforeShow: function () {
					  $(this).ColorPickerSetColor(this.value);
				  },
				  onChange: function (hsb, hex, rgb) {
					 $that.val('#'+hex);
				  }
			  }).bind('keyup', function(){
				  $(this).ColorPickerSetColor(this.value);
			  });
            
        });
    };
    
    $('.option').click(function(){
		  $(this).addClass('active').siblings().removeClass('active');
	 });


    if(location.href.indexOf('labelid=')!=-1){
    	operateFlag = 'edit';
    	//获取轮播图图片信息
    	var $LabelContent = $(document.getElementById('<%=this.LabelContent.ClientID %>').value);
    	var index = 0;
    	$LabelContent.find('li').each(function(){
    		
    		index += 1;
    		var bgColor = $(this).css('background-color'),
    			bgUrl = $(this).css('background-image');
    		bgColor = colorHexBack(bgColor);
    		bgUrl = bgUrl.replace('url("','').replace('")','');
    		var link = '';
    		var target = 1;
    		if($(this).find('a').length!=0){
    			link = $(this).find('a').attr('href');
    			if($(this).find('a').attr('target')!='_blank'){
    				target = 0;
    			}
    		};

    		var liCode = getLiCode(index,bgColor,bgUrl,link,target);
			$carouselBox.append(liCode);
    	});
    	setcolor();

    	//获取轮播图配置信息

    	var parameter = $LabelContent.attr('drag-carousel').split(',');
		var parameterLength = parameter.length;
		var carouselArray = {};
		for(i=0;i<parameterLength;i++){
			var nodeName = parameter[i].split(':')[0];
			var nodeContent = parameter[i].split(':')[1];
			if(nodeContent === 'true' || nodeContent === 'false'){
				nodeContent = nodeContent === 'true'
			};
			if(nodeName=='speed'||nodeName=='interval'){
				nodeContent = Number(nodeContent)
			};
			carouselArray[nodeName] = nodeContent
		};
		
		//轮播效果
		if(carouselArray.scrollType!='slide'){
			$('input[name="arrow"]')[0].checked = false;
			$('#carouselType').find('.option').eq(1).click();
		};
		//左右按钮
		$('input[name="arrow"]')[0].checked = carouselArray.arrow;
		//自动播放
		
		$('input[name="autoplay"]')[0].checked = carouselArray.autoPlay;

		//滚动方向
		if(carouselArray.axis!='X'&&carouselArray.axis!='x'){
			$('#carouselAxis').find('.option[data-value="Y"]').click();
		};

		//小圆点
		if(carouselArray.dots!='1'){
			$('input[name="dots"]')[0].checked = false;
		};
		//宽度
		if(carouselArray.width!='100%'){
			$('input[name="full"]')[0].checked = true;
			$('#width').show();
			$('input[name="width"]')[0].value = carouselArray.width;
		};
		//高度
		$('input[name="height"]')[0].value = carouselArray.height;

		//播放速度
		$('input[name="speed"]')[0].value = carouselArray.speed;

		//播放间隔
		$('input[name="interval"]')[0].value = carouselArray.interval;

    }else{
    	addImg();
    };

	  function imgDelete(target){

			if($carouselBox.find('li').length <= 1){
			   alert('至少需要一张图片');
			   return false;
			};
	 		$(target).parent().remove();
		};
  	  

	  //添加图片
	  function addImg(){
		var imgLength = $carouselBox.find('li').length;
		var imgId = imgLength+1;
		var liCode = getLiCode(imgId,'#ffffff','','',1);
		$carouselBox.append(liCode);
		setcolor();
		
	  };

	  //获取添加图片代码
	  function getLiCode(imgId,bgColor,bgUrl,link,target){

	  	 var linkDataFlag = 0,
	  	 	 linkDisabled = 'disabled',
	  	 	 linkOn = '',
	  	 	 targetOption = '<option value="0">当前窗口</option><option value="1" selected>新窗口</option>';
	  	 if(target==0){
	  	 	targetOption = '<option value="0" selected>当前窗口</option><option value="1">新窗口</option>';
	  	 }
	  	 if(link!=''&&link!=undefined){
	  	 	linkDataFlag = 1;
	  	 	linkDisabled = '';
	  	 	linkOn = ' flag-link-on';
	  	 };
	  	 var img = '';
	  	 if(bgUrl!=''){
	  	 	img = '<img src="'+bgUrl+'">'
	  	 };
	  	 var linkText = link || '';
	  	 var code = '<li>'+
					'	<div class="btn-delete" onclick="imgDelete(this)" title="删除"></div>'+
					'	<div class="li-tit">图片'+imgId+'</div>'+
           			'	<div class="img-text"><input name="" type="text" value="'+bgColor+'" class="colorpickerField" /><em>|</em><input name="imgurl" type="text" placeholder="图片地址" value="'+bgUrl+'" class="text" id="imgurl_'+imgId+'_text" /></div>'+
           			'	<input data-id="imgurl_'+imgId+'" type="button" value="选择图片" class="btn btn2" onclick="SelectFiles(this)" /><div class="img_preview" id="imgurl_'+imgId+'">'+img+'</div>'+
        			'	<div class="clear"></div>'+
            		'	<div class="carousel-text">'+
            		'		<div class="c-text"><input name="linktext" type="text" value="'+linkText+'" placeholder="链接地址" class="text" '+linkDisabled+' /><div class="flag-link'+linkOn+'" data-flag="'+linkDataFlag+'" onClick="linkFlagClick(this)"></div><div class="link-icon" onclick="setLink(this)"></div></div>'+
            		'		<div class="item-select"><select class="ks-select">'+targetOption+'</select></div>'+
            		'	</div>'+
					'	<div class="clear"></div>'+
					'</li>';
		return code;
	  
	  };

	  $('[check-name="full"]').click(function(){
	  	 if($('input[name="full"]')[0].checked){
	  	 	$('#width').show();
	  	 }else{
	  	 	$('#width').hide();
	  	 }
	  });


	  //链接配置
	  var $setLinkBox = $('.set-link-box');
	  var loadFlag = false; //记录常用链接是否已加载
	  var mFlag = false; //记录模型分类是否已加载
	  var vFlag = false; //记录最新文章是否已加载
	  var $linktext;
	  
	  //设置链接选项卡切换
	  $('.ks-tab').on('click','li',function(){
		  var id = $(this).index();
		  $(this).addClass('active').siblings().removeClass('active');
		  $('.tab-box').find('.box').eq(id).fadeIn(300).siblings().hide();
		  
		  if(id==1&&mFlag==false||id==2&&mFlag==false){
				  
			    //加载模型分类
			    $.ajax({
				  url:"/plus/ajaxlabel.aspx?action=navmodellist",
				  success:function(result){
					  mFlag = true; //已加载
					  var data = result.split('$');
					  var dataLength = data.length;
					  for(var i=0;i<dataLength;i++){
						  var name = data[i].split('|')[1];
						  var id = data[i].split('|')[0];
						  $('.mClass').append('<li data-id="'+id+'">'+name+'</li>')
					  };
												  
				   }
			    });

		  };
		  
	  });

	  //链接开关
	  function linkFlagClick(obj){
		  if($(obj).attr('data-flag')==1){
			  $(obj).removeClass('flag-link-on');
			  $(obj).prev().attr('disabled',true);
			  $(obj).attr('data-flag',0);
		  }else{
			  $(obj).addClass('flag-link-on');
			  $(obj).prev().attr('disabled',false);
			  $(obj).attr('data-flag',1);
		  };
	  };

	  //关闭连接窗口
	  function closeLinkBox(){
		  $setLinkBox.fadeOut(300);
		  $('.link-icon').removeClass('active');
	  };
	  	
	  //设置链接
	  function setLink(obj){
		  $(obj).addClass('active');
		  $linktext = $(obj).parent().find('input[name=linktext]');
		  $linktext.focus();
		  var ofTop = $(obj).offset().top+35;
		  var ofBot = $(window).height()-ofTop+45;
		  $setLinkBox.fadeIn(300);
		  if(ofTop<$(window).height()/2){
			  $setLinkBox.css({top:ofTop});
		  }else{
			  $setLinkBox.css({top:'auto',bottom:ofBot});
		  };
		  
		  if(loadFlag==false){
			  $.ajax({
				  url:"/plus/ajaxlabel.aspx?action=navcommonlist",
				  success:function(data){
					  $('#commonClass').html(data);		
					  loadFlag = true;
				  }
			  });
			  
		  };
					
	  };

		//栏目-模型点击
		$('#modelClass').on('click','li',function(){
			$(this).addClass('active').siblings().removeClass('active');
			var id = $(this).attr('data-id');
			$('#classCont').html('<div class="tips">加载中...</div>');
			//加载分类
			$.ajax({
				url:"/plus/ajaxlabel.aspx?action=navclasslist&modelid="+id+"",
				success:function(result){
					if(result!=''){
						$('#classCont').html(result)
					}else{
						$('#classCont').html('<div class="tips">暂无分类数据</div>')
					};
				}
			});
			
		});
		
		//内容-模型点击
		$('#viewClass').on('click','li',function(){
			$(this).addClass('active').siblings().removeClass('active');
			var id = $(this).attr('data-id');
			$('#select').find('.checked span').html('全部');
			$('#viewCont').html('<div class="tips">加载中...</div>');
			
			//加载内容
			$.ajax({
				url:"/plus/ajaxlabel.aspx?action=navcontentlist&modelid="+id+"",
				success:function(result){
					vFlag = true; //已加载
					$('#viewCont').html(result);
												
				}
			});
			
			//加载模型对应分类
			$('#select').find('ul').html('<div class="tips">加载中...</div>');
			$.ajax({
				url:"/plus/ajaxlabel.aspx?action=navclasslist&modelid="+id+"",
				success:function(result){
					$('#select').find('ul').html(result);												
				}
			});
			
			
		});
		
		var selectFlag = false;
		$('#select').on('click','.checked',function(e){
			if(selectFlag==false){
				$(this).find('.drag-i-xiangxia').css({transform:'rotate(-180deg)'});
				$(this).next('ul').fadeIn(300);
				selectFlag = true;
			}else{
				$(this).find('.drag-i-xiangxia').css({transform:''})
				$(this).next('ul').fadeOut(300);
				selectFlag = false;
			};
			var ev = e || window.event;
			ev.stopPropagation();
		
		});
		
		
		$(document).click(function(){
			  $('#select').find('.drag-i-xiangxia').css({transform:''})
			  $('#select').find('ul').fadeOut(300);
			  selectFlag = false;
		});
		
		
		//选择下拉分类
		$('#select').on('click','li',function(){
			$(this).addClass('active').siblings().removeClass('active');
			var id = $(this).attr('classid');
			var text = $(this).text().replace(new RegExp('--',"gm"),"");
			//加载内容
			$.ajax({
				url:"/plus/ajaxlabel.aspx?action=navcontentlist&modelid="+id+"",
				success:function(result){
					$('#viewCont').html(result);
					$('#select').find('.drag-i-xiangxia').css({transform:''})
					$('#select').find('ul').fadeOut(300);
					$('#select').find('.checked span').html(text);
					selectFlag = false;
				}
			});
			
		});
		
		$('.sc-text').keyup(function(){
			contSearch();
		});
		
		function contSearch(){
			var key = $('.sc-text').val();
			var id = $('#viewClass').find('.active').attr('data-id');
			var classid = '';
			var selectId = $('#select').find('.active').attr('classid');
			if(selectId){
				classid = '&classid='+selectId+''
			};
			
			//搜索
			$.ajax({
				url:"/plus/ajaxlabel.aspx?action=navcontentlist&modelid="+id+"&key="+key+""+classid+"",
				success:function(result){
					if(result==''){
						$('#viewCont').html('<div class="tips">没有找到相关内容</div>');
					}else{
						$('#viewCont').html(result);
					};
				}
			});
			
		};
		
		//返回链接
		$('.selectClass').on('click','li',function(){
			var href = $(this).attr('url');
			$(this).addClass('active').siblings().removeClass('active');
			$linktext.val(href);
		});		
		
       
		//生成标签代码
	    function getCode(){
		   if ($.trim($("#<%=this.LabelName.ClientID%>").val())=="")
		   {
			   KesionJS.Alert('请输入标签名称!',"$('#<%=this.LabelName.ClientID%>').focus();");
			   return false;
		   }
		  var imgHtml = '';
		  var liLength = $carouselBox.find('li').length;
		  for(var l=0;l<liLength;l++){
			  var bgColor = $carouselBox.find('li').eq(l).find('.colorpickerField').val();
			  var imgUrl = $carouselBox.find('li').eq(l).find('input[name="imgurl"]').val();
			  var imgLink = $carouselBox.find('li').eq(l).find('input[name="linktext"]').val();
			  var linkFlag = $carouselBox.find('li').eq(l).find('.flag-link').attr('data-flag');
			  var target = $carouselBox.find('li').eq(l).find('.ks-select option:selected').val();
			 
			  if(target==1){
			  	  target = ' target="_blank"';
			  }else{
			  	  target = '';
			  };
			  
			  if($.trim(imgLink)==''){
			  	 imgLink = '/'
			  }

			  var backgroundUrl = '';
			  if($.trim(imgUrl)!=''){
			    backgroundUrl = ' url('+imgUrl+') no-repeat 50% 50%'
			  };
	  
			  var a = '<a style="position: absolute;width: 100%;height: 100%;left:0;top:0;" href="'+imgLink+'"'+target+'></a>';
			  if(linkFlag==0){
			  	  a = '';
			  };
			  
			  imgHtml += '		<li style="background:'+bgColor+''+backgroundUrl+';position: relative;">'+a+'</li>\n';	
		  };
	 	
	 	  
		  var type = $('#carouselType').find('.active').attr('data-value');
		  var axis = $('#carouselAxis').find('.active').attr('data-value');
		  var width = '100%';
		  if($('input[name="full"]')[0].checked){
		  	  width = $('input[name="width"]').val();
		  };
		  var height = $('input[name="height"]').val();
		  var speed = $('input[name="speed"]').val();
		  var interval = $('input[name="interval"]').val();
		  var autoplay = $('input[name="autoplay"]')[0].checked;
		  var arrow = $('input[name="arrow"]')[0].checked;
		  var dots = $('input[name="dots"]')[0].checked;
		  if(dots==true){
		  	 dots = 'dots:1,';
		  }else{
		  	dots = '';
		  };

		  imgHtml = '<div drag-carousel="object:li,scrollType:'+type+',axis:'+axis+',width:'+width+',height:'+height+',arrow:'+arrow+',autoPlay:'+autoplay+','+dots+'speed:'+speed+',interval:'+interval+'">\n'+
		  			'	<ul>\n'+
					''+imgHtml+''+
					'	</ul>\n'+
					'</div>\n';
		
		 $("#<%=this.LabelContent.ClientID %>").val('{KS:Label Type="NewSlide"}'+imgHtml+'{/KS:Label}');

		  
	  };
	  
			
	 </script>

<script src="/admin/drag/js/frame.format.js"></script>

</asp:Content>
