<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Template_Edit_Main.aspx.cs"
    Inherits="PowerEasy.Module.General.WebSite.Admin.Template.Template_Edit_Main"
    EnableTheming="false" Theme="" StylesheetTheme="" %>

<!DOCTYPE html "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>模板可视化编辑</title>
    <link href="../../Admin/JS/template/public.css" rel="stylesheet" type="text/css" />
    <link href="../../Admin/JS/template/head.css" rel="stylesheet" type="text/css" />
    <link href="../../Admin/JS/template/default.css" rel="stylesheet" type="text/css" />
    <link href="../../Admin/JS/template/Template.css" rel="stylesheet" type="text/css" />
    <link href="../../Admin/JS/template/CodeMirror/codemirror.css" rel="stylesheet" type="text/css" />
    <link href="../../Admin/JS/template/CodeMirror/default.css" rel="stylesheet" type="text/css" />
    <link href="../../Admin/JS/template/dhtmlxColorPicker/dhtmlxcolorpicker.css" rel="stylesheet"
        type="text/css" />
    <script language="javascript" type="text/javascript" src="../../Admin/JS/template/dhtmlxColorPicker/dhtmlxcommon.js"></script>
    <script language="javascript" type="text/javascript" src="../../Admin/JS/template/dhtmlxColorPicker/dhtmlxcolorpicker.js"></script>
    <script language="javascript" type="text/javascript" src="../../Admin/JS/template/CodeMirror/codemirror.js"></script>
    <script language="javascript" type="text/javascript" src="../../Admin/JS/template/CodeMirror/css.js"></script>
    <script language="javascript" type="text/javascript" src="../../Admin/JS/template/CodeMirror/xml.js"></script>
    <script language="javascript" type="text/javascript" src="../../Admin/JS/template/CodeMirror/javascript.js"></script>
    <script language="javascript" type="text/javascript" src="../../Admin/JS/template/CodeMirror/htmlmixed.js"></script>
    <!--[if lt IE 7]>
<script language="javascript"  type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min-3gmin.js"></script>
<![endif]-->
    <style type="text/css">
        .CodeMirror
        {
            border: 1px solid #eee;
        }
        .CodeMirror-scroll
        {
            height: auto;
            overflow-y: auto;
            overflow-x: auto;
            width: 100%;
        }
        .CodeMirror-gutter
        {
            z-index: 0;
        }
        .searched
        {
            background: yellow;
        }
        #PETemplateContentdivoverlay .CodeMirror
        {
            border: none;
        }
    </style>
