var s = document.createElement('link');
s.type = 'text/css';
s.rel = 'stylesheet';
s.href= '/base/vote/style.css';
document.querySelector('head').appendChild(s);

var s = document.createElement('div');
s.id = 'exp_vote_pop';
document.querySelector('body').appendChild(s);

if(0){
	var elements = document.querySelectorAll('.exp_area_vote');
	Array.prototype.forEach.call(elements, function(el, i){
		var id = el.querySelector('.vote_id').textContent;
		el.textContent = '';
		var html = '';
		var obj = el;

		fetch('/api/getVote/'+id).then(response => response.json()).then(data => {
			html = '<div class="exp_vote_title">'+data.title+'</div><form action="" method="post"><ul>';
			var all_ans = JSON.parse(data.answers);
			var youtube = '', link_listen = '';
			all_ans.forEach(function(val, key){
				html += '<li><label><input type="radio" name="t" value="'+key+'" /> '+val+'</label></li>';
			});
	        var voted = '';
	        if(data.voted) voted='disabled="disabled"';
	        html += '</ul><div class="exp_vote_caption"><button '+voted+' class="exp_fl" type="submit">Bình chọn</button><button type="button" class="exp_fr">Xem kết quả</button></div></form>';
			obj.insertAdjacentHTML('beforeend', html);

			obj.querySelector('li:first-child input').click();
			var form = obj.querySelector('form');
			form.addEventListener("submit", function(event){
				event.preventDefault()
				var val = form.querySelector('input[name=t]:checked').val;
				form.querySelector('.exp_fl').setAttribute('disabled', 'disabled');
				var milliseconds = new Date().getTime();

				fetch('/api/setVote/'+id+'?t='+milliseconds, {
					method: 'post',
					headers: {
						'Accept': 'application/json, text/plain, */*',
						'Content-Type': 'application/json'
					},
					body: {t: val}
				}).then(data => {
					console.log(data);
					// if(msg!='0') data.result = msg;
	    			// obj.find('.exp_fr').click();
				});
			});

			// console.log(form);

		});

			// form.addEventListener("submit", function(){
	            // var val = form.querySelector('input[name=t]:checked').val();

	            // console.log(val)
	            // var milliseconds = new Date().getTime();
	            // form.querySelector('.exp_fl').setAttribute('disabled', 'disabled');


	   //          fetch('/api/setVote/'+id, {
				// 	method: 'post',
				// 	headers: {
				// 		'Accept': 'application/json, text/plain, */*',
				// 		'Content-Type': 'application/json'
				// 	},
				// 	body: JSON.stringify({t: val})
				// }).then(response => response.json()).then(data => {
				// 	// if(msg!='0') data.result = msg;
	   //  //           	obj.find('.exp_fr').click();
				// });

	         //    $.ajax({
	        	// 	type: "POST",
	        	// 	url: '/api/setVote/'+id+'?t=',
	         //        data:  {t: val},
	        	// 	dataType: "html",
	        	// 	success: function(msg){
	         //          if(msg!='0') data.result = msg;
	         //          obj.find('.exp_fr').click();
	        	// 	}
	        	// });

			// });

		//     $.getJSON('/api/getVote/'+id, function(data) {
		//         


		//         
		//         obj.find('form').submit(function(){
		//             var val = $(this).find('input[name=t]:checked').val();
		//             var milliseconds = new Date().getTime();
		//             $(this).find('.exp_fl').attr('disabled', 'disabled');
		//             $.ajax({
		//         		type: "POST",
		//         		url: '/api/setVote/'+id+'?t='+milliseconds,
		//                 data:  {t: val},
		//         		dataType: "html",
		//         		success: function(msg){
		//                   if(msg!='0') data.result = msg;
		//                   obj.find('.exp_fr').click();
		//         		}
		//         	});
		//             return false;
		//         });
		//         obj.find('.exp_fr').click(function(){
		//             $('body').css('overflow', 'hidden');
		//             var obj = $(this).parents('.exp_area_vote');
		//             var htmlp = '<p class="exp_vote_plet">Kết quả thăm dò</p>';
		//             htmlp += '<p class="exp_vote_ptit">'+data.title+'</p>';
		//             htmlp += '<p class="exp_vote_ptime">'+data.time+'</p><table class="exp_allvote">';
		//             var total = 0;
		//             if(data.result) {
		//                 var all_result = jQuery.parseJSON(data.result);
		//                 $.each(all_result, function(key, val) {total+=val;})
		//             }
		//             $.each(all_ans, function(key, val) {
		//                 var percent = 0;
		//                 var voted = 0;
		//                 if(total>0) {
		//                     if(isNaN(all_result[key]) || all_result[key]==undefined) all_result[key] = 0;
		//                     percent = Math.round(((all_result[key])/total*100) * 100) / 100;
		//                     voted = all_result[key];
		//                 }
		//                 htmlp += '<tr><td class="label">'+val+'</td><td><span class="exp_percent"><i style="width:'+percent+'%"><b>'+percent+'%</b></i></span></td><td>'+voted+' phiếu</td></tr>';
		//             });
		            
		//             $('#exp_vote_pop').addClass('exp_open').html('<div class="exp_wrap">'+htmlp+'</table><div><a href="#" class="exp_vote_pclose">Đóng</a></div></div>');
		//             $('.exp_vote_pclose').unbind().click(function(){
		//                 $('#exp_vote_pop').removeClass('exp_open').html('');
		//                 $('body').css('overflow', 'auto');
		//                 return false;
		//             });
		//             return false;
		//         });
		//     });
	});
}

