present = {
    div : null,
    count : 0,
    uploading : false,
	init : function() {
        present.div = $('div#presentation-new');
        if (present.div.length == 0) return;
        present.div.append('<div id="extra-buttons"><a href="javascript:;" onclick="present.add(this)" class="button">Add Presentation</a></div>'); 
    },
    add : function(e) {
        hideMediaSelector();
        selectMedia = present.selectMedia;
        $('#media-manager-padding').remove();
        $('#media-manager').prepend('<a href="javascript:hideMediaSelector();">CLOSE</a>');
        $("#extra-buttons").remove();
        //$(e).remove();
        present.div.append('<div class="form-row"><label>Presentation Name:</label><input type="text" value="untitled" id="present-title"/></div>');
        present.div.append('<ul id="present-list"><p class="empty">EMPTY</p></ul>');
        present.div.append('<div id="present-buttons"><a href="javascript:;" onclick="present.addResource()" class="button">Add Resource</a> <a href="javascript:;" onclick="present.addText()" class="button">Add Text</a></div>');
        $('div#present-buttons').append('<a href="javascript:;" onclick="present.post()" class="button" style="float:right;" id="save-but">Save Presentation</a>');
        $('ul#present-list').sortable({cursor:'move', opacity:0.8}).css({cursor:'move'});
    },
    addResource : function() {
        showMediaSelector();
    },
    addText : function() {
        present.addItem("Text", "Slide " + (present.count + 1), "slide" + (present.count + 1), "<textarea/>", '', 'text', {retain:false});
    },
    selectMedia : function(id, url, title, type) {
        if (type == 'image') {
            present.addItem("Image", title, id, '<img src="' + url + '"/>', url, type);
        } else if (type == 'audio') {
            present.addItem("Audio", title, id, '<img src="/xca/mp3.png"/>', url, type);
        } else if (type == 'presentation') {
            present.download(url);
        }
        hideMediaSelector();
    },
    download : function(url) {
        $.ajax({type: "GET", url:url, dataType:"xml", success: present.downloadComplete, error:present.downloadFail});
    },
    downloadFail : function(request, status, error) {
        alert(status);
    },
    downloadComplete : function(xml) {
        var db = $(xml);
        db.find('scene').each(present.addScene);
    },
    addScene : function() {
        var name = $(this).attr('name');
        var url = $(this).text();
        var retain = $(this).attr('retain') == 'true';
        $('audio', this).each(function() { present.addItem("Audio", name, url, '<img src="/xca/mp3.png"/>', url, 'audio') });
        $('image, img', this).each(function() { present.addItem("Image", name, url, '<img src="' + url + '"/>', url, 'image') });
        $('text', this).each(function() { var t = $('<div><textarea/></div>'); $('textarea', t).text(url.replace(/^\s+|\s+$/g,"")); present.addItem("Text", name, name, t.html(), '', 'text', {retain:retain})});
    },
    addItem : function(label, title, id, thumb, url, type, params) {
        present.count++;
        var i = $('<input type="text" class="slide-title"/>');
        i.val(title);
        var props = $('<div class="present-props"/>');
        props.append('<label>' + label + '</label>');
        props.append(i);
        if (type == 'text') {
            var retain = $('<div><input type="checkbox" name="retain" value="1"/>Retain previous image</div>');
            if (params != null && params.retain == true) {
                $('input', retain).attr('checked', true);
            }
            props.append(retain);
        }
        var remove = $('<a href="javascript:;" class="button">Remove</a>');
        remove.click(present.remove);
        $(remove).data('slideid', 'slide' + present.count);
        props.append(remove);
        var l = $('<li id="slide' + present.count + '"/>');
        l.append(props);
        var r = $('<div class="present-image">' + thumb + '</div>');
        l.append(r);
        l.data('url', url);
        l.data('type', type);
        l.data('thumb', thumb);
        $('ul#present-list').append(l);
        
        $('ul#present-list p.empty').hide();
    },
    remove : function() {
        if (confirm('remove this item?')) {
            $('li#' + $(this).data('slideid')).remove();
            if ($('ul#present-list li').length == 0) $('ul#present-list p.empty').show();
        }
    },
    post : function() {
        if (present.uploading) return;
        var xmlText = present.getXml();
        alert(xmlText);
        present.uploading = true;
        $('#save-but').css({'opacity':0.5}).text("Saving");
        $.post('/post-xml', {description:$('#present-title').val(), xml:xmlText, suffix:'xpl'}, present.uploadComplete, 'xml');
    },
    uploadComplete : function(response, status, request) {
        present.uploading = false;
        $('#save-but').css({opacity:1.0}).text("Save Presentation Again");
        if (status == "success") {
            alert("upload complete");
        } else {
            alert("upload failed (" + status + ")");
        }
    },
    getXml : function() {
        var xml;
        if (window.ActiveXObject){
            xml = new ActiveXObject("Microsoft.XMLDOM");
        } else {
            xml = document.implementation.createDocument('', 'xml', null);
        }
        var top = xml.createElement('presentation');
        var head = xml.createElement('head');
        var desc = xml.createElement('description');
        desc.appendChild(xml.createTextNode($('#present-title').val()));
        head.appendChild(desc);
        top.appendChild(head);
        $('ul#present-list>li').each(function() {
            var s = xml.createElement('scene');
            s.setAttribute('name', $('input.slide-title', this).val());
            var type = $(this).data('type');
            var res = xml.createElement(type);
            if (type != 'text') {
                res.appendChild(xml.createTextNode($(this).data('url')));
                
            } else {
                res.appendChild(xml.createTextNode($('textarea', this).val().replace(/^\s+|\s+$/g,"")));
                s.setAttribute('retain', $('input[type=checkbox]', this).is(':checked') ? 'true' : 'false');
            }
            s.appendChild(res);
            top.appendChild(s);
        });
        return xml2Str(top);
    }
}

