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.image = null;
 23 
 24   // Derive from display
 25   minplayer.display.call(this, 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   // Set the name of this plugin.
 40   this.options.name = 'image';
 41 
 42   // Say we need to resize.
 43   this.allowResize = true;
 44 
 45   // Call the media display constructor.
 46   minplayer.display.prototype.construct.call(this);
 47 
 48   // Set the container to not show any overflow...
 49   this.display.css('overflow', 'hidden');
 50 
 51   // Create the image loader.
 52   var _this = this;
 53   this.loader = new Image();
 54   this.loader.onload = function() {
 55     _this.loaded = true;
 56     _this.ratio = (_this.loader.width / _this.loader.height);
 57     _this.resize();
 58     _this.trigger('loaded');
 59   };
 60 };
 61 
 62 /**
 63  * Loads an image.
 64  *
 65  * @param {string} src The source of the image to load.
 66  */
 67 minplayer.image.prototype.load = function(src) {
 68 
 69   // First clear the previous image.
 70   this.clear(function() {
 71 
 72     // Create the new image, and append to the display.
 73     this.image = jQuery(document.createElement('img')).attr({src: ''}).hide();
 74     this.display.append(this.image);
 75     this.loader.src = src;
 76   });
 77 };
 78 
 79 /**
 80  * Clears an image.
 81  *
 82  * @param {function} callback Called when the image is done clearing.
 83  */
 84 minplayer.image.prototype.clear = function(callback) {
 85   this.loaded = false;
 86   if (this.image) {
 87     var _this = this;
 88     this.image.fadeOut(function() {
 89       _this.image.attr('src', '');
 90       _this.loader.src = '';
 91       $(this).remove();
 92       callback.call(_this);
 93     });
 94   }
 95   else {
 96     callback.call(this);
 97   }
 98 };
 99 
100 /**
101  * Resize the image provided a width and height or nothing.
102  *
103  * @param {integer} width (optional) The width of the container.
104  * @param {integer} height (optional) The height of the container.
105  */
106 minplayer.image.prototype.resize = function(width, height) {
107   width = width || this.display.width();
108   height = height || this.display.height();
109   if (width && height && this.loaded) {
110 
111     // Get the scaled rectangle.
112     var rect = this.getScaledRect(this.ratio, {
113       width: width,
114       height: height
115     });
116 
117     // Now set this image to the new size.
118     if (this.image) {
119       this.image.attr('src', this.loader.src).css({
120         marginLeft: rect.x,
121         marginTop: rect.y,
122         width: rect.width,
123         height: rect.height
124       });
125     }
126 
127     // Show the container.
128     this.image.fadeIn();
129   }
130 };
131 
132 /**
133  * @see minplayer.display#onResize
134  */
135 minplayer.image.prototype.onResize = function() {
136 
137   // Resize the image to fit.
138   this.resize();
139 };
140