$(document).ready(function() {

    $("#sortable").css('display','block');
    $("#sortable-label").css('display','block');
    
    $("#section-order-label").css('display','none');
    $("#section-order").css('display','none');
 
    $("#sortable").sortable({
        update: function(event, ui) { 
            //updateSectionOrder();
            updateCodeExamples();
       }
    });
    
    $("#sortable").disableSelection(); 
    
    
    $("#format").change(function () {
        updateCodeExamples();
    })
    .change();

    $("#url").blur(function () {
         updateCodeExamples();
    });
    
    $("#url").keypress(function (e) {
        updateCodeExamples();
    });


    // On document load reset order
    updateSectionOrder();
    $("#url-code").attr('value','');
    $("#html-code").attr('value','');
    
});


function updateCodeExamples(){
    updateSectionOrder();
    var link = 'http://lab.madgex.com/api/hresumeconversion1_0/?url=';
    var html = '<a href="';
    var sectionOrder = $("#section-order").attr('value');
    var terminology = $("#terminology").attr('value');
    
    var format = $("#format").attr('value');
    var url = $("#url").attr('value');
    
    link += url + "&format=" + format.toLowerCase() + "&section-order=" + sectionOrder + "&terminology=" + terminology;
    html = html+ link + '">Download resume as ' + format + ' document</a>'; 
    
    if( url != ''){
        $("#url-code").attr('value',link);
        $("#html-code").attr('value',html);
    }
}

function updateBadgeCode(format,exampleId, codeId){

    var sectionOrder = $("#section-order").attr('value');
    var terminology = $("#terminology").attr('value');
    
    var link = "http://lab.madgex.com/api/hresumeconversion1_0/?format=" + format.toLowerCase() + "&section-order=" + sectionOrder + "&terminology=" + terminology;
    var html = '<a href="' + link + '" target="_blank"><img border="0" src="http://lab.madgex.com/images/' + format.toLowerCase() + '-icon.gif" alt="' + format + ' icon" /><br/>Download as ' + format + '</a>'; 

    $(codeId).attr('value',html);
    //$(exampleId).html(html);
   
}




function updateSectionOrder(){
   var output = $("#sortable").sortable('toArray');
   $("#section-order").attr('value',output.join());
   
   
   updateBadgeCode("Word","#word-badge-example","#word-badge");
   updateBadgeCode("PDF","#pdf-badge-example","#pdf-badge");
}