</head>
<script language="javascript" type="text/javascript" src="../../Admin/JS/template/jquery.select.js"></script>
<script language="javascript" type="text/javascript" src="../../Admin/JS/template/jquery.peex.js"></script>
<script type="text/javascript">
    var startresize = false;
    //var closecheck = true;
    var closecheck = false;
    var CSS_Editor_Control;
    var petemplatecontenteditor;
    var containermarginright=266;
    //禁止拖动
    document.ondrag = function () { return false; };
    document.ondragstart = function () { return false; };
    window.onload=function(){
      var isIE = !!window.ActiveXObject;  
      var isIE6 = isIE && !window.XMLHttpRequest; 
      if(isIE6)
      {
       alert("为了您能更好的体验本功能，本功能不支持IE6浏览器，请使用更高级版本的浏览器!");
       window.close();
      }
       myresize();
    }

    $(document).ready(function () {
        $("#fileSelection").sSelect();
        $("#contentiframe").attr("src", "Template_WYSIWYG.aspx?Suffix=<%=suffix %>" + '&Dir=' + escape(templatedir) + '&<%=queryString %>');
         $("#contentBox").css("height", ($(window).height() - 43) + "px");
         $("#aside dl").css("height", ($(window).height() - 65) + "px");
         $("#midresize").css("height", ($(window).height() - 43) + "px");

        CSS_Editor_Control=CodeMirror.fromTextArea(document.getElementById("CSS_editor"), {
        lineNumbers: true
        });

        petemplatecontenteditor = CodeMirror.fromTextArea(document.getElementById("petemplatecontent"), { mode: "text/html", tabMode: "indent", lineNumbers: true });

        $("#aside").find(".CodeMirror-scroll").css("height",($("#CSS_editor").height()+10)+"px");

        if (! +"\v1" && !document.querySelector) { // for IE6 IE7 
            document.body.onresize = myresize;
        } else {
            window.onresize = myresize;
        }
        $("#midresize").mousedown(function (e) {
            startresize = true;
            var offset = $("#container").offset();
            $("#iframeMak").css("top", offset.top).css("left", offset.left).css("height", $("#container").height()).css("width", $("#container").width()).show();
        });
        $(document).mousemove(function (ev) {
            if (startresize) {
                var x;
                if (ev.pageX) {
                    x = ev.pageX;
                } else {
                    x = ev.clientX + document.body.scrollLeft - document.body.clientLeft;
                }
                x = $(document).width() - x;
                if (x > 260) {
                    $("#aside").css("width", x + "px");
                    containermarginright=x + 6;
                    $("#container").css("margin-right", containermarginright + "px");
                    $("#CSS_editor").css("width", (x - 53) + "px");
                    $(document.body).css("cursor", "e-resize");
                }
            }
        }).mouseup(function (e) {
            if (startresize) {
                startresize = false;
                $(document.body).css("cursor", "auto");
                $("#iframeMak").hide();
            }
        });
        CSS_Editor_Status();
    });
    //css编辑器状态
    function CSS_Editor_Status() {
        if ($('#aside').is(':hidden')) {
            $("#aside").show();
            $("#midresize").show();

            $("#aside dl").css("height", ($(window).height() - 65) + "px");
            $("#CSS_editor").css("height", ($(window).height() - 180) + "px");
            $("#aside").find(".CodeMirror-scroll").css("height",$("#CSS_editor").height()+"px");

            $("#csseditorTips").attr("title","关闭CSS编辑器").attr("alt","关闭CSS编辑器");
            $("#container").css("margin-right",containermarginright + "px");
        } else {
            $("#aside").hide();
            $("#midresize").hide();
            $("#csseditorTips").attr("title","打开CSS编辑器").attr("alt","打开CSS编辑器");
            $("#container").css("margin-right","0");
        }
    }
    //iframe onload
    function contentiframeload()
    {
      $("#cssfilelist").empty();
      try{
      CSS_Editor_Control.setValue('');
      }catch(e)
      {}
      $("<option value='' selected='true'>选择文件</option>").appendTo("#cssfilelist");
      var file='';
      $(window.frames["contentiframe"].document).find("link").each(function(){
         file=$(this).attr("href");
         if(file.substr(0,7).toLowerCase()!="http://" && file.substr(0,8).toLowerCase()!="https://")
         {
            $('<option value="'+ file +'">' + getFileName(file) +'</option>').appendTo("#cssfilelist");
         }
      });
      setSelectValue("fileSelection");
    }
    //取文件名
    function getFileName(path) {
        var pos1 = path.lastIndexOf('/');
        var pos2 = path.lastIndexOf('\\');
        var pos = Math.max(pos1, pos2)
        var fileName;
        if (pos < 0)
            fileName = path;
        else
            fileName = path.substring(pos + 1);
        pos = fileName.indexOf('?');
        if (pos > 0) {
            fileName = fileName.substr(0, pos);
        }
        return fileName;
    }
    //调整事件
    function myresize() {
        if (!startresize) {
            $("#contentBox").css("height", ($(window).height() - 43) + "px");
            $("#aside dl").css("height", ($(window).height() - 65) + "px");
            $("#midresize").css("height", ($(window).height() - 43) + "px");
            $("#CSS_editor").css("height", ($(window).height() - 180) + "px");
            $("#aside").find(".CodeMirror-scroll").css("height",$("#CSS_editor").height()+"px");
        }
    }
    //刷新按钮
    function Refresh() {
        $("#contentiframe").attr("src", "Template_WYSIWYG.aspx?Suffix=<%=suffix %>" + '&Dir=' + escape(templatedir) + '&' + $("#urltext").val());
    }
    //编辑
    function getCssFile() {
        var cssfile = $("#cssfilelist").val();
        if (cssfile != "") {
            CSS_Editor_Control.setValue("正在加载中......");
            $.post('Template_EditLabel.aspx?Ajax=true&Suffix=<%=suffix %>', "<?xml version='1.0' encoding='utf-8'?><root><type>getcssfile</type><dir>" + UrlEncode(cssfile) + "</dir></root>", function (s) {
                var status = $("status", s).text();
                if (status == "err") {
                    alert($("body", s).text());
                    CSS_Editor_Control.setValue("");
                } else {
                    CSS_Editor_Control.setValue(UrlDecode($("body", s).text()));
                }
            });
        }
        else
        {
          CSS_Editor_Control.setValue("");
        }
    }
    //保存
    function saveCssFile(obj) {
        var cssfile = $("#cssfilelist").val();
        if (cssfile != "") {
            $(obj).attr("disabled", true);
            $.post('Template_EditLabel.aspx?Ajax=true&Suffix=<%=suffix %>', "<?xml version='1.0' encoding='utf-8'?><root><type>savecssfile</type><dir>" + UrlEncode(cssfile) + "</dir><content>" + UrlEncode(CSS_Editor_Control.getValue()) + "</content></root>", function (s) {
                var status = $("status", s).text();
                if (status == "err") {
                    alert($("body", s).text());
                    $(obj).attr("disabled", false);
                } else {
                    // window.frames["contentiframe"].document.location.reload();
                    $(window.frames["contentiframe"].document).find("link").each(function () {
                        file = $(this).attr("href");
                        if (file.substr(0, 7).toLowerCase() != "http://" && file.substr(0, 8).toLowerCase() != "https://") {
                            if ($(this).attr("href").indexOf('?') > 0) {
                                $(this).attr("href", $(this).attr("href") + Math.random());
                            } else {
                                $(this).attr("href", $(this).attr("href") + "?" + Math.random());
                            }
                        }
                    });
                    alert('保存成功！');
                    //延时2秒刷新CSS
                    setTimeout(function(){window.frames["contentiframe"].petemplate.resize();},2000);

                    $(obj).attr("disabled", false);
                }
            });
        } else {
            alert('请选择要编辑的文件！');
        }
    }

    function Save(flag) {
        if (confirm("确定要保存？")) {
            closecheck = false;
            $.post('Template_EditLabel.aspx?Ajax=true&Suffix=<%=suffix %>', "<?xml version='1.0' encoding='utf-8'?><root><type>savetemplate</type><dir>" + UrlEncode(templatedir) + "</dir><deltemp>" + (flag ? "true" : "false") + "</deltemp></root>", function (s) {
                var status = $("status", s).text();
                if (status == "err") {
                    alert($("body", s).text());
                } else {
                    alert('保存成功！');
                    if(flag)
                    {
                    window.close();
                    }
                }
            });
        }
    }

    function Reload() {
        if (confirm("前面的修改将会被放弃，确定要重新载入？")) {
            closecheck = false;
            $.post('Template_EditLabel.aspx?Ajax=true&Suffix=<%=suffix %>', "<?xml version='1.0' encoding='utf-8'?><root><type>reload</type><dir>" + UrlEncode(templatedir) + "</dir></root>", function (s) {
                var status = $("status", s).text();
                if (status == "err") {
                    alert($("body", s).text());
                } else {
                    window.frames["contentiframe"].document.location.reload();
                }
            });
        }
    }

     function UrlEncode(inputStr){           
        var resultArr=[];   
        var chars="!\"#$%&'()*+,/:;<=>?[]^`{|}~%";                
        for(var i=0;i<inputStr.length;i++){              
            var tmpChar = inputStr.charAt(i);              
            var c = inputStr.charCodeAt(i);                      
            if(c > 0x7E){                   
                resultArr[i]=encodeURI(tmpChar);             
            }else{                   
                if(tmpChar==" ")                      
                    resultArr[i]="+";                   
                else if(chars.indexOf(tmpChar)!=-1)                      
                    resultArr[i]="%"+c.toString(16);                   
                else                      
                    resultArr[i]=tmpChar;                  
            }              
        }          
        return resultArr.join("");      
    }

    function UrlDecode(inputStr) {
        var resultArr = [];
        for (var i = 0; i < inputStr.length; i++) {
            var chr = inputStr.charAt(i);
            if (chr == "+") {
                resultArr[resultArr.length] = " ";
            } else if (chr == "%") {
                var asc = inputStr.substring(i + 1, i + 3);
                if (parseInt("0x" + asc) > 0x7f) {
                    resultArr[resultArr.length] = decodeURI(inputStr.substring(i, i + 9));
                    i += 8;
                } else {
                    resultArr[resultArr.length] = String.fromCharCode(parseInt("0x" + asc));
                    i += 2;
                }
            } else {
                resultArr[resultArr.length] = chr;
            }
        }
        return resultArr.join("");
    }

    //关闭前的检查
    window.onbeforeunload = function (evt) {
        var e = (evt) ? evt : window.event;
        if (window.event) {
            e.cancelBubble = true;
        } else {
            e.stopPropagation();
        }
        if (closecheck) {
            var flag = false;
            $.ajax({
                url: 'Template_EditLabel.aspx?Ajax=true&Suffix=<%=suffix %>',
                type: 'POST',
                dataType: 'xml',
                data: "<?xml version='1.0' encoding='utf-8'?><root><type>checksave</type><dir>" + UrlEncode(templatedir) + "</dir></root>",
                error: function (s) {
                    flag = false;
                },
                success: function (s) {
                    var status = $("status", s).text();
                    if (status == "err") {
                        flag = false;
                    } else {
                        if ($("body", s).text() == "") {
                            flag = false;
                        } else {
                            flag = true;
                        }
                    }
                },
                async: false
            }).responseText;
            if (flag) {
                e.returnValue = '您的修改还没有保存，是否离开？';
                return ("您的修改还没有保存，是否离开？");
            }
            else {
                return;
            }
        } else {
            return;
        }
    }
    function editTemplateSelect() {
        window.frames["contentiframe"].petemplate.editTemplateSelect(false);
    }

    function getcolor(obj) {
        var myLang = { langname: "zh-cn", labelHue: "H", labelSat: "S", labelLum: "L", labelRed: "红", labelGreen: "绿", labelBlue: "蓝", btnAddColor: "添加到自定义", btnSelect: "确定", btnCancel: "关闭" };
        if (!window.dhtmlxColorPickerLangModules) window.dhtmlxColorPickerLangModules = {}; window.dhtmlxColorPickerLangModules["zh-cn"] = myLang;
        var myCP = new dhtmlXColorPicker("colorPicker", null, true);
        myCP.setImagePath("../../Admin/JS/template/dhtmlxColorPicker/imgs/");
        myCP.loadUserLanguage("zh-cn");
        myCP.init();
        var offset = $(obj).offset();
        $("#colorPicker").css("top", (offset.top + 10) + "px");
        if ($(document).width() < (offset.left + $("#colorPicker").width())) {
            $("#colorPicker").css("left", ($(document).width() - $("#colorPicker").width() - 20) + "px");
        } else {
            $("#colorPicker").css("left", offset.left + "px");
        }
    }
    /********搜索*******/
    var lastPos = null, lastQuery = null, marked = [];
    function unmark() {
        for (var i = 0; i < marked.length; ++i) marked[i].clear();
        marked.length = 0;
    }
    function search() {
        unmark();
        var text = document.getElementById("csstxt").value;
        if (!text) return;
        for (var cursor = CSS_Editor_Control.getSearchCursor(text); cursor.findNext(); )
            marked.push(CSS_Editor_Control.markText(cursor.from(), cursor.to(), "searched"));

        if (lastQuery != text) lastPos = null;
        var cursor = CSS_Editor_Control.getSearchCursor(text, lastPos || CSS_Editor_Control.getCursor());
        if (!cursor.findNext()) {
            cursor = CSS_Editor_Control.getSearchCursor(text);
            if (!cursor.findNext()) return;
        }
        CSS_Editor_Control.setSelection(cursor.from(), cursor.to());
        lastQuery = text; lastPos = cursor.to();
    }

    /***************编辑内容时高亮组件问题*******************/
    function ShowEditorContent(dir, sid, eid) {
        //高亮组件
        jQuery.post('Template_EditLabel.aspx?Ajax=true&Suffix=<%=suffix %>', "<?xml version='1.0' encoding='utf-8'?><root><type>geteditcontent</type><dir>" + UrlEncode(dir) + "</dir><sid>" + sid + "</sid><eid>" + eid + "</eid></root>", function (s) {
            var status = jQuery("status", s).text();
            if (status == "ok") {
                jQuery("#PETemplateContentdivoverlay").find("#sid").val(sid);
                jQuery("#PETemplateContentdivoverlay").find("#eid").val(eid);
                jQuery("#PETemplateContentdivoverlay").find("#dir").val(dir);
                jQuery("#PETemplateContentdivoverlay").find("#petemplatecontent").val(jQuery("body", s).text());
                petemplatecontenteditor.setValue(jQuery("body", s).text());
                jQuery("#PETemplateContentdivoverlay").overlay({ "api": true, "expose": true }).load();
            } else {
                alert(jQuery("body", s).text());
            }
        });
    }

    function Templatecancel(evt) {
        var e = (evt) ? evt : window.event;
        if (window.event) {
            e.cancelBubble = true;
        } else {
            e.stopPropagation();
        }
        jQuery("#PETemplateContentdivoverlay").find(".overlay_header_close").click();
    }

    /*************保存模板编辑***************/
    function SaveTemplatedate(evt) {
        var e = (evt) ? evt : window.event;
        if (window.event) {
            e.cancelBubble = true;
        } else {
            e.stopPropagation();
        }
        var sid = jQuery("#PETemplateContentdivoverlay").find("#sid").val();
        var eid = jQuery("#PETemplateContentdivoverlay").find("#eid").val();
        var dir = jQuery("#PETemplateContentdivoverlay").find("#dir").val();
        var content = petemplatecontenteditor.getValue();
        jQuery.post('Template_EditLabel.aspx?Ajax=true&Suffix=<%=suffix %>', "<?xml version='1.0' encoding='utf-8'?><root><type>editcontent</type><dir>" + UrlEncode(dir) + "</dir><sid>" + sid + "</sid><eid>" + eid + "</eid><content>" + UrlEncode(content) + "</content></root>", function (s) {
            var status = jQuery("status", s).text();
            if (status == "err") {
                alert(jQuery("body", s).text());
            } else {
                window.frames["contentiframe"].location.reload();
            }
        });
        jQuery("#PETemplateContentdivoverlay").find(".overlay_header_close").click();
    }
    /*****************************/
    function selectmode_onchange(obj) {
        var modeid = $(obj).val();
        window.frames["contentiframe"].petemplate.modeid = modeid;
        window.frames["contentiframe"].petemplate.resize();
    }

    var templatedir = '<%=templatePath.Replace("'","%27") %>';

