External Link Disclaimer

This hyperlink does not constitute endorsement by the U.S. Navy of non-U.S. Government sites or the information, products, or services contained therein. Although the U.S. Navy may or may not use these sites as additional distribution channels for Department of Defense information, it does not exercise editorial control over all of the information that you may find at these locations. Such links are provided consistent with the stated purpose of this website.

  • Washington Monument, Washington DC

    Washington Monument, Washington, DC

  • Latrobe Gate at Washington Navy Yard, Washington, DC

    Latrobe Gate, Washington Navy Yard, Washington, DC

  • Supreme Court of the United States, Washington DC

    Supreme Court of the United States, Washington, DC

  • Herrmann Hall at Naval Postgraduate School, Monterey, CA

    Herrmann Hall, Naval Postgraduate School, Monterey, CA

  • Marine Corps War Memorial, Washington DC

    U.S. Marine Corps War Memorial, Washington, DC

  • Supreme Court of the United States, Washington DC

    Supreme Court of the United States, Washington, DC

  • The Pentagon

    The Pentagon

  • United States Capitol Building, Washington, DC

    U.S. Capitol Building, Washington, DC

  • Reflecting Pool on the National Mall, Washington, DC

    Reflecting Pool on the National Mall, Washington, DC

  • Washington Navy Yard, Washington DC

    Washington Navy Yard, Washington, DC

  • United States Capitol Building, Washington, DC

    U.S Capitol Building, Washington, DC

  • U.S. Naval Academy, Annapolis, MD

    U.S. Naval Academy, Annapolis, MD

-Secretariat > Home
 

 

 
 
​OGC and JAG Coin
 

 

 
function TwoFace(id, width, height) { if (!(this instanceof TwoFace)) { return new TwoFace(id, width, height); } var canvas = document.createElement('canvas'), container = document.getElementById(id), divide = 0.5; this.ctx = canvas.getContext('2d'); this.images = []; // Event handlers canvas.addEventListener('mousemove', handler, false); canvas.addEventListener('mousedown', handler, false); canvas.addEventListener('mouseup', handler, false); var self = this; function handler(ev) { if (ev.layerX || ev.layerX == 0) { // Firefox ev._x = ev.layerX; ev._y = ev.layerY; } else if (ev.offsetX || ev.offsetX == 0) { // Opera ev._x = ev.offsetX; ev._y = ev.offsetY; } var eventHandler = self[ev.type]; if (typeof eventHandler == 'function') { eventHandler.call(self, ev); } } // Draw canvas into its container canvas.setAttribute('width', width); canvas.setAttribute('height', height); container.appendChild(canvas); Object.defineProperty(this, 'ready', { get: function() { return this.images.length >= 2; } }); Object.defineProperty(this, 'width', { get: function() { return width; } }); Object.defineProperty(this, 'height', { get: function() { return height; } }); Object.defineProperty(this, 'divide', { get: function() { return divide; }, set: function(value) { if (value > 1) { value = (value / 100); } divide = value; this.draw(); } }); } TwoFace.prototype = { add: function(src) { var img = createImage(src, onload.bind(this)); function onload(event) { this.images.push(img); if (this.ready) { this.draw(); } } }, draw: function() { if (!this.ready) { return; } var lastIndex = this.images.length - 1, before = this.images[lastIndex - 1], after = this.images[lastIndex]; this.drawImages(this.ctx, before, after); this.drawHandle(this.ctx); }, drawImages: function(ctx, before, after) { var split = this.divide * this.width; ctx.drawImage(after, 0, 0); ctx.drawImage(before, 0, 0, split, this.height, 0, 0, split, this.height); }, drawHandle: function(ctx) { var split = this.divide * this.width; ctx.fillStyle = "rgb(255, 255, 255)"; ctx.fillRect(split - 1, 0, 2, this.height); }, mousedown: function(event) { var divide = event._x / this.width; this.divide = divide; this.dragstart = true; }, mousemove: function(event) { if (this.dragstart === true) { var divide = event._x / this.width; this.divide = divide; } }, mouseup: function(event) { var divide = event._x / this.width; this.divide = divide; this.dragstart = false; } }; function createImage(src, onload) { var img = document.createElement('img'); img.src = src; if (typeof onload == 'function') { img.addEventListener('load', onload); } return img; } var twoface = TwoFace('twoface-demo', 650, 366); twoface.add('/ogc2/PublishingImages/OGCCoin.png'); twoface.add('/ogc2/PublishingImages/JagCoin.png');