<script type="text/javascript">

        // ** NOT FINISHED **
        // how to size labels / targets correctly? - get size of largest label and match other to it - what if on small device?
        // overlap labels to use less space

        // pageChanged & sizeChanged functions are needed in every model file
        // other functions for model should also be in here to avoid conflicts
        var timeline = new function() {
                // function called every time the page is viewed after it has initially loaded
                this.pageChanged = function() {

                }

                // function called every time the size of the LO is changed
                this.sizeChanged = function(firstLoad) {

                }
        }

        var pageXML = pages[currentPage];

        $("#pageContents").data("selectedLabel", false);
        $("#pageContents #textHolder").html(addLineBreaks(pageXML.getAttribute("text")));

        var labelTxt = pageXML.getAttribute("checkBtnTxt");
        var labelTip = pageXML.getAttribute("checkBtnTip");
        if (labelTxt == "" || pageXML.getAttribute("label") == undefined) {
                labelTxt = "Check Answers";
                labelTip = "Check Answers";
        }

        $("#pageContents #button")
                .button({
                        label:                  labelTxt,
                        description:    labelTip
                })
                .click(function() {
                        $(".target img").addClass("hidden");
                        $("#answerHolder").children()
                                .each(function() {
                                        var $thisTarget = $(this).find(".target");
                                        var $img = $thisTarget.find("img");
                                        var $thisLabel = $thisTarget.data("label");
                                        if ($thisLabel != false) {
                                                if ($thisLabel.data("correct") == $thisTarget.data("correct")) {
                                                        $img
                                                                .attr({
                                                                        "src":        "common_html5/tick.png",
                                                                        "alt":        "tick" // ** need translation **
                                                                })
                                                                .removeClass("hidden");
                                                } else {
                                                        $img
                                                                .attr({
                                                                        "src":        "common_html5/cross.png",
                                                                        "alt":        "cross" // ** need translation **
                                                                })
                                                                .removeClass("hidden");
                                                }
                                        }
                                });

                        $("#pageContents #feedback").fadeIn();
                });

        $("#pageContents #feedback")
                .html(addLineBreaks(pageXML.getAttribute("feedback")))
                .hide();

        var $labelHolder = $("#labelHolder");
        var $answerHolder = $("#answerHolder");
        var $label = $labelHolder.find(".label:first");
        var $answer = $answerHolder.find(".answer:first");

        $(pageXML).children()
                .each(function(i) {
                        var $thisLabel, $thisAnswer;
                        if (i != 0) {
                                $thisLabel = $label.clone().appendTo($labelHolder);
                                $thisAnswer = $answer.clone().appendTo($answerHolder);
                        } else {
                                $thisLabel = $label;
                                $thisAnswer = $answer;
                        }

                        $thisLabel
                                .data({
                                        "correct"     :i,
                                        "target"      :false
                                        })
                                .html("<p>" + this.getAttribute("text") + "</p>") // need p tags in there for screen readers (otherwise gets read in
                                .draggable({
                                        helper:         "original",
                                        stack:          ".label",
                                        revert:         "invalid"
                                        })
                                .bind("dragstart", function(e) {
                                        e.stopPropagation();
                                        $(".answer .target img").addClass("hidden");
                                        if ($("#pageContents").data("selectedLabel") != false) {
                                                $("#pageContents").data("selectedLabel").removeClass("selected");
                                        }
                                        $("#pageContents").data("selectedLabel", $(this));
                                        $(this).addClass("selected");
                                        })
                                //.bind("dragstop", function() {
                                        // ** Is this even required now?? **
                                        // ** add something here to make it draggable to whole answer area rather than just target? **
                                        //})
                                .bind("keypress", function(e) {
                                        if (e.charCode == 32) { // space bar to select label
                                                $(this).trigger("dragstart");
                                        }
                                        });

                        $thisAnswer
                                .droppable({
                                        accept: ".label",
                                        tolerance: "fit"
                                        })
                                .bind("drop", function(event, ui) {
                                        var $this = $(this).find(".target");
                                        var $oldLabel = $this.data("label");
                                        if ($oldLabel != false) { // if label already on target, move it away
                                                $("#labelHolder").prepend($oldLabel);
                                                $oldLabel
                                                        .removeAttr("style")
                                                        .data("target", false);
                                        }

                                        var $thisLabel = $("#pageContents").data("selectedLabel");
                                        var $oldTarget = $thisLabel.data("target"); // if label has come from another target, clear old target data
                                        if ($oldTarget != false) {
                                                $oldTarget.data("label", false);
                                        }
                                                
                                        $this
                                                .data("label", $thisLabel)
                                                .parent() // .answer
                                                        .removeClass("selected")
                                                        .find(".labelTarget").prepend($thisLabel); // This moves the label

                                        $thisLabel
                                                .removeAttr("style")
                                                .removeClass("selected")
                                                .data("target", $this);

                                        $("#pageContents").data("selectedLabel", false);

                                        $(".label, .target").each(function(i) { // sorts tab order
                                                $(this).attr("tabindex", i + 1);
                                        })
                                        })
                                .find(".target")
                                        .attr({
                                                "tabindex"    :i + 1 + $(pageXML).children().length,
                                                "title"               :"Target " + (i + 1) // ** need translation **
                                                })
                                        .data({
                                                "correct"     :i,
                                                "label"               :false
                                                })
                                        .focusin(function() {
                                                if ($("#pageContents").data("selectedLabel") != false && document.activeElement == this) {
                                                        $(this).parent().addClass("selected");
                                                }
                                                })
                                        .focusout(function() {
                                                $(this).parent().removeClass("selected");
                                                })
                                        .keypress(function(e) {
                                                var $pageContents = $("#pageContents");
                                                if (e.charCode == 32 && $pageContents.data("selectedLabel") != false) {
                                                        $(this).trigger("drop", $($pageContents.data("selectedLabel")));
                                                }
                                                })
                                        .find("p")
                                                .html(this.getAttribute("name"))
                                                .keypress(function(e) {
                                                        var $pageContents = $("#pageContents");
                                                        if (e.charCode == 32 && $pageContents.data("selectedLabel") != false) {
                                                                $(this).parent().trigger("drop", $($pageContents.data("selectedLabel")));
                                                        }
                                                })
                        $thisAnswer
                                .find(".labelTarget")
                                        .keypress(function(e) {
                                                var $pageContents = $("#pageContents");
                                                if (e.charCode == 32 && $pageContents.data("selectedLabel") != false) {
                                                        $(this).parent().find(".target").trigger("drop", $($pageContents.data("selectedLabel")));
                                                }
                                        })
                });

        // randomise order of labels
        var labels = $labelHolder.children(".label");
        labels.sort(function() {
                return (Math.round(Math.random()) - 0.5);
        });
        $labelHolder.remove(".label");
        for (var i=0; i<labels.length; i++) {
                $labelHolder.append(labels[i]);
                
                var num = i;
                var letter = "";
                while(num >= 0) {
                        letter = String.fromCharCode(num % 26 + 97) + letter;
                        num = Math.floor(i / 26) - 1;
                }
                $(labels[i]).attr({
                        "tabindex"    :i + 1,
                        "title"               :"Label " + letter.toUpperCase()
                });
        }

        if (pageXML.getAttribute("text") == "Matching Pairs") {
                $("#arrowHolder").remove();
        } else {
                // ** draw arrows between targets **
        }

        pageLoaded();

