1 /*
  2  *Copyright (c) 2009, TellurianRing.com
  3  *All rights reserved.
  4  *
  5  *Redistribution and use in source and binary forms, with or without modification,
  6  *are permitted provided that the following conditions are met:
  7  *
  8  *   Redistributions of source code must retain the above copyright notice, this
  9  *   list of conditions and the following disclaimer.
 10  *   Redistributions in binary form must reproduce the above copyright notice,
 11  *   this list of conditions and the following disclaimer in the documentation
 12  *   and/or other materials provided with the distribution.
 13  *   Neither the name of the Organization (TellurianRing.com) nor the names of
 14  *   its contributors may be used to endorse or promote products derived from
 15  *   this software without specific prior written permission.
 16  *
 17  *THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 18  *ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 19  *WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 20  *DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
 21  *ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 22  *(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 23  *LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
 24  *ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 25  *(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 26  *SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 27  */
 28 /**
 29  * @class Draws an image into the Scene. The name "Graphic" was chosen over "Image" due
 30  * to the native Javascript Image object. It had to be named something else, to
 31  * avoid browser confusion as to which Image object we're actually creating.
 32  * To create a Graphic, you need to supply it's location and url.
 33  * @example // Using a remote image.
 34  * Graphic({
 35  *    x: 10, y: 40,
 36  *    url: "http://www.tellurianring.com/images/logo-wordmark-version_100.png"
 37  * })
 38  * <div id="graphic_example_1"></div>
 39  * <script type="text/javascript">
 40  *    Stage({
 41  *       container_id: "graphic_example_1",
 42  *       width: 120, height: 100,
 43  *       update_time: 500,
 44  *       scene: Scene({
 45  *          content: [
 46  *             Graphic({
 47  *                x: 10, y: 40,
 48  *                url: "http://www.tellurianring.com/images/logo-wordmark-version_100.png"
 49  *             })
 50  *          ]
 51  *       })
 52  *    });
 53  * </script>
 54  * @example // Relative URL's work as well:
 55  * Graphic({
 56  *    x: 10, y: 10,
 57  *    url: "./images/ball.png"
 58  * })
 59  * <div id="graphic_example_2"></div>
 60  * <script type="text/javascript">
 61  *    Stage({
 62  *       container_id: "graphic_example_2",
 63  *       width: 100, height: 100,
 64  *       update_time: 500,
 65  *       scene: Scene({
 66  *          content: [
 67  *             Graphic({
 68  *                x: 10, y: 10,
 69  *                url: "./images/ball.png"
 70  *             })
 71  *          ]
 72  *       })
 73  *    });
 74  * </script>
 75  * @example // Scaling the image.
 76  * Graphic({
 77  *    x: 10, y: 50,
 78  *    scale_w: 100, scale_h: 26,
 79  *    url: "http://www.tellurianring.com/images/logo-wordmark-version.png"
 80  * })
 81  * <div id="graphic_example_3"></div>
 82  * <script type="text/javascript">
 83  *    Stage({
 84  *       container_id: "graphic_example_3",
 85  *       width: 120, height: 100,
 86  *       update_time: 500,
 87  *       scene: Scene({
 88  *          content: [
 89  *             Graphic({
 90  *                x: 10, y: 40,
 91  *                scale_w: 100, scale_h: 26,
 92  *                url: "http://www.tellurianring.com/images/logo-wordmark-version.png"
 93  *             })
 94  *          ]
 95  *       })
 96  *    });
 97  * </script>
 98  * @extends SceneContent
 99  * @param {Object} _details A JSON object with the following properties:
100  * <table cellpadding="0" cellspacing="1" border="0" class="constructor_details">
101  *    <tr><th>Property</th> <th>Required</th> <th>Default</th></tr>
102  *    <tr><td>scale_h</td>  <td>no</td>       <td></td></tr>
103  *    <tr><td>scale_w</td>  <td>no</td>       <td></td></tr>
104  *    <tr><td>url</td>      <td>yes</td>      <td></td></tr>
105  * </table>
106  */
107 function Graphic(_details) { // {{{
108    /** @constructs */
109    function _Graphic(_details) { // {{{
110       // Private Members {{{
111       var image = new Image();
112       var loaded = false;
113       var scale_h = _details.scale_h;
114       var scale_w = _details.scale_w;
115       var url = _details.url;
116       
117       // tries to preload the image at initialization.
118       image.loader = this;
119       image.onload = function() {
120          this.loader.doLoad();
121       }
122       // }}}
123       
124       // Public Members {{{
125       this.doLoad = function() {
126          loaded = true;
127          if(exists(scale_w, scale_h)) {
128             this.setSize({ w: scale_w, h: scale_h });
129          } else {
130             this.setSize({w: image.width, h: image.height});
131          }
132          if(exists(_details.onLoad)) {
133             _details.onLoad();
134          }
135       }
136       this.draw = function(_context) { //  {{{
137          var bounds = this.getBounds();
138          if(loaded) {
139             if(exists(scale_w, scale_h)) {
140                _context.drawImage(image, bounds.x, bounds.y, scale_w, scale_h);
141             } else {
142                _context.drawImage(image, bounds.x, bounds.y);
143             }
144          }
145       } // }}} draw
146       
147       // Overriden so the image is actually loaded during the load event from
148       // the scene.
149       this.load = function(_scene, _parent) {
150          this.loadBase(_scene, _parent);
151          image.src = url;
152       }
153       // }}} Public Members
154    }// }}} _Graphic
155    SceneContent(_details).extend(_Graphic);
156    var theGraphic = new _Graphic(_details);
157    return theGraphic;
158 } // }}} Graphic
159 // These properties are for jEdit - Programmer's Text Editor.
160 // Load this file in jEdit to see what they do.
161 // ::folding=explicit:mode=javascript:noTabs=true:collapseFolds=4::
162