$('document').ready(function(){
    
    // Load XML file through Ajax
    $.ajax({
        type: "GET",
        url: "srcfile.xml",
        dataType: "xml",
        success: parseXml
    });
                
    function parseXml(xml){
        // Loop through BLOCK elements
        $(xml).find('BLOCK').each(function(){
        
            // For each XML BLOCK-node, append code to matching article-element
            if($(this).attr('id') == 'default'){
                $('article#default').append('<h2>Introduction</h2>'+$(this).find('DEFAULT').text());
            }
            else if($(this).attr('id') == 'experience'){
                $(this).find('COMPANY').each(function(){
                    var company = $(this);
                    $('article#experience').append('<h2>'+$(this).attr('id')+'</h2><span class="jobtitle">'+company.find('JOBTITLE').text()+'</span><span class="summary">'+company.find('SUMMARY').text()+'</span><span class="description">'+company.find('DESCRIPTION').text()+'</span>');
                    // Add each skill per job, then wrap in ul-element
                    company.find('SKILLS').find('SKILL').each(function(){
                        $('article#experience').append('<li>'+$(this).text()+'</li>');
                    });
                    $('article#experience > li').wrapAll('<ul class="skills">');
                    $('article#experience').append('</ul><span class="date">'+company.find('DATE').text()+'</span><span class="location">'+company.find('LOCATION').text()+'</span>');
                });
            }
            else if($(this).attr('id') == 'education'){
                $(this).find('SCHOOL').each(function(){
                    var school = $(this);
                    $('article#education').append('<h2>'+$(this).attr('id')+'</h2><span class="description">'+school.find('DESCRIPTION').text()+'</span><span class="diploma">'+school.find('DIPLOMA').text()+'</span><span class="date">'+school.find('DATE').text()+'</span><span class="location">'+school.find('LOCATION').text()+'</span>');
                });
            }
            else if($(this).attr('id') == 'skills'){
                $(this).find('SKILLSET').each(function(){
                    var skillset = $(this);
                    $('article#skills').append('<h2>'+$(this).attr('id')+'</h2>');
                    // Check if skill has a level, then add all and wrap in ul-element
                    skillset.find('SKILL').each(function(){
                        if($(this).attr('level')){
                            $('article#skills').append('<li>'+$(this).text()+'<span class="level">'+$(this).attr('level')+'</span></li>');
                        } else {
                            $('article#skills').append('<li>'+$(this).text()+'</li>');
                        }
                    });
                    $('article#skills > li').wrapAll('<ul class="skills">');
                });
                
                // Replace the levels for spans with matching class
                $('.level').each(function(){
                    $(this).html('<span class="level'+$(this).html()+'"></span>');
                });
            }
            else if($(this).attr('id') == 'interests'){
                $(this).find('INTERESTS').each(function(){
                    var interest = $(this);
                    $('article#interests').append('<h2>'+interest.attr('id')+'</h2>');
                    interest.find('INTEREST').each(function(){
                        $('article#interests').append('<li>'+$(this).text()+'</li>');
                    });
                    $('article#interests > li').wrapAll('<ul class="skills">');
                });
            }
        });
    }
    
    $('.showcode').click(function(){
        $(this).hide();
        $(this).parent().find('div').show();
    });
});