var i = 1;

        function Add(evt){
            evt.style.display="none";
            i ++;
            var div = document.createElement('div');
            var from_hr = 'from_hr' + i;
            var from_min = 'from_min' + i;
            var to_hr = 'to_hr' + i;
            var to_min = 'to_min' + i;
            var id = evt.getAttribute('id');
            var len = id.length;
            var add = id.split('_')[0] + '_add' + i;
            var del = id.split('_')[0] + '_del' + i;
            var html = '';
            var begin = id.split('_')[0];
                if(begin == 'tank1'){
                    div.className = "col-12 row";
                    div.style.marginTop = "10px";
                    html += '<div class="col-xl-5 col-lg-5 col-md-4"  style="margin-top:10px;">';
                    html += '<span>Duration</span> <select name="tank1_duration' + i + '" class="duration"><option selected value="30min">30 min</option><option value="60min">60 min</option><option value="90min">90 min</option><option value="120min">120 min</option><option value="150min">150 min</option></select>';
                    html += '</div>';
			        html += '<div class="from-to col-xl-7 col-lg-7 col-md-8"  style="margin-top:10px;padding-right:0px;">';
			        html += '<div>';
          	        html +=	'<div class="from row" style="margin-left:10px;">';
                }else if(begin == 'tank2'){
                    div.className = "col-12 row";
                    div.style.marginTop = "10px";
                    html += '<div class="col-xl-5 col-lg-5 col-md-4"  style="margin-top:10px;">';
                    html += '<span>Duration</span> <select name="tank2_duration' + i + '" class="duration"><option selected value="30min">30 min</option><option value="60min">60 min</option><option value="90min">90 min</option><option value="120min">120 min</option><option value="150min">150 min</option></select>';
                    html += '</div>';
			        html += '<div class="from-to col-xl-7 col-lg-7 col-md-8"  style="margin-top:10px;padding-right:0px;">';
			        html += '<div>';
          	        html +=	'<div class="from row" style="margin-left:10px;">';
                }else if(begin == 'music'){
                    html +=	'<div class="from row col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">';
                    html += '<div class="col-md-3 col-sm-12 col-xs-12">';
                    html += '<select name="music' + i + '" class="music-select"><option selected value="playlist1">playlist1</option><option value="playlist2">playlist2</option><option value="playlist3">playlist3</option></select>';
                    html += '</div>';
                }else if(begin == 'v'){
                    html +=	'<div class="from row col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">';
                    html += '<div class="col-md-3 col-sm-12 col-xs-12">';
                    html += '<select name="vibration' + i + '" class="vibration-select"><option selected value="5Hz">5Hz</option><option value="10Hz">10Hz</option><option value="15Hz">15Hz</option></select>';
                    html += '</div>';
                };

                html +=	'<div class="col-xs-3">';
                    html +=	'<span>From</span>';
                html +=	'</div>';
                html +=	'<div  class="col-xs-6">';
                if(id.split('_')[0] == 'music'){
                    html +=	'<select name="music_from_hr' + i + '">';
                }else if(id.split('_')[0] == 'v'){
                    html +=	'<select name="v_from_hr' + i + '">';
                }else if(id.split('_')[0] == 'tank1'){
                    html +=	'<select name="tank1_from_hr' + i + '">';
                }else if(id.split('_')[0] == 'tank2'){
                    html +=	'<select name="tank2_from_hr' + i + '">';
                }else{
                    html +=	'<select name="from_hr1">';
                };
                for(var hr = 0; hr < 24; hr++){
                    if(hr < 10){
                        html +=	'<option value="0' + hr + '">0' + hr + '</option>';
                    }else{
                        html +=	'<option value="' + hr + '">' + hr + '</option>';
                    };
                };
                    html += '</select>';
                if(id.split('_')[0] == 'music'){
                    html +=	' :<select name="music_from_min' + i + '">';
                }else if(id.split('_')[0] == 'v'){
                    html +=	' :<select name="v_from_min' + i + '">';
                }else if(id.split('_')[0] == 'tank1'){
                    html +=	' :<select name="tank1_from_min' + i + '">';
                }else if(id.split('_')[0] == 'tank2'){
                    html +=	' :<select name="tank2_from_min' + i + '">';
                }else{
                    html +=	' :<select name="from_min1">';
                };
                for(var min = 0; min < 60; min++){
                    if(min < 10){
                        html +=	'<option value="0' + min + '">0' + min + '</option>';
                    }else{
                        html +=	'<option value="' + min + '">' + min + '</option>';
                    };
                };
                    html +=	'</select>';
                html +=	'</div>';
                html +=	'<div  class="col-xs-3">';
                    html +=	'<input  id=' + del + ' class="delete" type="button" value="Delete" onclick="Delete(' + del + ');">';
                html +=	'</div>';
            html +=	'</div>';
            if(begin == 'music' || begin == 'v'){
                html +=	'<div class="to row" style="margin-left:130px;">';
            }else{
                html +=	'<div class="to row">';
            };
                html +=	'<div  class="col-xs-3">';
                if(begin == 'v' || begin == 'music'){
                    html +=	'<span style="margin-left: 33px;">To</span>';
                }else{
                    html +=	'<span style="margin-left: 31px;">To</span>';
                };
                html +=	'</div>';
                html +=	'<div  class="col-xs-6">';
                if(id.split('_')[0] == 'music'){
                    html +=	'<select name="music_to_hr' + i + '">';
                }else if(id.split('_')[0] == 'v'){
                    html +=	'<select name="v_to_hr' + i + '">';
                }else if(id.split('_')[0] == 'tank1'){
                    html +=	'<select name="tank1_to_hr' + i + '">';
                }else if(id.split('_')[0] == 'tank2'){
                    html +=	'<select name="tank2_to_hr' + i + '">';
                }else{
                    html +=	'<select name="to_hr1">';
                };
                for(var hr = 0; hr < 24; hr++){
                    if(hr < 10){
                        html +=	'<option value="0' + hr + '">0' + hr + '</option>';
                    }else{
                        html +=	'<option value="' + hr + '">' + hr + '</option>';
                    };
                };
                    html +=	'</select>';
                if(id.split('_')[0] == 'music'){
                    html +=	' :<select name="music_to_min' + i + '">';
                }else if(id.split('_')[0] == 'v'){
                    html +=	' :<select name="v_to_min' + i + '">';
                }else if(id.split('_')[0] == 'tank1'){
                    html +=	' :<select name="tank1_to_min' + i + '">';
                }else if(id.split('_')[0] == 'tank2'){
                    html +=	' :<select name="tank2_to_min' + i + '">';
                }else{
                    html +=	' :<select name="to_min1">';
                };
                for(var min = 0; min < 60; min++){
                    if(min < 10){
                        html +=	'<option value="0' + min + '">0' + min + '</option>';
                    }else{
                        html +=	'<option value="' + min + '">' + min + '</option>';
                    };
                };
                    html +=	'</select><br>';
                    html +=	'<input  id=' + add + ' class="add" type="button" value="Add" onclick="Add(' + add + ');">';
                html +=	'</div>';
                html +=	'<div  class="col-xs-3"></div>';
            html +=	'</div>';
            if(begin == 'tank1' || begin == 'tank2'){
                html += '</div>';
                html += '</div>';
            };

            div.innerHTML = html;
            div.style.marginTop = '15px';
            div.style.zIndex = '100';
            if(begin == 'tank1' || begin == 'tank2'){
                evt.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(div);
            }else{
                evt.parentNode.parentNode.parentNode.parentNode.appendChild(div);
            };

        };

                function Delete(evt){
            var id = evt.getAttribute('id');
            var add = id.split('_')[0] + '_' + 'add';
            var clo_xs_3 = evt.parentNode;
            var from = clo_xs_3.parentNode;
            var begin = id.split('_')[0];

            if(begin == 'tank1' || begin == 'tank2'){
                var div = from.parentNode.parentNode.parentNode;
                var next_div = div.nextElementSibling;
                var pre_div = div.previousElementSibling;
            }else{
                var div = from.parentNode;
                var next_div = div.nextElementSibling;
                var pre_div = div.previousElementSibling;
            };


            if(next_div && pre_div == null){
                    div.parentNode.removeChild(div);
                    next_div.style.marginTop = '0px';
            }else if(next_div && pre_div){
                    div.parentNode.removeChild(div);
            }else if(next_div == null && pre_div == null){
                if(id.split('_')[0] == 'music' || id.split('_')[0] == 'v'){
                     div.parentNode.parentNode.parentNode.parentNode.children[1].style.display = 'inline-block';
                     div.parentNode.style.display = 'none';
                }else if(begin == 'tank1' || begin == 'tank2'){
                      div.parentNode.parentNode.children[1].style.display = 'inline-block';
                      div.parentNode.style.visibility = 'hidden';
                }else{
                    div.parentNode.parentNode.parentNode.children[1].style.display = 'inline-block';
                    div.parentNode.style.display = 'none';
                };
                 var name = id.split('_')[0];
                 var from_hr = name + '_from_hr' + 1;
                 var from_min = name + '_from_min' + 1;
                 var to_hr = name + '_to_hr' + 1;
                 var to_min = name + '_to_min' + 1;
                 $('select[name=' + from_hr + ']').val('00');
                 $('select[name=' + from_min + ']').val('00');
                 $('select[name=' + to_hr + ']').val('00');
                 $('select[name=' + to_min + ']').val('00');
            }else{
                div.parentNode.removeChild(div);
                i --;
                add = add + i;
                add = document.getElementById(add);
                if(add == null){
                    if(begin == 'tank1' || begin == 'tank2'){
                        add = pre_div.children[1].children[0].children[1].children[1].children[3];
                    }else{
                        add = pre_div.children[1].children[1].children[3];
                    };
                };
                add.style.display = 'block';
            };
        };

        function Echart(evt){
            $("#" + evt + "-div").css('display','block');

            //基於準備好的dom，初始化echarts例項
            var myChart = echarts.init(document.getElementsByClassName('' + evt)[0]);

            //指定圖表的配置項和資料
            var option = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line'
                }]
            };

            //使用剛指定的配置項和資料顯示圖表
            myChart.setOption(option);
        };


        $(function(){

            $("#fitolab1").click(function(){
                $("#fitolab1").css('display','none');
                $(".show-fitolab1").css('display','block');
                $(".page-title").text("Fitolab1");
            });


            $(".stem-light-btn").click(function(){
                $("#stem-light-control").css('display','block');
                document.getElementsByName('anchor')[0].click();
            });
            $(".stem-light-cancel").click(function(){
                $("#stem-light-control").css('display','none');
            });

            $(".root-light-btn").click(function(){
                $("#root-light-control").css('display','block');
                document.getElementsByName('anchor')[0].click();
            });

            $(".root-light-cancel").click(function(){
                $("#root-light-control").css('display','none');
            });


            $(".stem-music-btn").click(function(){
                $("#music-control").css('display','block');
                document.getElementsByName('anchor')[0].click();
            });
            $(".music-control-cancel").click(function(){
                $("#music-control").css('display','none');
            });
             var music = $(".set-schedule")[0];
             var music_div = $("#music_div");
             var vol_div = $(".vol-div");
             music.onclick = function(){
                console.log(vol_div);
                music.style.display = 'none';
                music_div.css('display', 'block');
                vol_div.css('display', 'block');
             };


            $(".show-tem").click(function(){
                $("#stem-tem").css('display','block');
            });
            $(".stem-tem-cancel").click(function(){
                $("#stem-tem").css('display','none');
            });


             $(".stem-camera-btn").click(function(){
                $("#camera-control").css('display','block');
                document.getElementsByName('anchor')[0].click();
            });
            $(".camera-control-cancel").click(function(){
                $("#camera-control").css('display','none');
            });
            $(".gallery").click(function(){
                $("#gallery").css('display','block');
                $("#camera-control").css('display','none');
            });
            $(".gallery-cancel").click(function(){
                $("#gallery").css('display','none');
                $("#camera-control").css('display','block');
            });


            $(".stem-stress-btn").click(function(){
                $("#plant-stress-monitor").css('display','block');
                document.getElementsByName('anchor')[0].click();
            });
            $(".plant-stress-monitor-cancel").click(function(){
                $("#plant-stress-monitor").css('display','none');
            });


            $(".show-weight").click(function(){
                $("#weight").css('display','block');
            });
            $(".weight-cancel").click(function(){
                $("#weight").css('display','none');
            });

            $(".h2-cancel").click(function(){
                $("#h2-div").css('display','none');
            });


            $(".root-vibration-btn").click(function(){
                $("#vibration").css('display','block');
                document.getElementsByName('anchor')[0].click();
            });
            $(".vibration-cancel").click(function(){
                $("#vibration").css('display','none');
            });
             var vibration = $(".set-schedule")[1];
             var vibration_div = $("#vibration_div");
             var pow_div = $(".pow-div");
             vibration.onclick = function(){
                vibration.style.display = 'none';
                vibration_div.css('display', 'block');
                pow_div.css('display', 'block');
             };


             var tank1 = $(".set-schedule")[2];
             var tank1_div = $("#tank1_div");
             tank1.onclick = function(){
                tank1.style.display = 'none';
                tank1_div.css('visibility','visible');
             };

             var tank2 = $(".set-schedule")[3];
             var tank2_div = $("#tank2_div");
             tank2.onclick = function(){
                tank2.style.display = 'none';
                tank2_div.css('visibility','visible');
             };

             $(".root-water-btn").click(function(){
                $("#water-con-con").css('display','block');
                document.getElementsByName('anchor')[0].click();
            });
            $(".water-con-con-cancel").click(function(){
                $("#water-con-con").css('display','none');
            });


            $("#list li").click(function(){
                $("#list li").removeClass("current_li");
                $("#list li a").removeClass("current");
            });

            $(".s-js-color").click(function(){
                var $this = $(this);
                var hex = $this.attr('data-hex');
                var rgb = $this.attr('data-rgb');
                $(".s_show_color").css('background-color', hex);
                $("input[name=stem-color]").val(rgb);
                $(".s_span_color").text(hex);
            });

            $(".r-js-color").click(function(){
                var $this = $(this);
                var hex = $this.attr('data-hex');
                var rgb = $this.attr('data-rgb');
                $(".r_show_color").css('background-color', hex);
                $("input[name=root-color]").val(rgb);
                $(".r_span_color").text(hex);
            });

            $(".brightness").click(function(){
                $(".brightness_info").css('display','block');
                $(".color_info").css('display','none');
                $(".recomendation_info").css('display','none');
            });

            $(".color").click(function(){
                $(".brightness_info").css('display','none');
                $(".color_info").css('display','block');
                $(".recomendation_info").css('display','none');
            });

            $(".recomendations").click(function(){
                $(".recomendation_info").css('display','block');
                $(".color_info").css('display','none');
                $(".brightness_info").css('display','none');
            });

        });