      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