<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="default.aspx.vb" Inherits="MESSmartClient._default" %>

<html>
<head>
    <title>MES Series 6.1.0</title>
    <%--<link rel="shortcut icon" href="images/Logo.png">--%>
    <link rel="stylesheet" type="text/css" href="CSS/Font.css">
    <link rel="stylesheet" type="text/css" href="CSS/jquery.mCustomScrollbar.min.css">
    <meta name="mobile-web-app-capable" charset="big5" content="yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="js/qrcode.min.js"></script>
    <script src="js/custom-protocol-check.min.js"></script>
    <style type="text/css">
        #view.computer {
            background-image: url( images/Home/computer.png);
            background-repeat: no-repeat;
        }

        #view.computer_kmi {
            background-image: url( images/Home/computer_kmi_small.png);
            background-repeat: no-repeat;
        }

        #view.computer_imes {
            background-image: url( images/Home/computer_imes_small.png);
            background-repeat: no-repeat;
        }

        #view.computer_fine {
            background-image: url( images/Home/computer_fine_small.png);
            background-repeat: no-repeat;
        }

        #view.pad {
            background-image: url( images/Home/view_pad_small_bak.png);
            background-repeat: no-repeat;
        }

        #view.pda {
            background-image: url( images/Home/view_pda_small_bak.png);
            background-repeat: no-repeat;
        }

        * {
            -webkit-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none;
            letter-spacing: 1px;
            font-family: 'Noto Sans TC', sans-serif,'Noto Sans SC', sans-serif;
            color: rgb(61,61,61);
        }

        body {
            margin: 16px 16px 0;
            min-height: 752px;
            min-width: 1334px;
            font-size: 14px;
            background: url(images/Home/background-01tmp.png),rgb(238,242,248);
            background-repeat: no-repeat;
        }

        a {
            text-decoration: none;
        }

        .item-selected {
            background-color: white !important;
        }

        .item-hide {
            display: none !important;
        }

        .can-click {
            position: absolute;
            height: 100%;
            width: 100%;
            top: 0px;
            left: 0px;
            cursor: pointer;
            border-radius: 16px;
            transition: all .2s ease-in-out;
            -webkit-transition: all .2s ease-in-out;
        }

            .can-click:hover {
                background-color: rgba(200, 200, 200, 0.3);
            }


        .left {
            float: left;
        }

        .right {
            float: right;
        }

        .fill {
            height: 100%;
        }

        .vertical-margin {
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
        }

        .vertical-tran {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        .horizontal-tran {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }

        .tranXY {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }

        .posR {
            position: relative;
        }

        .txtCen {
            text-align: center;
        }

        .home {
            height: 752px;
            width: 1334px;
            overflow: auto;
        }

            .home .top-area {
                height: 640px;
                width: 100%;
            }

            .home .bottom-area {
                margin-top: 11px;
                height: 100px;
                width: 100%;
                border-width: 1px;
                border-top-style: solid;
                border-color: white;
            }

                .home .bottom-area .download-area {
                    width: 50%;
                    height: 100%;
                }

                    .home .bottom-area .download-area .downloadItems {
                        margin-left: 10px;
                        height: 64px;
                    }

                        .home .bottom-area .download-area .downloadItems .item {
                            margin: 6px 0 6px 0;
                            line-height: 20px;
                            height: 20px;
                            font-size: 12px;
                            font-weight: 400;
                            display:flex;
                        }

                       .home .bottom-area .download-area .downloadItems .item  .can-click {
                            border-radius: 4px;
                        }

                            .home .bottom-area .download-area .downloadItems .item label {
                                /*position: absolute;*/
                                margin-left: 16px;
                            }

                .home .bottom-area .logo {
                    width: 50%;
                    height: 100%;
                }

                    .home .bottom-area .logo .copyright {
                        height: 55px;
                    }

                    .home .bottom-area .logo div {
                        right: 0;
                        font-size: 12px;
                        font-weight: 400;
                    }

                    .home .bottom-area .logo img {
                        width: 60px;
                        height: 60px;
                        right: 288px;
                    }

            .home .top-area .func-area {
                width: 1006px;
                height: 100%;
            }

                .home .top-area .func-area .view-area {
                    height: 440px;
                    width: 100%;
                }

                    .home .top-area .func-area .view-area .img-area {
                        width: 485px;
                        height: 100%;
                    }

                        .home .top-area .func-area .view-area .img-area .view {
                            width: 485px;
                            height: 440px;
                            bottom: 0;
                            background-size: 485px 440px;
                        }

                    .home .top-area .func-area .view-area .info-area {
                        width: 505px;
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                    }

                        .home .top-area .func-area .view-area .info-area .fill.gen-fill {
                            height: calc(100% - 174px - 40px - 32px - 25px);
                        }

                        .home .top-area .func-area .view-area .info-area .fill.qrcode-fill {
                            height: calc(100% - 174px - 120px - 16px - 25px);
                        }

                        .home .top-area .func-area .view-area .info-area .Info-txt {
                            margin: 0 16px 0;
                        }

                            .home .top-area .func-area .view-area .info-area .Info-txt .company {
                                height: 60px;
                                line-height: 60px;
                                font-size: 34px;
                                font-weight: 300;
                            }

                            .home .top-area .func-area .view-area .info-area .Info-txt .item-Info-txt {
                            }

                                .home .top-area .func-area .view-area .info-area .Info-txt .item-Info-txt .client {
                                    height: 80px;
                                    line-height: 80px;
                                    font-size: 60px;
                                    font-weight: 900;
                                }

                                .home .top-area .func-area .view-area .info-area .Info-txt .item-Info-txt .device {
                                    height: 34px;
                                    line-height: 34px;
                                    font-weight: 400;
                                    color: rgba(61,61,61,0.3);
                                }

                        .home .top-area .func-area .view-area .info-area .open-area {
                            margin: 32px 0 0 16px;
                        }

                            .home .top-area .func-area .view-area .info-area .open-area .open {
                                width: 140px;
                                height: 40px;
                                line-height: 40px;
                                border-radius: 16px;
                                background-color: rgb(254,176,77);
                            }

                                .home .top-area .func-area .view-area .info-area .open-area .open img {
                                    position: absolute;
                                    left: 32px;
                                    top: 10px;
                                    width: 20px;
                                    height: 20px;
                                }

                                .home .top-area .func-area .view-area .info-area .open-area .open label {
                                    position: absolute;
                                    left: 68px;
                                    color: white;
                                }

                        .home .top-area .func-area .view-area .info-area .QRCode-area {
                            height: 120px;
                            margin-top: 16px;
                        }

                            .home .top-area .func-area .view-area .info-area .QRCode-area .QRCode {
                                height: 104px;
                                width: 104px;
                                margin-left: 16px;
                                padding: 8px;
                                background-color: white;
                            }

                            .home .top-area .func-area .view-area .info-area .QRCode-area .QRCode-msg-area {
                                display: flex;
                                flex-direction: column;
                                height: 100%;
                                margin-left: 16px;
                            }

                                .home .top-area .func-area .view-area .info-area .QRCode-area .QRCode-msg-area .QRCode-msg {
                                    height: 34px;
                                    line-height: 34px;
                                    color: rgb(104,134,189);
                                    font-weight: 400;
                                }

                .home .top-area .func-area .funcItems {
                    height: 184px;
                    margin-top: 16px;
                    width: 100%;
                }

                    .home .top-area .func-area .funcItems .change {
                        width: 40px;
                        height: 100%;
                    }

                        .home .top-area .func-area .funcItems .change .can-click {
                            border-radius: 4px;
                        }

                        .home .top-area .func-area .funcItems .change img {
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%,-50%);
                        }

                    .home .top-area .func-area .funcItems .items {
                        width: calc(100% - 80px);
                        overflow: hidden;
                        white-space: nowrap;
                        display: flex;
                        height: 100%;
                    }

                        .home .top-area .func-area .funcItems .items .img {
                            width: 80px;
                            height: 80px;
                        }

                        .home .top-area .func-area .funcItems .items .img1 {
                            background-image: url(images/Home/1_normal.png);
                        }

                        .home .top-area .func-area .funcItems .items .img2 {
                            background-image: url(images/Home/5_normal.png);
                        }

                        .home .top-area .func-area .funcItems .items .img3 {
                            background-image: url(images/Home/2_normal.png);
                        }

                        .home .top-area .func-area .funcItems .items .img4 {
                            background-image: url(images/Home/3_normal.png);
                        }

                        .home .top-area .func-area .funcItems .items .img5 {
                            background-image: url(images/Home/1_normal.png);
                        }

                        .home .top-area .func-area .funcItems .items .img1.selected {
                            background-image: url(images/Home/1_select.png);
                        }

                        .home .top-area .func-area .funcItems .items .img2.selected {
                            background-image: url(images/Home/5_select.png);
                        }

                        .home .top-area .func-area .funcItems .items .img3.selected {
                            background-image: url(images/Home/2_select.png);
                        }

                        .home .top-area .func-area .funcItems .items .img4.selected {
                            background-image: url(images/Home/3_select.png);
                        }

                        .home .top-area .func-area .funcItems .items .img5.selected {
                            background-image: url(images/Home/1_select.png);
                        }


                        .home .top-area .func-area .funcItems .items .item {
                            width: calc((100% - ((<%=GetItemCount()%> - 1) *16px)) /<%=GetItemCount()%>);
                            height: 100%;
                            border-radius: 16px;
                            /*display: inline-block;*/
                        }

                            .home .top-area .func-area .funcItems .items .item .item-img-area {
                                position: relative;
                                height: 80px;
                                width: 100%;
                            }

                            .home .top-area .func-area .funcItems .items .item .client {
                                height: 38px;
                                line-height: 38px;
                                font-size: 18px;
                                font-weight: 700;
                            }

                            .home .top-area .func-area .funcItems .items .item .device {
                                height: 34px;
                                line-height: 34px;
                                color: rgba(61,61,61,0.3);
                                font-weight: 400;
                            }

                            .home .top-area .func-area .funcItems .items .item.margin {
                                margin-right: 16px;
                            }


            .home .top-area .msg-area {
                width: 310px;
                height: 100%;
                border-radius: 16px;
                background-color: white;
            }

                .home .top-area .msg-area .title {
                    margin: 0 16px 0 16px;
                    line-height: 60px;
                    font-size: 18px;
                    font-weight: 700;
                    border-width: 1px;
                    border-bottom-style: solid;
                    border-color: rgb(238,242,248);
                }

                .home .top-area .msg-area .data {
                    height: calc(100% - 61px - 32px);
                    margin: 16px;
                    overflow: hidden;
                }

                    .home .top-area .msg-area .data.Indent {
                        margin: 16px 0 16px 16px !important;
                    }

                    .home .top-area .msg-area .data .mCSB_container {
                        margin-right: 20px !important;
                    }

                    .home .top-area .msg-area .data .mCSB_draggerRail {
                        width: 6px !important;
                    }

                    .home .top-area .msg-area .data .mCSB_dragger_bar {
                        width: 5px !important;
                    }

        /*不使用跑馬燈*/
        /*.home .top-area .msg-area .sysmsg-area .data .marquee {
                            width: 100%;
                            height: 100%;
                            color: white;
                            overflow: hidden;
                            box-sizing: border-box;
                        }

                            .home .top-area .msg-area .sysmsg-area .data .marquee div {
                                height: calc( 100VH - 60px);
                                width: 100%;
                                padding-top: calc( 100VH - 60px);
                                animation: marquee 15s linear infinite;
                                white-space: normal;
                                word-break: break-word;
                                color: rgba(61,61,61,0.3);
                            }

        @keyframes marquee {
            0% {
                transform: translate(0, 0);
            }

            100% {
                transform: translate(0%, -100%);
            }
        }*/


        @media screen and (min-width: 1367px) {
            .home {
                width: 100%;
            }

                .home .top-area {
                    width: 100%;
                }

                .home .bottom-area {
                    width: 100%;
                }

                .home .top-area .func-area {
                    width: calc( (100% - 16px)*0.8 );
                }

                    .home .top-area .func-area .view-area {
                    }

                        .home .top-area .func-area .view-area .img-area {
                            width: calc((100% - 16px)*0.5);
                        }

                        .home .top-area .func-area .view-area .info-area {
                            width: calc((100% - 16px)*0.5);
                        }

                    .home .top-area .func-area .funcItems {
                    }

                .home .top-area .msg-area {
                    width: calc( (100% - 16px)*0.2 );
                }
        }

        @media screen and (min-height: 769px) {
            .home {
                height: 100%;
            }

                .home .top-area {
                    height: calc((100% - 12px)*0.9);
                }

                .home .bottom-area {
                    height: calc((100% - 12px)*0.1);
                }

                .home .top-area .func-area {
                }

                    .home .top-area .func-area .view-area {
                        height: calc((100% - 16px)/9*6);
                    }

                        .home .top-area .func-area .view-area .img {
                        }

                        .home .top-area .func-area .view-area .info-area {
                        }

                    .home .top-area .func-area .funcItems {
                        height: calc((100% - 16px)/9*3);
                    }

                .home .top-area .msg-area {
                }
        }
    </style>

    <%--  <style type="text/css">
        .header {
            background:#1ab7cd;
            height: 20px;
        }
		body{
		   	margin: 0px;		
				background: url('images/BG.jpg')  no-repeat ;					
				font-family: Microsoft JhengHei;
				overflow:hidden;			
				background-size: cover; 
	    }
		
        .sub-menu-show{
			white-space: nowrap;
			width:auto;	
			}
		.menu-item{
			width: 220px;
			height: 220px;
			box-sizing: border-box;
			overflow: hidden;
			font-weight: bold;
			color:black;
			position: relative;
			background-size: cover;
		}
		.menu-item,.center-link,.announcement{
			font-size: 20px;
			overflow:hidden;
			cursor: pointer;
			color: #ffffff;
		}
		.menu-item img{
			position: absolute;
			bottom: 90px;
			left: 50%;
			margin-left: -35px;
			border:0px;
			width: 70px;
			height: 70px;
		}
		.menu-background{
			position: absolute;
			top: 50px;
			left: 0px;
			width: 0;
			height: 0;
			border-style: solid;
			border-color: #efefef #efefef #f7f7f7 #f7f7f7;
			border-width: 128px 0px 0px 128px;
			z-index: 0;
		}
		.kmi-can-click{
			position: absolute;
			height: 100%;
			width: 100%;
			top: 0px;
			left:0px;
			z-index: 2;
			cursor: pointer;	
			transition: all .3s ease-in-out;
			-webkit-transition: all .3s ease-in-out;
		}
		.content-style{
			display: flex;
			align-items: center;
			flex-direction: column;
			flex: 4;
			margin-left: 20%;
			margin-right: 20%;
			min-height: 450px;
		}
		.announcement{
			border:1px #AFDFE6 solid;
			border-width:1px 0px;			
			box-shadow: 0px 12px 8px -8px #9E9E9E;
			flex:1;
			width:580px;
			height:30vh;
			flex-direction:column;
			background: rgba(255, 255 , 255 , 0.8);
			padding: 0 10px;
			box-sizing: border-box;
			cursor: auto;
		}
		.center-link{
			display: flex;
			/*color: #f39700;*/
			/*padding-right: 100px;*/
			/*padding-left: 40px;*/
			width: 100%;
			/*padding-top: 50px;*/
			padding-bottom: 10px;
			font-weight: bold;
	        background: rgba(255, 255 , 255 , 0.8);
            padding: 0 10px;
            box-sizing: border-box;
		}
		.fixed-fields{
			overflow: hidden;			
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -196px;
			margin-left: -452px;
			z-index:1;
		}
		.reline{
			display:inline-block;
			margin-right:8px;
			text-decoration: none;
		}
		.range{
			flex: 1;
			width: 100%;	
		}
		.center_reline{
		    color: #f39700;
			text-decoration: none;
		}
		.imgworksmart{
			width:35%;
			flex-direction:column;
			display:flex;
			position:relative;
			left:32%;
        }	
		.system_info{
			position: absolute;
			bottom: 80px;
			left:50%;
			margin-left:-290px;
		}
		
		.footer{						
			bottom:0px;
			right:0px;
			text-align:right;
			font-size:4px;
		}
		.footer>div{
			position:relative;		
			bottom:-15px;
		}
		.footer>img{
			background-size:cover;
			height: 47px;
			width: 36px;
			position:absolute;
			right: 36px;
			bottom: 18px;
		}
		#QR_dialog ,#QR_dialog_PDA{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}
		#QRCode,#QRCode_PDA{
		    position: absolute;
			top: 50%;
			left: 50%;
			padding: 28px;
			padding-top: 0px;
			margin-top: -144px;
			margin-left: -144px;
			border-radius: 6px;
			background: #ffffff;
		}
		#QRCode .close-btn,#QRCode_PDA .close-btn{
			position: absolute;
			top: -16px;
			right: -24px;
			border: 6px solid #ffffff;
			border-radius: 50%;
		}
		#QRCode .close-btn, #QRCode_PDA .close-btn{
			position: absolute;
			top: -24px;
			right: -44px;
			border: 14px solid #ffffff;
			border-radius: 50%;
			cursor: pointer;
		}
		@media (min-height: 800px) {
		   .header {
				background:#1ab7cd;
				height: 20px;
			}
			body{
				margin: 0px;		
				background: url('images/BG.jpg')  no-repeat ;					
				font-family: Microsoft JhengHei;
				overflow:hidden;			
				background-size: cover; 
			}
			       .sub-menu-show{
			white-space: nowrap;
			width:auto;	
			}
		.menu-item{
			width: 220px;
			height: 220px;
			box-sizing: border-box;
			overflow: hidden;
			font-weight: bold;
			color:black;
			position: relative;
			background-size: cover;
		}
		.menu-item,.center-link,.announcement{
			font-size: 20px;
			overflow:hidden;
			cursor: pointer;
			color: #ffffff;
			heigh:260px;			
		}
		.menu-item img{
			position: absolute;
			bottom: 90px;
			left: 50%;
			margin-left: -35px;
			border:0px;
			width: 70px;
			height: 70px;
		}
		.menu-background{
			position: absolute;
			top: 50px;
			left: 0px;
			width: 0;
			height: 0;
			border-style: solid;
			border-color: #efefef #efefef #f7f7f7 #f7f7f7;
			border-width: 128px 0px 0px 128px;
			z-index: 0;
		}
		.kmi-can-click{
			position: absolute;
			height: 100%;
			width: 100%;
			top: 0px;
			left:0px;
			z-index: 2;
			cursor: pointer;	
			transition: all .3s ease-in-out;
			-webkit-transition: all .3s ease-in-out;
		}
		.content-style{
			display: flex;
			align-items: center;
			flex-direction: column;
			flex: 4;
			margin-left: 20%;
			margin-right: 20%;
			min-height: 450px;
		}
		.announcement{
			border:1px #AFDFE6 solid;
			border-width:1px 0px;			
			box-shadow: 0px 12px 8px -8px #9E9E9E;
			flex:1;
			width:580px;
			height:30vh;
			flex-direction:column;
			background: rgba(255, 255 , 255 , 0.8);
			padding: 0 10px;
			box-sizing: border-box;
			cursor: auto;
		}
		.center-link{
			display: flex;
			/*color: #f39700;*/
			/*padding-right: 100px;*/
			/*padding-left: 40px;*/
			width: 100%;
			/*padding-top: 50px;*/
			padding-bottom: 10px;
			font-weight: bold;
	        background: rgba(255, 255 , 255 , 0.8);
            padding: 0 10px;
            box-sizing: border-box;
		}
		.fixed-fields{
			overflow: hidden;			
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -196px;
			margin-left: -452px;
			z-index:1;
		}
		.reline{
			display:inline-block;
			margin-right:8px;
			text-decoration: none;
		}
		.range{
			flex: 1;
			width: 100%;	
		}
		.center_reline{
		    color: #f39700;
			text-decoration: none;
		}
		.imgworksmart{
			width:35%;
			flex-direction:column;
			display:flex;
			position:relative;
			left:32%;
        }	
		.system_info{
			position: absolute;
			bottom: 80px;
			left:50%;
			margin-left:-290px;
		}
		
		.footer{						
			bottom:0px;
			right:0px;
			text-align:right;
			font-size:4px;
		}
		.footer>div{
			position:relative;		
			bottom:-10px;
		}
		.footer>img{
			background-size:cover;
			height: 47px;
			width: 36px;
			position:absolute;
			right: 36px;
			bottom: 10px;
		}		
        #QR_dialog ,#QR_dialog_PDA{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}
		#QRCode,#QRCode_PDA{
		    position: absolute;
			top: 50%;
			left: 50%;
			padding: 28px;
			padding-top: 0px;
			margin-top: -144px;
			margin-left: -144px;
			border-radius: 6px;
			background: #ffffff;
		}
		#QRCode .close-btn,#QRCode_PDA .close-btn{
			position: absolute;
			top: -16px;
			right: -24px;
			border: 6px solid #ffffff;
			border-radius: 50%;
		}
		#QRCode .close-btn, #QRCode_PDA .close-btn{
			position: absolute;
			top: -24px;
			right: -44px;
			border: 14px solid #ffffff;
			border-radius: 50%;
			cursor: pointer;
		}
	}
    </style>--%>


    <script type="text/javascript">
        function OpenKMIClient() {
            var _url = "<%=GetiMESKMIPatameters()%>";
            try {
                window.customProtocolCheck(
                  _url,
                  function () {
                      alert('<%=GetOpeniMESKMIClient()%>');
                      window.location = '<%=GetiMESKMIClientPath("windows", False)%>';
                  },
				  function () {
				      //window.location = _url;
				  }
				);
            } catch (e) {
                window.location = '<%=GetiMESKMIClientPath("windows", False)%>';
            }
        }

        function RunEXE(filepath) {
            var oShell = new ActiveXObject("WScript.Shell");
            var prog = filepath;
            oShell.Run('"' + prog + '"', 0, false);

        }

        function DownLoadEXE() {

            try {
                var path = '<%=ConfigurationManager.AppSettings("APPath")%>';

                if (path != '') {
                    var oShell = new ActiveXObject("WScript.Shell");
                    var prog = path + "//SClientSource//CleanMESCache.bat";
                    oShell.Run('"' + prog + '"', 1);
                }

            }
            catch (e) { }

        }

        //function CheckEXE() {
        //    var oShell = new ActiveXObject('WScript.Shell');
        //    var filespec = oShell.ExpandEnvironmentStrings('%UserProfile%') + "\\AppData\\Roaming\\iMESTech\\MESSeries\\CleanMESCache.bat";
        //    var path;
        //    path = new ActiveXObject("Scripting.FileSystemObject");
        //    if (path.FileExists(filespec)) {
        //        RunEXE(filespec);
        //        confirm('清除完成!')
        //    }
        //    else {
        //        if (confirm('無法執行iMES暫存清除工具，請問是否手動下載執行?')) {
        //            DownLoadEXE();
        //        }
        //    }
        //}

        $(function () {
            var showCount = 4;      //首頁顯示的項目數量
            showCount = "<%=GetItemCount%>";
            showCount = parseInt(showCount, 10);
            if (isNaN(showCount))
                showCount = 4;
            var itemCount = 4;      //項目的總數量
            itemCount = "<%=GetItemCount%>";
            itemCount = parseInt(itemCount, 10);
            if (isNaN(itemCount))
                itemCount = 4;
            if(showCount > itemCount)
                showCount = itemCount;
            var index = 1;          //選擇的項目索引
            var sIndex = 1;             //顯示的起點索引
            var eIndex = showCount;     //顯示的終點索引
            var selected = "item-selected";     //項目選擇的css name
            var imgSel = "selected";            //項目圖片選擇的css name
            var hide = "item-hide";             //項目隱藏的css name
            var viewImgs = [' ', 'computer_imes', 'computer_kmi', 'pad', 'pda', 'computer_fine'];     //各項目所需顯示的大圖片css name
            var infoFills = [' ', 'gen-fill', 'gen-fill', 'qrcode-fill', 'qrcode-fill', 'gen-fill'];    //各項目所需填滿空的區域的css name
            //項目所需額外顯示的html id
            var qrChars = {
                1: "open-Win",
                2: "open-KMI",
                3: "QR1",
                4: "QR2",
                5: "open-EKB"
            }

            //清除項目css
            function clearCss() {
                for (var i = 0; i < itemCount; i++) {
                    $("#item" + (i + 1)).removeClass(selected);
                    $("#img" + (i + 1)).removeClass(imgSel);
                }
            }

            //顯示項目
            function showItem() {
                for (var i = sIndex; i <= eIndex; i++) {
                    $("#item" + i).removeClass(hide);
                    if (i != eIndex)
                        $("#item" + i).addClass('margin');
                }
            }

            //隱藏項目
            function hideItem() {
                for (var i = 0; i < itemCount; i++) {
                    $("#item" + (i + 1)).addClass(hide);
                    $("#item" + (i + 1)).removeClass('margin');
                }
            }

            //項目選擇
            function itemSelected() {
                clearCss();
                $("#item" + index).addClass(selected);
                $("#img" + index).addClass(imgSel);
                changeView();
                changeInfo();
            }

            //項目變更後,大圖片變更
            function changeView() {
                $("#view").removeClass('computer');
                $("#view").removeClass('computer_kmi');
                $("#view").removeClass('computer_imes');
                $("#view").removeClass('computer_fine');
                $("#view").removeClass('pda');
                $("#view").removeClass('pad');
                $("#view").addClass(viewImgs[index]);
            }

            //變更項目所需顯示的資訊與QRCode
            function changeInfo() {
                for (var i = 0; i < itemCount; i++) {
                    $("#info" + (i + 1)).addClass(hide);
                }
                $("#open-area").addClass(hide);
                $("#open-Win").addClass(hide);
                $("#open-KMI").addClass(hide);
                $("#open-EKB").addClass(hide);
                $("#QR").addClass(hide);
                $("#QR0").addClass(hide);
                $("#QR1").addClass(hide);
                $("#QR2").addClass(hide);

                $("#info" + index).removeClass(hide);
                if (index.toString() in qrChars) {
                    if (index == 3 || index == 4) {
                        $("#QR").removeClass(hide);
                        $("#QR0").removeClass(hide);
                    }
                    else
                        $("#open-area").removeClass(hide);

                    $("#" + qrChars[index]).removeClass(hide);
                }

                $("#info-fill").removeClass("gen-fill");
                $("#info-fill").removeClass("qrcode-fill");
                $("#info-fill").addClass(infoFills[index]);
            }

            $("#back").on("click", function () {
                if (index > 1) index--;
                itemSelected();

                if (index < sIndex) {
                    sIndex--
                    eIndex--
                    hideItem();
                    showItem();
                }
            });
            $("#next").on("click", function () {
                if (index < itemCount) index++;
                itemSelected();

                if (index > eIndex) {
                    sIndex++;
                    eIndex++;
                    hideItem();
                    showItem();
                }
            });
            $("#item1").on("click", function () {
                index = 1;
                itemSelected();

            });
            $("#item2").on("click", function () {
                index = 2;
                itemSelected();
            });
            $("#item3").on("click", function () {
                index = 3;
                itemSelected();

            });
            $("#item4").on("click", function () {
                index = 4;
                itemSelected();

            });
            $("#item5").on("click", function () {
                index = 5;
                itemSelected();
            });

            $("#open-KMI").on("click", function () {
                OpenKMIClient();
            });

            $(document).ready(function () {
                new QRCode($("#QR1")[0], {
                    text: <%=GetQRCode()%>,
                    width: 104,
                    height: 104
                });

                new QRCode($("#QR2")[0], {
                    text: <%=GetQRCode_PDA()%>,
                    width: 104,
                    height: 104
                });
            });

            $("#mCSB_1").ready(function(){
                $("#msg-scrollbar").addClass('Indent');
            });

            $(window).load(function () {
                $("#msg-scrollbar").mCustomScrollbar({ theme: "dark" });
            });
   

        });
    </script>

    <%--  <script language="javascript" type="text/javascript">
        function OpenKMIClient(){
            var _url = "<%=GetiMESKMIPatameters()%>";
            try{
                window.customProtocolCheck(
				  _url,
				  function() {
				      alert('<%=GetOpeniMESKMIClient()%>');
				      window.location = '<%=GetiMESKMIClientPath("windows", False)%>' ;
				  },
				  function() {
				      //window.location = _url;
				  }
				);
            }catch(e){
                window.location = '<%=GetiMESKMIClientPath("windows", False)%>' ;
            }
        }

		function RunEXE(filepath)
		{
			var oShell = new ActiveXObject("WScript.Shell");
			var prog = filepath;
			oShell.Run('"'+prog+'"',0,false);
					
		}
	   
		function DownLoadEXE()
		{

			 try {
					var path ='<%=ConfigurationManager.AppSettings("APPath")%>';

					if (path != '')
					{
						var oShell = new ActiveXObject("WScript.Shell");
						var prog = path + "//SClientSource//CleanMESCache.bat";
						oShell.Run('"'+prog+'"',1);
					}                         
				
			}
			catch (e) { }      
					
		}

		function CheckEXE()
		{
			var oShell=new ActiveXObject('WScript.Shell');
			var filespec = oShell.ExpandEnvironmentStrings('%UserProfile%') + "\\AppData\\Roaming\\iMESTech\\MESSeries\\CleanMESCache.bat";	
			var path; 	
			path=new ActiveXObject("Scripting.FileSystemObject");
			if(path.FileExists(filespec))
				{
					RunEXE(filespec);
					confirm('清除完成!')
				}
			else
			{
				if (confirm('無法執行iMES暫存清除工具，請問是否手動下載執行?')) 
				{
					DownLoadEXE();
				} 			
			}				
		}
		
		function showQRDialog(){
			$("#QR_dialog").show();
		}

		function showQRDialog_PDA(){
		    $("#QR_dialog_PDA").show();
		}
		
		function closeQRDialog(){
			$("#QR_dialog").hide();
		}

		function closeQRDialog_PDA(){
		    $("#QR_dialog_PDA").hide();
		}

		$(document).ready(function(){
			new QRCode($("#QRCode")[0], <%=GetQRCode()%>);
		});

        $(document).ready(function(){
			new QRCode($("#QRCode_PDA")[0], <%=GetQRCode_PDA()%>);
		});
    </script>	--%>
