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