<script type=’text/javascript’>

/*/ function Editors() { this.editors = Array(); this.onMove = Editors_onMove; this.mouseUp = Editors_mouseUp; this.addAreas = Editors_addAreas; } function Editors_addAreas(areas) { this.editors.push(areas); } function Editors_onMove(mx, my) { for (a in this.editors) this.editors[a].onMove(mx, my); } function Editors_mouseUp() { for (a in this.editors) { this.editors[a].mouseUp(); } } /*/

var mx = 0; var my = 0; var uiid = 1;

function Areas(embed_into, global_variable_name) {

 // Variables
 this.global_variable_name = global_variable_name;
 this.editors = 0;
 this.nextAreaPos = 0;
 this.embed_into = embed_into;
 this.areas = Array();
 this.x = 0;
 this.y = 0;
 this.document = 0;
 this.mode = "PLAY";
 this.new_label = "SPEECH";
 // Methods
 this.addArea = Areas_addArea;
 this.dump = Areas_dump;
 this.render = Areas_render;
 this.getTimeFromPos = Areas_getTimeFromPos;
 this.getPosFromTime = Areas_getPosFromTime;
 // Operations
 this.buildByDoc = Areas_buildByDoc;
 this.onMouseDown = Areas_onMouseDown;
 this.findObjectById = Areas_findObjectById;
 this.rebuildAllLayers = Areas_rebuildAllLayers;
 this.setMode = Areas_setMode;
 this.setNextLabel = Areas_setNextLabel;
 this.original_position = 0;   
 this.currently_dragged_ctrl = 0;
 this.onMove = Areas_onMove;
 this.mouseUp = Areas_mouseUp;
 // Colors of the segments
 this.label_colors = Array();
 this.label_colors["SPEECH"] = "#cccccc";
 this.label_colors["SILENCE"] = "#333333";
 this.label_colors["Q"] = "#ff0000";
 this.label_colors["A"] = "#00ff00";
 this.label_colors["QA"] = "#ffff00";
 this.label_colors[""] = "#cccccc";
 // Aux objects
 this.vertical_cursor_div = 0;
 this.vertical_cursor_enabled = 0;
 this.switchVerticalCursor = Areas_switchVerticalCursor;
 this.switchDragPoints = Areas_switchDragPoints;

} ——————————————————————————————————————- function Areas_switchVerticalCursor(new_state) { if (new_state == “on”) { this.vertical_cursor_div.style.visibility = “visible”; this.vertical_cursor_enabled = 1; } else if (new_state == “off”) { this.vertical_cursor_div.style.visibility = “hidden”; this.vertical_cursor_enabled = 0; } } function Areas_switchDragPoints(new_state) { var visibility; if (new_state == “on”) visibility = “visible”; if (new_state == “off”) visibility = “hidden”; for (var a in this.areas) { for (var c in this.areas[a].controls) { cc = this.areas[a].controls[c]; if (cc.type == “drag-point”) cc.html_element.style.visibility = visibility; } } } function Areas_onMove(mx, my) { rx = mx - this.x; ry = my - this.y; if (this.currently_dragged_ctrl != 0) { this.currently_dragged_ctrl.setXY(rx, 0); this.currently_dragged_ctrl.area.updateSegments(); } if (this.vertical_cursor_enabled == 1) { this.vertical_cursor_div.style.left = rx; } } function Areas_mouseUp() { if (this.currently_dragged_ctrl != 0) { var prev_seg = this.currently_dragged_ctrl.prev_segment.doc_segment; var next_seg = this.currently_dragged_ctrl.next_segment.doc_segment; if (next_seg != 0) next_seg.moveStart(this.getTimeFromPos(this.currently_dragged_ctrl.x), 1); if (prev_seg != 0) prev_seg.moveStop(this.getTimeFromPos(this.currently_dragged_ctrl.x), 1); this.currently_dragged_ctrl = 0; } } function Areas_setMode(new_mode) { this.mode = new_mode; } function Areas_setNextLabel(new_label) { this.new_label = new_label; } function Areas_getTimeFromPos(pos) { return pos / 10.0; } function Areas_getPosFromTime(time) { return time * 10; } function Areas_onMouseDown(id, mx, my) { rx = mx - this.x; ry = my - this.y; ctrl = this.findObjectById(id); if (ctrl.type == “segment” && this.mode == “PLAY”) { /* EDIT THIS TO PLAY */ alert(”SHOULD PLAY WAV FILE: " + ctrl.doc_segment.layer.channel.document.wav_file + “\nCHANNEL: " + ctrl.doc_segment.layer.channel.id + “\nFROM [ms]: " + ctrl.doc_segment.start * 1000 + “\nTO [ms]: " + ctrl.doc_segment.stop * 1000); } } ——————————————————————————————————————- function Areas_findObjectById(id) {

 for (a in this.areas) {
    for (c in this.areas[a].controls) {
       ctrl = this.areas[a].controls[c];
       if (ctrl.id == id) return ctrl;
    }
 }
 return 0;

} ——————————————————————————————————————- function Areas_buildByDoc(document, mode, invert_other) { this.document = document; for (c in document.channels) { if (c != 0) { aPad = new Area(”pad”, 5);

       // this.addArea(aPad);
    }
    
    var channel = document.channels[c];

    var todo = Array();
    
    if (invert_other == 1 && c != 0) {
       todo.push("segments");
       todo.push("time");
       if (mode != "segments_only") todo.push("signal");
    }
    else {
       if (mode != "segments_only") todo.push("signal");
       todo.push("time");
       todo.push("segments");
    }
    
    for (t in todo)
    {
       now = todo[t];
       if (now == "signal") {
          // Create the WAV image
          // Create the meter
          if (mode != "segments_only") {
             aSignal = new Area(c + "-signal", 100);
             this.addArea(aSignal);
             var i = new Control("image");
             i.image_url = document.job_name + ".wav.channel-" + channel.id + ".wav.volume.volume.png";
             // i.image_url = "2195189260110469.wav.channel-0.wav.volume.volume.png";
             i.setXY(0, 0);
             aSignal.addControl(i)

             aPad = new Area("pad", 5);
             this.addArea(aPad);
          }
       }
       
       if (now == "time") {
          var aTime = new Area(c + "-time", 10);
          this.addArea(aTime);
          var i = new Control("image");
          i.image_url = document.job_name + ".wav.channel-" + channel.id + ".wav.volume.tick.png";
          // i.image_url = "2195189260110469.wav.channel-0.wav.volume.tick.png";
          i.setXY(0, 0);
          aTime.addControl(i);
    
          // aPad = new Area("pad", 5);
          // this.addArea(aPad);      
       }
       
       if (now == "segments") {
          for (l in channel.layers)
          {
             var layer = channel.layers[l];
             var aArea = new Area(c + "-L" + l, 20); this.addArea(aArea);
             for (s in layer.segments) {
                var segment = layer.segments[s];
                aArea.addSegment(segment);
             }
             aArea.doc_layer = layer;
             aArea.setupPoints();
    
             // aPad = new Area("pad", 5);
             // this.addArea(aPad);
          }
       }
    }

 }

} ——————————————————————————————————————- function Areas_rebuildAllLayers() { for (a in this.areas) { this.areas[a].rebuildByDocLayer(); } } ——————————————————————————————————————- function Areas_addArea(area) {

 this.areas.push(area);
 area.y = this.nextAreaPos;
 this.nextAreaPos = this.nextAreaPos + area.cy;
 area.areas = this;

} function Areas_dump() {

 var s = "AREAS\n";
 for (var a=0; a<this.areas.length; a++) {
    s = s + this.areas[a].dump();
 }
 return s;

} function Areas_render() {

 var pos = getElementAbsolutePos(this.embed_into);
 this.x = pos.x;
 this.y = pos.y;

 for (var a=0; a<this.areas.length; a++) {
    this.areas[a].render();
 }
 
 if (this.vertical_cursor_div == 0) {
    var new_div = document.createElement('div');
    new_div.setAttribute('id', "vertical_cursor");
    new_div.style.position = "absolute";
    new_div.style.left = 0;
    new_div.style.top = 0;
    new_div.style.width = 1;
    new_div.style.height = this.nextAreaPos;
    new_div.style.backgroundColor = "#ffffff";
    new_div.style.visibility = "visible";
    new_div.innerHTML = "";
    new_div.style.zIndex = 5;
    this.embed_into.appendChild(new_div);
    this.vertical_cursor_div = new_div;
 }
 
 this.embed_into.style.height = this.nextAreaPos + 20;
 this.switchDragPoints("off");

}

