1 /** The minplayer namespace. */
  2 var minplayer = minplayer || {};
  3 
  4 /**
  5  * @constructor
  6  * @class A class to easily handle images.
  7  * @param {object} context The jQuery context.
  8  * @param {object} options This components options.
  9  */
 10 minplayer.image = function(context, options) {
 11 
 12   // Determine if the image is loaded.
 13   this.loaded = false;
 14 
 15   // The image loader.
 16   this.loader = null;
 17 
 18   // The ratio of the image.
 19   this.ratio = 0;
 20 
 21   // The image element.
 22   this.img = null;
 23 
 24   // Derive from display
 25   minplayer.display.call(this, 'image', context, options);
 26 };
 27 
 28 /** Derive from minplayer.display. */
 29 minplayer.image.prototype = new minplayer.display();
 30 
 31 /** Reset the constructor. */
 32 minplayer.image.prototype.constructor = minplayer.image;
 33 
 34 /**
 35  * @see minplayer.plugin.construct
 36  */
 37 minplayer.image.prototype.construct = function() {
 38 
 39   // Call the media display constructor.
 40   minplayer.display.prototype.construct.call(this);
 41 
 42   // Set the plugin name within the options.
 43   this.options.pluginName = 'image';
 44 
 45   // Set the container to not show any overflow...
 46   this.display.css('overflow', 'hidden');
 47 
 48   /** The loader for the image. */
 49   this.loader = new Image();
 50 
 51   /** Register for when the image is loaded within the loader. */
 52   this.loader.onload = (function(image) {
 53     return function() {
 54       image.loaded = true;
 55       image.ratio = (image.loader.width / image.loader.height);
 56       image.resize();
 57       image.trigger('loaded');
 58     };
 59   })(this);
 60 
 61   // We are now ready.
 62   this.ready();
 63 };
 64 
 65 /**
 66  * Loads an image.
 67  *
 68  * @param {string} src The source of the image to load.
 69  */
 70 minplayer.image.prototype.load = function(src) {
 71 
 72   // First clear the previous image.
 73   this.clear(function() {
 74 
 75     // Create the new image, and append to the display.
 76     this.display.empty();
 77     this.img = jQuery(document.createElement('img')).attr({src: ''}).hide();
 78     this.display.append(this.img);
 79     this.loader.src = src;
 80     this.img.attr('src', src);
 81   });
 82 };
 83 
 84 /**
 85  * Clears an image.
 86  *
 87  * @param {function} callback Called when the image is done clearing.
 88  */
 89 minplayer.image.prototype.clear = function(callback) {
 90   this.loaded = false;
 91   if (this.img) {
 92     this.img.fadeOut((function(image) {
 93       return function() {
 94         image.img.attr('src', '');
 95         image.loader.src = '';
 96         jQuery(this).remove();
 97         callback.call(image);
 98       };
 99     })(this));
100   }
101   else {
102     callback.call(this);
103   }
104 };
105 
106 /**
107  * Resize the image provided a width and height or nothing.
108  *
109  * @param {integer} width (optional) The width of the container.
110  * @param {integer} height (optional) The height of the container.
111  */
112 minplayer.image.prototype.resize = function(width, height) {
113   width = width || this.display.parent().width();
114   height = height || this.display.parent().height();
115   if (width && height && this.loaded) {
116 
117     // Get the scaled rectangle.
118     var rect = this.getScaledRect(this.ratio, {
119       width: width,
120       height: height
121     });
122 
123     // Now set this image to the new size.
124     if (this.img) {
125       this.img.attr('src', this.loader.src).css({
126         marginLeft: rect.x,
127         marginTop: rect.y,
128         width: rect.width,
129         height: rect.height
130       });
131     }
132 
133     // Show the container.
134     this.img.fadeIn();
135   }
136 };
137 
138 /**
139  * @see minplayer.display#onResize
140  */
141 minplayer.image.prototype.onResize = function() {
142 
143   // Resize the image to fit.
144   this.resize();
145 };
146