function PopUp( PopupDir, PopUpIMGID ) {
	this.Setup( PopupDir, PopUpIMGID );
}

PopUp.prototype.Setup = function( PopupDir, PopUpIMGID ) {
	this.PopupDir = PopupDir; //The dir of the popup images
	this.PopUpIMGID = PopUpIMGID; //Normal 'popup' picture
}

PopUp.prototype.changePicture = function( Picture, ID ) {

	$( '#' + this.PopUpIMGID ).attr( 'newSource', Picture ).attr( 'ImgID', ID ).fadeOut( 'slow', function() {
		var loader = new ImageLoader( $(this).attr( 'newSource' ) );
		loader.element = $(this);
		loader.loadEvent = function( url, image, element ) {
			if ( element ) {
				element.fadeIn( 'slow' );
			}
		}
		loader.load( document.getElementById( $(this).attr( 'ImgID' ) ) );
		
	} );	
}

function addListener(element, type, expression, bubbling) {
  bubbling = bubbling || false;
  if(window.addEventListener)	{ // Standard
    element.addEventListener(type, expression, bubbling);
    return true;
  } else if(window.attachEvent) { // IE
    element.attachEvent('on' + type, expression);
    return true;
  } else return false;
}

var ImageLoader = function(url){
  this.url = url;
  this.image = null;
  this.element = null;
  this.loadEvent = null;
};

ImageLoader.prototype = {
  load:function(image){
	this.image = image;
    var url = this.url;
    var image = this.image;
    var loadEvent = this.loadEvent;
    var element = this.element;
    addListener(this.image, 'load', function(e){
      if(loadEvent != null){
        loadEvent(url, image, element);
      }
    }, false);
    this.image.src = this.url;
  },
  getImage:function(){
    return this.image;
  }
};