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 = '';
            if(id.split('_')[0] == 'tem'){
                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="tem' + i + '" class="tem-select"><option value="23&#176;C" selected>23&#176;C</option><option value="24&#176;C">24&#176;C</option><option value="25&#176;C">25&#176;C</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] == 'lamp'){
                    html += '<select name="lamp_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] == 'lamp'){
                    html += ' :<select name="lamp_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(id.split('_')[0] == 'tem'){
                html += '<div class="col-md-3 col-sm-12 col-xs-12"></div>';
            };
                html +=	'<div  class="col-xs-3">';
                    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] == 'lamp'){
                    html +=	'<select name="lamp_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] == 'lamp'){
                    html +=	' :<select name="lamp_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');
            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){
                 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'){
                        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 lamp = $(".set-schedule")[1];
                var lamp_div = $("#lamp_div");

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

            lamp.onclick =  function(){
                lamp.style.display = 'none';
                lamp_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 = '/setting_stem';
            };

        });