doodle = {
    svg : null,
    div : null,
    dragOval: null,
    shiftDown : false,
    startPos : {x:0, y:0},
    dragging : false,
    tools : null,
    selectedTool : '',
    start : function() {
        hideMediaSelector();
        $('#media-manager-padding').remove();
        $('#media-manager').prepend('<a href="javascript:hideMediaSelector();">CLOSE</a>');
        $("#extra-buttons").remove();
        /*doodle.svg = $('<svg width="800" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>');
        doodle.svg.append('<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>');
        present.div.append(doodle.svg);
        present.div.css({height:800, width:600});*/
        doodle.tools = $('<div style="float:right;width:200px;">' +
            '<table style="border-collapse:collapse;border:1px solid #666">' +
            '<tr><td class="d-line">LINE</td><td class="d-text">TEXT</td></tr>' +
            '<tr><td class="d-line-colour">LCOL</td><td class="d-fill-colour">FCOL</td></tr>' +
            '<tr><td class="d-doodle">DOOD</td><td class="d-text-box">TBOX</td></tr>' +
            '<tr><td class="d-lines">LINES</td><td class="d-arrow">ARROW</td></tr>' +
            '<tr><td class="d-oval">OVAL</td><td class="d-rect">RECT</td></tr>' +
            '<tr><td class="d-undo">UNDO</td><td class="d-redo">REDO</td></tr>' +
            '</table>' +
            '</div>');
        present.div.append(doodle.tools);
        $('td', doodle.tools).click(doodle.clickTools);
        doodle.div = $('<div style="width:450px;height:300px;border:3px solid #eee;cursor:crosshair;"></div>');
        
        present.div.append(doodle.div);
        doodle.div.svg();
        doodle.svg = doodle.div.svg('get');
        $(document).mouseup(doodle.up);
        $(document).mousemove(doodle.move);
        doodle.div.mousedown(doodle.down);
        //doodle.svg.ellipse(70, 220, 50, {fill: 'red', stroke: 'blue', strokeWidth: 5});
        doodle.selectTool('d-oval');
    },
    clickTools : function() {
        doodle.selectTool($(this).attr('class'));
    },
    selectTool : function(name) {
        $('td', doodle.tools).attr('style', '');
        $('td.' + name, doodle.tools).attr('style', 'background-color:#999;color:#fff;');
        doodle.selectedTool = name;
    },
    down : function(event) {
        var off = doodle.div.offset();
        var c = {x:event.pageX - off.left, y:event.pageY - off.top};
        doodle.startPos = c;
        doodle.dragOval = doodle.svg.ellipse(c.x, c.y, 0, 0, {fill: 'red', stroke: 'blue', strokeWidth:5});
        doodle.dragging = true;
        doodle.shiftDown = event.shiftKey;
    },
    move : function(event) {
        if (!doodle.dragging) return;
        var start = doodle.startPos;
        var off = doodle.div.offset();
        var c = {x:event.pageX - off.left, y:event.pageY - off.top};
        var r = Math.round(Math.sqrt(Math.pow(c.x - start.x, 2) + Math.pow(c.y - start.y, 2))/2);
        var centre = {x:(c.x + start.x)/2, y:(c.y + start.y)/2};
        var rx = Math.abs(c.x - start.x)/2;
        var ry = Math.abs(c.y - start.y)/2;
        if (doodle.shiftDown) {
            rx = Math.max(rx, ry);
            ry = rx;
            centre = {x: start.x + rx, y: start.y + ry};
        }
        doodle.svg.change(doodle.dragOval, {cx:centre.x, cy:centre.y, rx:rx, ry:ry});
        return false;
    },
    up : function(event) {
        doodle.dragging = false;
    }
}

function xml2Str(xmlNode) {
    try {
        return (new XMLSerializer()).serializeToString(xmlNode);
    } catch (e) {
        try {
            return xmlNode.xml;
        } catch (e) {
            alert('Xmlserializer not supported');
        }
    }
    return false;
}
$(document).ready(present.init);