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