</head>

<body>
    <div class="home">
        <!--上方區域 顯示、功能、訊息-->
        <div class="top-area">
            <!--顯示、功能區域-->
            <div class="func-area left">
                <!--顯示區域-->
                <div class="view-area">
                    <div class="img-area left posR">
                        <div id="view" class="view horizontal-tran computer_imes"></div>
                    </div>
                    <div class="info-area right">
                        <div id="info-fill" class="fill gen-fill"></div>
                        <div class="Info-txt">
                            <div class="company"><%=GetCompanyMsg()%></div>
                            <div id="info1" class="item-Info-txt">
                                <div class="client"><%=GetClientMsg(1)%></div>
                                <div class="device">PC | Windows</div>
                            </div>
                            <div id="info2" class="item-Info-txt item-hide">
                                <div class="client"><%=GetClientMsg(2)%></div>
                                <div class="device">PC | Windows(PAD)</div>
                            </div>
                            <div id="info3" class="item-Info-txt item-hide">
                                <div class="client"><%=GetClientMsg(3)%></div>
                                <div class="device">PAD | Android</div>
                            </div>
                            <div id="info4" class="item-Info-txt item-hide">
                                <div class="client"><%=GetClientMsg(4)%></div>
                                <div class="device">PDA | Android</div>
                            </div>
                            <div id="info5" class="item-Info-txt item-hide">
                                <div class="client"><%=GetClientMsg(5)%></div>
                                <div class="device">PC | Web</div>
                            </div>
                        </div>

                        <div id="open-area" class="open-area">
                            <a id="open-Win" class="open left posR" href="SClientSource/ClickOnce/MESSeries.application" target="_blank">
                                <img src="images/Home/icon_start.svg" />
                                <label><%=GetClientButtonMsg(1)%></label>
                                <div class="can-click"></div>
                            </a>
                            <div id="open-KMI" class="open left posR item-hide" onclick="OpenKMIClient">
                                <img src="images/Home/icon_download_white.png" />
                                <label><%=GetClientButtonMsg(2)%></label>
                                <div class="can-click"></div>
                            </div>
                            <a id="open-EKB" class="open left posR item-hide" href="<%=ConfigurationManager.AppSettings("EKB")%>" target="_blank">
                                <img src="images/Home/icon_start.svg" />
                                <label><%=GetClientButtonMsg(5)%></label>
                                <div class="can-click"></div>
                            </a>
                        </div>

                        <div id="QR" class="QRCode-area item-hide">
                            <div id="QR0" class="QRCode left">
                                <div id="QR1" class="item-hide"></div>
                                <div id="QR2" class="item-hide"></div>
                            </div>
                            <div class="QRCode-msg-area left">
                                <div class="fill"></div>
                                <div class="QRCode-msg"><%=GetQRCodeMsg()%></div>
                            </div>
                        </div>

                    </div>
                </div>

                <!--功能區域-->
                <div class="funcItems">
                    <div id="back" class="change left posR">
                        <img src="images/Home/icon_left.png" />
                        <div class="can-click"></div>
                    </div>

                    <div id="selectItems" class="items left">
                        <div id="item1" class="item posR item-selected <%=GetItemMarginCss(1)%>">
                            <div class="tranXY">
                                <div class="item-img-area">
                                    <div id="img1" class="img img1 horizontal-tran selected"></div>
                                </div>
                                <div class="client txtCen"><%=GetClientMsg(1)%></div>
                                <div class="device txtCen">PC | Windows</div>
                            </div>
                            <div class="can-click"></div>
                        </div>
                        <div id="item2" class="item posR <%=GetItemMarginCss(2)%>">
                            <div class="tranXY">
                                <div class="item-img-area">
                                    <div id="img2" class="img img2 horizontal-tran"></div>
                                </div>
                                <div class="client txtCen"><%=GetClientMsg(2)%></div>
                                <div class="device txtCen">PC | Windows(PAD)</div>
                            </div>
                            <div class="can-click"></div>
                        </div>
                        <div id="item3" class="item posR <%=GetItemMarginCss(3)%>">
                            <div class="tranXY">
                                <div class="item-img-area">
                                    <div id="img3" class="img img3 horizontal-tran"></div>
                                </div>
                                <div class="client txtCen"><%=GetClientMsg(3)%></div>
                                <div class="device txtCen">PAD | Android</div>
                            </div>
                            <div class="can-click"></div>
                        </div>
                        <div id="item4" class="item posR <%=GetItemMarginCss(4)%>">
                            <div class="tranXY">
                                <div class="item-img-area">
                                    <div id="img4" class="img img4 horizontal-tran"></div>
                                </div>
                                <div class="client txtCen"><%=GetClientMsg(4)%></div>
                                <div class="device txtCen">PDA | Android</div>
                            </div>
                            <div class="can-click"></div>
                        </div>
                        <div id="item5" class="item posR <%=GetItemHideCss(5)%> <%=GetItemMarginCss(5)%>">
                            <div class="tranXY">
                                <div class="item-img-area">
                                    <div id="img5" class="img img5 horizontal-tran"></div>
                                </div>
                                <div class="client txtCen"><%=GetClientMsg(5)%></div>
                                <div class="device txtCen">PC | Web</div>
                            </div>
                            <div class="can-click"></div>
                        </div>
                    </div>

                    <div id="next" class="change right posR">
                        <img class="tranXY" src="images/Home/icon_right.png" />
                        <div class="can-click"></div>
                    </div>
                </div>
            </div>
            <!--訊息區域-->
            <div class="msg-area right">
                <div class="title"><%=GetMsgAreatMsg()%></div>
                <div id="msg-scrollbar" class="data">
                    <div><%=GetShowMessageText()%></div>
                </div>
            </div>
        </div>

        <!--下方區域 下載、Logo-->
        <div class="bottom-area">
            <!--下載區域-->
            <div class="download-area left posR">
                <div class="downloadItems vertical-margin">
                    <a href="SClientSource/NDP462-KB3151802-Web.exe" target="_blank">
                        <div class="item posR">
                            <img src="images/Home/icon_download.png" />
                            <label><%=GetFrameworkMsg()%></label>
                            <div class="can-click"></div>
                        </div>
                    </a>
                    <a href="SClientSource/CleanMESCache.bat" target="_blank">
                        <div class="item posR" onclick="CheckEXE()">
                        <img src="images/Home/icon_download.png" />
                        <label><%=GetDownloadCleanMsg()%></label>
                        <div class="can-click"></div>
                    </div>
                    </a>
                </div>
            </div>
            <!--Logo區域-->
            <div class="logo right posR">
                <div class="copyright vertical-margin">
                    V 6.1.0<br />
                    Copyright © Data System. All right reserved.<br />
                    <%=GetStatementMsg()%>
                </div>
                <%--<img class="vertical-margin" src="images/Logo.png" />--%>
            </div>
        </div>
    </div>
