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 == 'tem' || begin == 'tns' || begin == 'music' || begin == 'v' || begin == 'w'){
                if(begin == 'music' || begin == 'w'){
                    html +=	'<div class="from row col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding-right:0px;">';
                    html += '<div class="col-md-3 col-sm-12 col-xs-12" style="padding-left:0px;padding-right:0px;margin-left:-10px;margin-right:10px;">';
                }else{
                    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">';
                };
                if(begin == 'tem'){
                    html += '<select name="tem' + i + '" class="tem-select"><option selected value="23&#176;C">23&#176;C</option><option value="24&#176;C">24&#176;C</option><option value="25&#176;C">25&#176;C</option></select>';
                }else if(begin == 'tns'){
                    html += '<select name="tem-near-stem' + i + '" class="tem-near-stem-select"><option selected value="23&#176;C">23&#176;C</option><option value="24&#176;C">24&#176;C</option><option value="25&#176;C">25&#176;C</option></select>';
                }else if(begin == 'music'){
                    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>';
                }else if(begin == 'v'){
                    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>';
                }else if (begin == 'w'){
                    html += '<select name="wind-flow' + i + '" class="wind-select"><option selected value="5m/s">5m/s</option><option value="10m/s">10m/s</option><option value="15m/s">15m/s</option></select>';
                }
                html += '</div>';
            }else{
          	    html +=	'<div class="from row">';
          	};
                html +=	'<div class="col-xs-3">';
                    html +=	'<span>From</span>';
                html +=	'</div>';
                html +=	'<div class="col-xs-6">';
                if(id.split('_')[0] == 'tem'){
                    html +=	'<select name="tem_from_hr' + i + '">';
                }else if(id.split('_')[0] == 'led'){
                    html +=	'<select name="led_from_hr' + i + '">';
                }else if(id.split('_')[0] == 'tns'){
                    html +=	'<select name="tns_from_hr' + i + '">';
                }else if(id.split('_')[0] == 'music'){
                    html +=	'<select name="music_from_hr' + i + '">';
                }else if(id.split('_')[0] == 'us'){
                    html +=	'<select name="us_from_hr' + i + '">';
                }else if(id.split('_')[0] == 'v'){
                    html +=	'<select name="v_from_hr' + i + '">';
                }else if(id.split('_')[0] == 'w'){
                    html +=	'<select name="w_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] == 'tem'){
                        html +=	' :<select name="tem_from_min' + i + '">';
                    }else if(id.split('_')[0] == 'led'){
                        html +=	' :<select name="led_from_min' + i + '">';
                    }else if(id.split('_')[0] == 'tns'){
                        html +=	' :<select name="tns_from_min' + i + '">';
                    }else if(id.split('_')[0] == 'music'){
                        html +=	' :<select name="music_from_min' + i + '">';
                    }else if(id.split('_')[0] == 'us'){
                        html +=	' :<select name="us_from_min' + i + '">';
                    }else if(id.split('_')[0] == 'v'){
                        html +=	' :<select name="v_from_min' + i + '">';
                    }else if(id.split('_')[0] == 'w'){
                        html +=	' :<select name="w_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>';
            html +=	'<div class="to row">';
            if(begin == 'tem' || begin == 'tns' || begin == 'music' || begin == 'v' || begin == 'w'){
                html += '<div class="col-md-3 col-sm-12 col-xs-12"></div>';
            }
                html +=	'<div  class="col-xs-3">';
                if(begin == 'music' || begin == 'w'){
                    html +=	'<span style="margin-left: 24px;">To</span>';
                }else{
                    html +=	'<span style="margin-left: 20px;">To</span>';
                };
                html +=	'</div>';
                html +=	'<div  class="col-xs-6">';
                    if(id.split('_')[0] == 'tem'){
                        html +=	'<select name="tem_to_hr' + i + '">';
                    }else if(id.split('_')[0] == 'led'){
                        html +=	'<select name="led_to_hr' + i + '">';
                    }else if(id.split('_')[0] == 'tns'){
                        html +=	'<select name="tns_to_hr' + i + '">';
                    }else if(id.split('_')[0] == 'music'){
                        html +=	'<select name="music_to_hr' + i + '">';
                    }else if(id.split('_')[0] == 'us'){
                        html +=	'<select name="us_to_hr' + i + '">';
                    }else if(id.split('_')[0] == 'v'){
                        html +=	'<select name="v_to_hr' + i + '">';
                    }else if(id.split('_')[0] == 'w'){
                        html +=	'<select name="w_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] == 'tem'){
                        html +=	' :<select name="tem_to_min' + i + '">';
                    }else if(id.split('_')[0] == 'led'){
                        html +=	' :<select name="led_to_min' + i + '">';
                    }else if(id.split('_')[0] == 'tns'){
                        html +=	' :<select name="tns_to_min' + i + '">';
                    }else if(id.split('_')[0] == 'music'){
                        html +=	' :<select name="music_to_min' + i + '">';
                    }else if(id.split('_')[0] == 'us'){
                        html +=	' :<select name="us_to_min' + i + '">';
                    }else if(id.split('_')[0] == 'v'){
                        html +=	' :<select name="v_to_min' + i + '">';
                    }else if(id.split('_')[0] == 'w'){
                        html +=	' :<select name="w_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>';

            div.innerHTML = html;
            div.style.marginTop = '15px';
            div.style.zIndex = '100';
            evt.parentNode.parentNode.parentNode.parentNode.appendChild(div);
        };

        function Delete(evt){
            var id = evt.getAttribute('id');
            console.log(id.split('_')[0]);
            var add = id.split('_')[0] + '_' + 'add';
            var clo_xs_3 = evt.parentNode;
            var from = clo_xs_3.parentNode;
            var div = from.parentNode;
            var next_div = div.nextElementSibling;
            var pre_div = div.previousElementSibling;
            var begin = id.split('_')[0];

            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] == 'us'){
                    div.parentNode.parentNode.parentNode.children[4].style.display = 'inline-block';
                }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 == 'tem' || begin == 'tns' || begin == 'music' || begin == 'v' || begin == 'w'){
                        add = pre_div.children[1].children[2].children[3];
                    }else{
                        add = pre_div.children[1].children[1].children[3];
                    };
                };
                add.style.display = 'block';
            };
        };

        $(function(){
                var tem = $(".set-schedule")[0];
                var tem_div = $("#tem_div");
                var led = $(".set-schedule")[1];
                var led_div = $("#led_div");
                var tem_near_stem = $(".set-schedule")[2];
                var tem_near_stem_div = $("#tem-near-stem_div");
                var music = $(".set-schedule")[3];
                var music_div = $("#music_div");
                var ultra_sonic = $(".set-schedule")[4];
                var ultra_sonic_div = $("#ultra-sonic_div");
                var vibration = $(".set-schedule")[5];
                var vibration_div = $("#vibration_div");
                var wind_flow = $(".set-schedule")[6];
                var wind_flow_div = $("#wind-flow_div");

            tem.onclick = function(){
                tem.style.display = 'none';
                tem_div.css('display','block');
            };

            led.onclick =  function(){
                led.style.display = 'none';
                led_div.css('display','block');
            };

            tem_near_stem.onclick =  function(){
                tem_near_stem.style.display = 'none';
                tem_near_stem_div.css('display','block');
            };

             music.onclick =  function(){
                music.style.display = 'none';
                music_div.css('display','block');
            };

            ultra_sonic.onclick =  function(){
                ultra_sonic.style.display = 'none';
                ultra_sonic_div.css('display','block');
            };

            vibration.onclick =  function(){
                vibration.style.display = 'none';
                vibration_div.css('display','block');
            };

            wind_flow.onclick =  function(){
                wind_flow.style.display = 'none';
                wind_flow_div.css('display','block');
            };

            var btn_con = $(".btn-configure");
                btn_con.click(function(){
                $("#configure").css('display','block');
            });


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

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

            $(".down-arrow").click(function(){
                $(".color-top").css('display','none');
                $(".down-arrow").css('display','none');
                $(".up-arrow").css('display','inline-block');
                $(".color-set").css('display','block');
            });

            $(".up-arrow").click(function(){
                $(".color-top").css('display','block');
                $(".down-arrow").css('display','inline-block');
                $(".up-arrow").css('display','none');
                $(".color-set").css('display','none');
            });

            $("#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');
            });

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

            $(".color-confirm").click(function(){
                $("#configure").css('display','none');
            });

            $(".form-control")[0].onclick = function(){
                window.location.href = '/online_fitolab';
            };

        });