$(function() {

	// If javascript enabled show poll
    $("#noJS").hide();
    $("#displayResults").show();
    $("#displayPoll").show();
	
    var ID;
    
    // Load xml Question + Answers
    $.ajax({
        url: "xml/poll.xml",
        dataType: "xml",
        success: function(data) {
            $(data).find("poll").each(function() {
                //var id = $(this).attr('id')
                var question = $(this).find('question').text();
                var answer1 = $(this).find('answer1').text();
                var answer2 = $(this).find('answer2').text();
                var answer3 = $(this).find('answer3').text();
                var answer4 = $(this).find('answer4').text();

                // Display Question
                $("#displayPoll h1 span").html(question);
                // Display Answers
                $("#displayPoll #list1 li:first span").text(answer1);
                $("#displayPoll #list1 li:last span").text(answer2);
                $("#displayPoll #list2 li:first span").text(answer3);
                $("#displayPoll #list2 li:last span").text(answer4);

            });

        }
    });

    // Display Ticked image 
    $("#displayPoll ul li img").each(function(i) {
        $(this).click(function() {
            // Enable submit button
            $("#btnSave").attr('disabled', '').attr('src', 'images/submit.jpg');

            // Add untick image to all img's
            $("#displayPoll ul li img").attr('src', 'images/untick.jpg');

            // Add tick image to selected img
            $(this).attr('src', 'images/tick.jpg');

            ID = $(this).attr("id");
            $("#hdID").val(ID);
            
        });
    });

    // Display the results
    $.ajax({
        url: "xml/poll.xml",
        dataType: "xml",
        success: function(data) {
            $(data).find("poll").each(function() {
                var answer1 = parseInt($(this).find('answer1').attr('count'));
                var answer2 = parseInt($(this).find('answer2').attr('count'));
                var answer3 = parseInt($(this).find('answer3').attr('count'));
                var answer4 = parseInt($(this).find('answer4').attr('count'));

                var totalCount = answer1 + answer2 + answer3 + answer4;

                // create the bars
                $("#bar1").animate({ height: (answer1 / totalCount) * 150 + 'px' }, 500).css({ 'background-color': '#E2EAF7', 'left': '10px' }).corner("rounded 5px tl").corner("rounded 5px tr");
                $("#bar2").animate({ height: (answer2 / totalCount) * 150 + 'px' }, 750).css({ 'background-color': '#D9E6F9', 'left': '130px' }).corner("rounded 5px tl").corner("rounded 5px tr");
                $("#bar3").animate({ height: (answer3 / totalCount) * 150 + 'px' }, 1000).css({ 'background-color': '#d9dadc', 'left': '250px' }).corner("rounded 5px tl").corner("rounded 5px tr");
                $("#bar4").animate({ height: (answer4 / totalCount) * 150 + 'px' }, 1250).css({ 'background-color': '#C3D7F8', 'left': '370px' }).corner("rounded 5px tl").corner("rounded 5px tr");

                // Set % top of bars
                $("#bar1 p").text(Math.round((answer1 / totalCount) * 100) + "%").css({ 'margin-top': '-35px' });
                $("#bar2 p").text(Math.round((answer2 / totalCount) * 100) + "%").css({ 'margin-top': '-35px' });
                $("#bar3 p").text(Math.round((answer3 / totalCount) * 100) + "%").css({ 'margin-top': '-35px' });
                $("#bar4 p").text(Math.round((answer4 / totalCount) * 100) + "%").css({ 'margin-top': '-35px' });

                // Display user's answer choice
                ID = $("#hdID").val();
                if (ID == "1" || ID == "2" || ID == "3" || ID == "4") {
                    var usersChoice = $(this).find('answer' + $('#hdID').val()).text();
                    $("#thankyou p").html("Your answer is: <strong>" + usersChoice + "</strong>");
                }
            });

        }
    });

});