</body>

<%--    <body style="margin:0px;">
	<div style = "position: fixed; flex: 1; width: 100%;top: 0;left: 0;z-index:1;background:#ffffff;height:110px;">
		<div class = "header style"></div>
		<div style = "padding:10px;">
			<img style="height:60px;width:300px;"src="images/<%=GetPN_Home_PNG()%>"><!-- #EndLibraryItem -->
		</div>
		<img style="position: absolute;bottom: 0px;right: 0px;height: 124%;opacity: 0.6;" src="images/back_black.png"/>
		<div style="position: absolute;bottom: 2px;right: 25px;font-weight:bold;"> <asp:Label runat="server" Style="font-size: 18px; color:#21b8ce;" Text="<%$ AppSettings: Environment %>" /></div>
	</div>
	
	<div class="footer" style = "position: fixed; flex: 1; width: 100%;left: 0;z-index:1;background:#ffffff;height:70px;">		
	<div style="right:96px;font-size:10px;">Copyright © Data Systems. All rights reserved.</div>
	<div style="right:96px;font-size:10px;"><%=GetCopyright()%></div>
	<div style="right:96px;font-size:10px;text-decoration:underline;color:#003399;cursor:pointer;" onclick="location.href='http://www.digi-hua.com/';"><%=GetDihua_home()%></div>
	<div style="position:absolute;left:15px;bottom:50px;"><a href="SClientSource/NDP462-KB3151802-Web.exe" style="color:#002060;font-size:14px;text-decoration:none;"><%=GetdotNet()%></a></div>	
	<div onclick="CheckEXE()" style="position:absolute;left:15px;bottom:25px;color:#002060;font-size:14px;cursor:pointer;"><%=Getclean_cache()%></div>
	<img src="images/dsc_logo.png">	
	</div>	

		<div class="content-style">
			<div class = "fixed-fields">
				<div class="sub-menu-show">
					
					<a class = "reline" align="left" id="linktolaunch1" style="margin=right:0px" href="SClientSource/ClickOnce/MESSeries.application">
						<div class = "menu-item" style="background: url('images/G.png');;">
							<img src="images/settings.png"></img>							
							<div class = "menu-title" style="bottom:32px;position: absolute;left: 50%;margin-left: -69.09px;border: 1px #ffffff solid;border-width:0px 0px 1px 0px;"><%=Getclick_once()%></div>
							<div class = "menu-title" style="bottom:10px;position: absolute;left: 50%;margin-left: -62.455px;">PC/Windows</div>
						</div>
					</a>
				
				
					<a class = "reline" align="left" id="linktolaunch2" onclick="OpenKMIClient();">
						<div class = "menu-item" style="background: url('images/R.png');">
							<!--<div class = "menu-background"></div>-->
							<img src="images/windows.png"></img>
							<div class = "menu-title" style="bottom:32px;position: absolute;left: 50%;margin-left: -80px;border: 1px #ffffff solid;border-width:0px 0px 1px 0px;"><%=Getmobile_execute()%></div>
							<div class = "menu-title" style="bottom:10px;position: absolute;left: 50%;margin-left: -62.455px;">PC/Windows</div>
						</div>
					</a>				
					<a class = "reline" align="left" id="linktolaunch3" onclick="showQRDialog();">
						<div class = "menu-item" style="background: url('images/Y.png');">
							<img src="images/androids.png"></img>
							<!--<div class = "menu-background"></div>-->
							<div class = "menu-title" style="bottom:32px;position: absolute;left: 50%;margin-left: -80px;border: 1px #ffffff solid;border-width:0px 0px 1px 0px;"><%=Getmobile_execute()%></div>
							<div class = "menu-title" style="bottom:10px;position: absolute;left: 50%;margin-left: -64.1px;">PAD/Android</div>
							<!--<img src="images/QRCode_w.png"></img>-->
					</div>
					</a>
					<a class = "reline" align="left" id="linktolaunch4" onclick="showQRDialog_PDA();">
						<div class = "menu-item" style="background: url('images/B.png');">
						<img src="images/androids_PDA.png"></img>
						<!--<div class = "menu-background"></div>-->
						<div class = "menu-title" style="bottom:32px;position: absolute;left: 50%;margin-left: -80px;border: 1px #ffffff solid;border-width:0px 0px 1px 0px;"><%=Getmobile_execute()%></div>
						<div class = "menu-title" style="bottom:10px;position: absolute;left: 50%;margin-left: -96.875px;">PDA,Phone/Android</div>
						<!--<img src="images/QRCode_w.png"></img>-->
						</div>
					</a>
				

			</div>				
				
		</div>

		<div class="system_info">
			
			<div class="announcement" style="">
				<div style="width:80px;margin-left: auto;margin-right: auto;color:#000000;"><%=Getsystem_Info()%></div>		
				<marquee class="range" scrollamount="3" scrolldelay="100" direction="up" style="height:100%;color:#000000;font-size: 12px;">
				<%=GetShowMessageText()%>
				</marquee>					
			</div>	
		</div>		
		
	<div id="QR_dialog" style="display:none;">
		<div id="QRCode">
			<img class="close-btn" src="images/Close.png" onclick="closeQRDialog();"></img>
			<div style="padding:8px 0px;text-align:center;"><%=GetQRCodeResource()%></div>
		</div>
	</div>		

    <div id="QR_dialog_PDA" style="display:none;">
		<div id="QRCode_PDA">
			<img class="close-btn" src="images/Close.png" onclick="closeQRDialog_PDA();"></img>
			<div style="padding:8px 0px;text-align:center;"><%=GetQRCodeResource()%></div>
		</div>
	</div>		--%>
</html>