$('head').append("<link rel='stylesheet' href='http://www.doanmn.com/mir/base/vote/style.css' type='text/css' media='screen'>");
$('body').append('<div id="exp_vote_pop"></div>');

$('.exp_area_votemusic').addClass('exp_area_vote');
$('.exp_area_vote').each(function(){
    var id = $(this).find('.vote_id').text();
    $(this).html('');
    var html = '';
    var obj = $(this);
    $.getJSON('/api/getVote/'+id, function(data) {
    	console.log(data);
        html = '<div class="exp_vote_title">'+data.title+'</div><form action="" method="post"><ul>';
        var all_ans = jQuery.parseJSON(data.answers);
        var youtube = '', link_listen = '';
        $.each(all_ans, function(key, val) {
            html += '<li><label><input type="radio" name="t" value="'+key+'" /> '+val+'</label></li>';
        });
        var voted = '';
        if(data.voted) voted='disabled="disabled"';
        html += '</ul><div class="exp_vote_caption"><button '+voted+' class="exp_fl" type="submit">Bình chọn</button><button type="button" class="exp_fr">Xem kết quả</button></div></form>';
        obj.append(html);
        obj.find('li:eq(0) input').click();
        obj.find('form').submit(function(){
            var val = $(this).find('input[name=t]:checked').val();
            console.log(val)
            var milliseconds = new Date().getTime();
            $(this).find('.exp_fl').attr('disabled', 'disabled');
            $.ajax({
        		type: "POST",
        		url: '/api/setVote/'+id+'?time='+milliseconds,
                data:  {t: val},
        		dataType: "html",
        		success: function(msg){
                  if(msg!='0') data.result = msg;
                  obj.find('.exp_fr').click();
        		}
        	});
            return false;
        });
        obj.find('.exp_fr').click(function(){
            $('body').css('overflow', 'hidden');
            var obj = $(this).parents('.exp_area_vote');
            var htmlp = '<p class="exp_vote_plet">Kết quả thăm dò</p>';
            htmlp += '<p class="exp_vote_ptit">'+data.title+'</p>';
            htmlp += '<p class="exp_vote_ptime">'+data.time+'</p><table class="exp_allvote">';
            var total = 0;
            if(data.result) {
                var all_result = jQuery.parseJSON(data.result);
                $.each(all_result, function(key, val) {total+=val;})
            }
            $.each(all_ans, function(key, val) {
                var percent = 0;
                var voted = 0;
                if(total>0) {
                    if(isNaN(all_result[key]) || all_result[key]==undefined) all_result[key] = 0;
                    percent = Math.round(((all_result[key])/total*100) * 100) / 100;
                    voted = all_result[key];
                }

                htmlp += '<tr><td class="label">'+val+'</td><td><span class="exp_percent"><i style="width:'+percent+'%"><b>'+percent+'%</b></i></span></td><td>'+voted+' phiếu</td></tr>';
            });
            
            $('#exp_vote_pop').addClass('exp_open').html('<div class="exp_wrap">'+htmlp+'</table><div><a href="#" class="exp_vote_pclose">Đóng</a></div></div>');
            $('.exp_vote_pclose').unbind().click(function(){
                $('#exp_vote_pop').removeClass('exp_open').html('');
                $('body').css('overflow', 'auto');
                return false;
            });
            return false;
        });
    });
});