/*/ function Area(id, cy) { Control level variables this.areas = 0; this.controls = Array(); this.id = id; this.cy = cy; this.y = 0; Document level variables this.segments = Array(); this.doc_layer = 0; document layer Methods this.addControl = Area_addControl; this.dump = Area_dump; this.render = Area_render; this.getEmbedInto = Area_getEmbedInto; this.setupPoints = Area_setupPoints; this.updateSegments = Area_updateSegments; this.rebuildByDocLayer = Area_rebuildByDocLayer; Document level this.addSegment = Area_addSegment; } ——————————————————————————————————————- function Area_addSegment(segment) { this.segments.push(segment); } function Area_addControl(control) { control.area = this; this.controls[this.controls.length] = control; } function Area_getEmbedInto() { return this.areas.embed_into; } function Area_dump() { var s = “Area " + this.id + “; cy=” + this.cy + “; y=” + this.y + “\n”; for (var a=0; a<this.controls.length; a++) { s = s + this.controls[a].dump(); } return s; } function Area_render() { for (var a=0; a<this.controls.length; a++) { this.controls[a].render(); } this.updateSegments(); } function Area_setupPoints() { Phase 1: Create controllable areas [POINT - SEGMENT - POINT - SEGMENT - POINT] for (var a=0; a<this.segments.length; a++) { var p = new Control(”drag-point”); p.setXY(this.areas.getPosFromTime(this.segments[a].start), 0); if (a == 0) p.movable = 0; this.addControl(p); var q = new Control(”segment”); q.doc_segment = this.segments[a]; this.addControl(q); if (a == this.segments.length-1) { var p = new Control(”drag-point”); p.setXY(this.areas.getPosFromTime(this.segments[a].stop), 0); p.movable = 0; this.addControl(p); } } Phase 2: Setup var prev_drag_point = 0; var prev_segment = 0; for (var a=0; a<this.controls.length; a++) { if (this.controls[a].type == “drag-point”) { if (prev_segment != 0) { this.controls[a].prev_segment = prev_segment; prev_segment.next_drag_point = this.controls[a]; } else this.controls[a].movable = 0; prev_drag_point = this.controls[a]; } if (this.controls[a].type == “segment”) { if (prev_drag_point != 0) { this.controls[a].prev_drag_point = prev_drag_point; prev_drag_point.next_segment = this.controls[a]; } prev_segment = this.controls[a]; } } prev_drag_point.movable = 0; } function Area_updateSegments() { for (var a=0; a<this.controls.length; a++) { if (this.controls[a].type == “segment”) { var x = this.controls[a].prev_drag_point.x; var y = 0; var cx = this.controls[a].next_drag_point.x - x; var cy = 20; this.controls[a].setXY(x, y); this.controls[a].setCxCy(cx, cy); } } } function Area_rebuildByDocLayer() { Remove all HTML elements var html_parent = this.getEmbedInto(); for (c in this.controls) { if (this.controls[c].type == “image”) continue; html_parent.removeChild(this.controls[c].html_element); } Remove all data this.controls = Array(); this.segments = Array(); if (this.doc_layer != 0) { for (s in this.doc_layer.segments) { var segment = this.doc_layer.segments[s]; this.addSegment(segment); } this.setupPoints(); this.areas.render(); } } /*/ all_controls = Array(); function Control(type) { Variables this.id = uiid++; all_controls[this.id] = this; this.type = type; “image”, “drag-point”, “segment” this.area = 0; Parent area this.html_element = 0; Associated HTML element Variables for positioned controls this.x = 0; Relative to the parent area this.y = 0; this.cx = 0; Only for the segments this.cy = 0; Variables for controls of type “image” this.image_url = 0; Variables for controls of type “drag-point” this.prev_segment = 0; this.next_segment = 0; this.movable = 1; Variables for controls of type “segment” this.doc_segment = 0; this.prev_drag_point = 0; this.next_drag_point = 0; Methods this.dump = Control_dump; this.getX = Control_getX; this.getY = Control_getY; this.setXY = Control_setXY; this.setCxCy = Control_setCxCy; this.render = Control_render; } function Control_dump() { if (this.type == “image”) { return “* * " + this.type + " " + this.id + “; x=” + this.x + “; y=” + this.y + “; real y=” + this.getY() + “; URL=” + this.image_url + “\n”; } if (this.type == “drag-point”) { return “* * " + this.type + " " + this.id + “; prev_segment=” + this.prev_segment.id + “; next_segment=” + this.next_segment.id + “\n”; } if (this.type == “segment”) { return “* * " + this.type + " " + this.id + “; prev_segment=” + this.prev_drag_point.id + “; next_segment=” + this.next_drag_point.id + “\n”; } else { return “* * " + this.type + “\n”; } } function Control_setXY(x, y) { this.x = x; this.y = y; if (this.html_element != 0) { this.html_element.style.left = this.getX(); this.html_element.style.top = this.getY(); } } function Control_setCxCy(cx, cy) { this.cx = cx; this.cy = cy; if (this.html_element != 0) { this.html_element.style.width = cx; this.html_element.style.height = cy; } } function Control_getX() { if (this.type == “drag-point”) return (this.x - 2); return this.x; } function Control_getY() { if (this.type == “drag-point”) return (this.area.y + 3); return this.y + this.area.y; } ——————————————————————— /* Taken from http://forums.whirlpool.net.au/forum-replies-archive.cfm/745837.html */ function myEvent(el, event, fn) { if (el.addEventListener) el.addEventListener(event, fn, false); else if (el.attachEvent) el.attachEvent(”on” + event, fn); } // /* http://jehiah.cz/archive/javascript-isdefined-function */ function isdefined(variable) { return (typeof(variable) == “undefined”)? false: true; } function mouseDownCallBack(id, mx, my) { all_controls[id].area.areas.onMouseDown(id, mx, my); } function Control_render() { if (this.html_element != 0) return; var html_parent = this.area.getEmbedInto(); var new_div = document.createElement(’div’); new_div.setAttribute(’id’, this.id); new_div.style.position = “absolute”; new_div.style.left = this.getX(); new_div.style.top = this.getY(); myEvent(new_div, “mousedown”, function() { mouseDownCallBack(eval(this.id), mx, my); }); /* function() { eval(”this.area.areas.global_variable_name”).onMouseDown( alert(”@#@”); alert(this.area.id); eval(”this.area.areas”).onMouseDown(eval(”this.id”), mx, my); }); */ if (this.type == “image”) { new_div.innerHTML = ‘<img src=”’ + this.image_url + ‘“/>’; new_div.style.zIndex = 1; } if (this.type == “drag-point”) { new_div.innerHTML = ‘‘; new_div.style.backgroundColor = “#ff0000”; new_div.style.width = 5; new_div.style.height = 10; new_div.style.zIndex = 20; } if (this.type == “segment”) { if (this.doc_segment.label != “SILENCE”) new_div.innerHTML = this.id; new_div.style.top = this.getY(); new_div.style.height = 10; var color = “#808080”; if (isdefined(this.area.areas.label_colors[this.doc_segment.label])) var color = this.area.areas.label_colors[this.doc_segment.label]; new_div.style.backgroundColor = color; new_div.style.zIndex = 10; } html_parent.appendChild(new_div); this.html_element = new_div; } /*/

window.onload = init; function init() {

 if (window.Event) {
    document.captureEvents(Event.MOUSEMOVE);
    document.captureEvents(Event.MOUSEUP);
 }
 document.onmousemove = getCursorXY;
 document.onmouseup = mouseUp;

} function getCursorXY(e) {

 mx = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
 my = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
 editors.onMove(mx, my);

} function mouseUp(e) {

 editors.mouseUp();

}

</script>