</script>
<body>
    <!--header S-->
    <div id="header">
        <!--link S-->
        <div style="float: left; padding-left: 5px;">
            <span title="标签查找模式" alt="标签查找模式">模式：</span> <span>
                <select name="selectmode" onchange="selectmode_onchange(this);">
                    <option value="0" selected="selected">自动优化</option>
                    <option value="1">标准模式</option>
                    <option value="2">基础模式</option>
                </select>
            </span>
        </div>
        <div class="link">
            <ul>
                <li>URL参数：</li>
                <li>
                    <input id="urltext" type="text" placeholder="URL参数" value="<%=queryString %>">
                </li>
                <li class="btn"><a href="#" onclick="Refresh();return false;">刷新</a></li>
            </ul>
        </div>
        <!--link E-->
        <!--nav S-->
        <div id="nav">
            <ul>
                <li class="line"></li>
                <li><a href="#" title="重新载入--前面的修改将会被放弃" onclick="Reload();return false;">重新载入</a></li>
                <li class="line"></li>
                <li><a href="#" title="页面元素编辑" onclick="editTemplateSelect();return false;">页面元素编辑</a></li>
                <li class="line"></li>
                <li><a href="StyleManage.aspx" target="_blank" title="风格管理">风格管理</a></li>
                <li class="line"></li>
                <li><a id="csseditorTips" href="#" title="关闭CSS编辑器" onclick="CSS_Editor_Status();return false;">
                    CSS编辑器</a></li>
                <li class="line"></li>
                <li><a href="#" title="保存" onclick="Save(false);return false;">保存</a></li>
                <li class="line"></li>
                <li><a href="#" title="保存并退出" onclick="Save(true);return false;">保存并退出</a></li>
                <li class="line"></li>
                <li><a href="#" title="退出" onclick="window.close();return false;">退出</a></li>
            </ul>
        </div>
        <!--nav E-->
    </div>
    <!--header E-->
    <div id="colorPicker" style="position: absolute; top: 150; left: 200; z-index: 200;">
    </div>
    <!--mainContent S-->
    <div id="mainContent" class="">
        <!--right aside S-->
        <div id="aside">
            <dl>
                <dt>
                    <div class="tit">
                        <ul>
                            <li class="close"><a class="png" href="#" title="关闭工具栏" onclick="CSS_Editor_Status();return false;">
                                关闭工具栏</a></li>
                            <li class="line"></li>
                            <li class="tool">
                                <div class="blockline">
                                </div>
                                <a href="#">工具栏</a>
                                <div class="toolMs">
                                    <ul>
                                        <li><a class="t1 png" href="#" title="取色器" onclick="getcolor(this);return false;">取色器</a></li>
                                    </ul>
                                </div>
                            </li>
                            <li class="line"></li>
                        </ul>
                    </div>
                </dt>
                <dd>
                    <div class="con">
                        <div class="hd">
                            <div id="fileSelection" class="dropdown" tabindex="0">
                                <select id="cssfilelist" name="birthday">
                                    <option value="">选择文件</option>
                                </select>
                            </div>
                        </div>
                        <div class="bd">
                            <textarea title="CSS编辑器" class="code" id="CSS_editor" rows="" cols="" name="" accesskey="1"
                                tabindex="1" style=""></textarea>
                        </div>
                        <div class="ft">
                            <input id="CSSSAVE" type="button" value="保存" onclick="saveCssFile(this);" /></div>
                    </div>
                </dd>
                <div class="bot">
                </div>
            </dl>
        </div>
        <!--right aside E-->
        <div id="midresize" style="float: right; width: 6px; height: 200px; cursor: e-resize;">
        </div>
        <!--container S-->
        <div id="container">
            <div id="contentBox">
                <iframe scrolling="auto" frameborder="0" border="0" marginwidth="0" marginheight="0"
                    style="width: 100%; height: 100%;" onload="contentiframeload();" src="" name="contentiframe"
                    id="contentiframe"></iframe>
            </div>
        </div>
        <!--container E-->
        <div class="clearbox">
        </div>
    </div>
    <div id="iframeMak" style="display: none; filter: alpha(opacity=100); opacity: 0;
        z-index: 9999; position: absolute;">
    </div>
    <div id="selectTips" style="display: none; position: absolute; z-index: 9999; background-color: #FCFCCF;
        border: 1px solid #F7F790; width: 220px; word-wrap: break-word;">
    </div>
    <div style="display: none; position: absolute;" id="PETemplateContentdivoverlay">
        <div class="overlay" style="width: 600px; height: 400px">
            <div class="overlay_header" style="cursor: move;">
                <span class="overlay_header_title_sign"></span>
                <h3 class="overlay_header_title">
                    页面元素编辑</h3>
                <span class="overlay_header_background_right"></span><a href="javascript:void(0)"
                    class="overlay_header_close"></a>
            </div>
            <div class="overlay_body">
                <div id="contentbody">
                    <input type="hidden" id="dir" />
                    <input type="hidden" id="sid" />
                    <input type="hidden" id="eid" />
                    <textarea id="petemplatecontent"></textarea>
                </div>
                <div id="contentbuttom">
                    <input type="button" onclick="SaveTemplatedate(event);" value="保存" class="inputbutton">
                    <input type="button" onclick="Templatecancel(event);" value="取消" class="inputbutton">
                </div>
            </div>
        </div>
    </div>
    <!--mainContent E-->
    <!--JS-->
    <script>
        $(document).ready(function () {
            $('.toolMs,#aside li.tool').bind({
                'mouseenter': function () {
                    $('#aside li.tool').addClass('hover');
                    $('.toolMs').slideDown(200);
                    try { clearTimeout(timer); } catch (e) { }
                },
                'mouseleave': function () {
                    timer = setTimeout(function () {
                        $('.toolMs').hide();
                        $('#aside li.tool').removeClass('hover');
                    }, 200);
                }
            });
        })

        $(document).ready(function () {
            $('.toolMs li').hover(
	function () {
	    var id = $('.toolMs li').index(this);
	    $(this).addClass('hover');
	},
	 function () {
	     var id = $('.toolMs li').index(this);
	     $(this).removeClass('hover');
	 }
	);
        });	


    </script>
</body>
</html>
