//<span id="select_example" class="select_box"><span class="select_box_text">Foo Bar Zoo Thing Fong</span><span class="select_box_button"></span></span>

var ImageLoader = Class.create();

ImageLoader.prototype = {

   initialize: function(id) {
      var options = Object.extend({
         activate:            false,
         imgClass:            '',
         baseClass:           'imageLoader',
         loadingClass:        'loadingImage',
         loadingText:         'Loading...',
         loadingTextClass:    'loadingText',
         defaultClass:        'defaultImage',
         activeImage:         null,
         defaultImage:        null,
         zoomImage:           null,
         title:               '',
         linkClass:           '',
         loadingImage:        null,
         onClick:             function(){},
         reloadParam:         'reload'
      }, arguments[1] || {});
      this.options = options;
	  
	  if(this.options.zoomImage)
		this.zoomImage = this.options.zoomImage;
		
      if($(id)) {
         this.container = $(id);
      
      } else {
         document.write('<div id="' + id + '" ></div>');
         
         this.container = document.createElement('div');
         
         $(id).parentNode.insertBefore(this.container, $(id));
         
         Element.remove(id);
         
         this.container.id = id;
      }
      
      this.container.className = (this.options.baseClass || '') + ' ' + (this.options.defaultClass || '');
      
      if(this.options.activate && this.options.activeImage)
         this.loadImage(this.options.activeImage);
      else if(this.options.defaultImage)
         this.loadImage(this.options.defaultImage);
      
      this.container.ImageLoader = this;
      
      if(this.options.activeImage) {
         var preloadImage = new Image();
         
         if(this.options.activate)
            preloadImage.src = this.options.defaultImage;
         else
            preloadImage.src = this.options.activeImage;
      }
      
      Event.observe(this.container, 'click', function() {
         if(!this.options.onClick.call(this) === false)
            this.activateImage();
      }.bind(this));
      
   },
   
   refresh: function() {
      var reloadParam = this.options.reloadParam + '=' + Math.random();
      var src = this.imgCurrent.src + ((this.imgCurrent.src.indexOf('?') > -1) ? '?'+reloadParam : '&'+reloadParam);
      this.loadImage(src);
   },
   
   activateImage: function() {
      if(this.options.activeImage)
         this.loadImage(this.options.activeImage, true);
   },
   
   deactivateImage: function() {
      if(this.options.activeImage)
         this.loadImage(this.options.defaultImage, true);
   },
   
   loadImage: function(src, skipLoading) {
      if(!src)
         src = this.imgLoadSrc; //If we have an imgLoadSource that means that we have a image waiting in line to be loaded.
      else {
         Element.removeClassName(this.container, this.options.defaultClass);
      
         if(!this.loading && !skipLoading)
            this.setLoading(true);
      }
      
      this.imgLoadSrc = src;
      
      if(document.imageLoaderLoading) {
         //Add the image to the load order
         if(!document.imagesToLoad) document.imagesToLoad = [];
         
         document.imagesToLoad.push(this);
         
         return false;
      }
      
      document.imageLoaderLoading = true;
	  
	  if(this.zoomImage){
		this.imgToLoad = document.createElement('img');
		var atag = document.createElement('a');
      if(this.options.title != '')
         atag.title = this.options.title;
      if(this.options.linkClass != '')
         atag.className = this.options.linkClass;
		atag.href = this.zoomImage;
      atag.target = '_blank';
		atag.appendChild(this.imgToLoad)
		this.container.appendChild(atag);
      } else {
		this.imgToLoad = document.createElement('img');
		this.container.appendChild(this.imgToLoad);
	  }
      
      
      if(!skipLoading) {
         this.imgToLoad.style.visibility = 'hidden';
         this.imgToLoad.style.position = 'absolute';
      }
      
      var loadHandler = function() {
         if (!this.imgToLoad) return;

         this.imgToLoad.style.position = '';
         this.imgToLoad.style.visibility = '';
         
         if(this.currentImage && this.currentImage.parentNode)
            this.removeImage();
            
         this.currentImage = this.imgToLoad;
         
         if(!skipLoading)
            this.setLoading(false);
         
         this.imgCurrent = this.imgToLoad;
         
         this.imgToLoad = null;
         this.imgLoadSrc = null;
         
         document.imageLoaderLoading = false;
         
         this.loadFromOrder();
      }.bind(this);

      this.imgToLoad.onload = loadHandler;
      
      this.imgToLoad.src = this.imgLoadSrc;

      // IE6/7 seems to sometimes miss the load event?!
      // Take the lazy approach, and just check whether it looks loaded
      // in a few ms.
      setTimeout(function() {
         if (this.imgToLoad && this.imgToLoad.width > 0)
            loadHandler();
      }.bind(this), 200);
      
   },
   
   removeImage: function() {
      if(this.currentImage)
         Element.remove(this.currentImage);
   },
   
   setLoading: function(status) {
   
      if(status) {
            
         this.loading = true;
         
         this.removeImage();
         
         Element.addClassName(this.container, this.options.loadingClass);
         
         if(this.options.loadingText && this.options.loadingText != '') {
            this.loadingText = document.createElement('div');
            this.loadingText.className = this.options.loadingTextClass;
            this.loadingText.appendChild(document.createTextNode(this.options.loadingText));
            
            this.container.appendChild(this.loadingText);
         }
         
         if(this.options.loadingImage) {
            this.loadingImage = document.createElement('img');
            this.loadingImage.src = this.options.loadingImage;
            this.container.appendChild(this.loadingImage);
         }
         
      } else {
      
         Element.removeClassName(this.container, this.options.loadingClass);
         
         if(this.loadingImage) {
            Element.remove(this.loadingImage);
            this.loadingImage = null;
         }
         
         if(this.loadingText) {
            Element.remove(this.loadingText);
            this.loadingText = null;
         }
         
         this.loading = false;
         
      }
   },
   
   loadFromOrder: function() {
      if(document.imagesToLoad) {
         for(var i=0; i < document.imagesToLoad.length; i++) {
            var x= document.imagesToLoad[i];
            if(x) {
               document.imagesToLoad[i] = null;
               x.loadImage();
               return;
            }
         }
      }
   }

};