</script>

<style type="text/css">

        #pageContents #dragDropHolder {
                padding:        10px;
        }

        #pageContents #labelHolder {
                width:          100%;
                text-align:     center;
                height:         120px;
        }

        .label {
                width:          100px;
                height:         70px;
                margin:         0;
        }

        .label.selected {
                border: 2px solid yellow;
        }

        #pageContents #answerHolder {
                width:          100%;
                text-align:     center;
        }

        .answer {
                width:          120px;
                padding:        10px;
                border:         1px solid gray;
                background:     white;
                display:        inline-block;
        }

        .answer.selected {
                border: 2px solid green;
        }

        .answer .target {
                width:  100%;
        }

        .answer .labelTarget {
                height: 100px;
        }

        .answer .label {
                width:  100px;
        }

        #pageContents #feedback {
                margin-top:     10px;
        }

</style>

<div id="pageContents">

        <div id="textHolder">

        </div>

        <div id="dragDropHolder">

                <div id="labelHolder">
                        <div class="label whiteBorder" href=""></div>
                </div>

                <div id="answerHolder">
                        <div class="answer">
                                <div class="labelTarget"></div>
                                <div class="target">
                                        <p></p>
                                        <img></img>
                                </div>
                        </div>
                </div>

                <div id="arrowHolder">

                </div>

        </div>

        <button id="button"></button>
        <div id="feedback"></div>

</div>