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

PopUp.prototype.Setup = function( PopupDivID, PopUpIMGID, NormalIMGID, PopupLinkID ) {
	this.PopupDivID = PopupDivID; //The ID of the popup div
	this.PopUpIMGID = PopUpIMGID; //Normal 'popup' picture
	this.ActiveID = ''; //Active link
	this.NormalImageID = NormalIMGID; //Normal 'normal' picture
	this.PopupLinkID = PopupLinkID; //The ID of the base link
}

PopUp.prototype.openPopup = function( ActiveID, PopupDir, BigImageDir, Picture, Title ) {
	
	//Set the current active to inactive
	if ( this.ActiveID ) {
		this.ActiveID.className = 'Inactive';
	}
	
	this.PopupDir = PopupDir; //The dir of the popup image
	this.BigImageDir = BigImageDir; //The dir of the big image
	
	if ( ActiveID ) {
		//Set the new current active
		ActiveID.className = 'Active';
	}
	
	//Getting the object of the normal Image
	var NormalImageObject = document.getElementById( this.NormalImageID );
	
	//Setting popupDiv visable and when ready change the normal image
	$( '#' + this.PopupDivID ).fadeIn( 'slow', function(){ NormalImageObject.src = BigImageDir + Picture } );
	
	//Change the onlclick function of the base-image
	var LinkObject = document.getElementById( this.PopupLinkID );
	if ( LinkObject ) {
		LinkObject.onclick = function() {
			PopUp.openPopup( 
				ActiveID, 
				PopupDir, 
				BigImageDir, 
				Picture,
				Title
			 ); 
			return false;
		}
	}
	
	//Change the picture inside the popup
	this.changePicture( Picture );
		
	//Set the new CurrentID
	if ( ActiveID ) {
		this.ActiveID = ActiveID;
	}
	
	this.setTitle( Title );
}

PopUp.prototype.setTitle = function( Title ) {
	
	var ObjectProductFotoTitel = document.getElementById( 'ProductFotoTitel' );
	
	if( ObjectProductFotoTitel )
		ObjectProductFotoTitel.innerHTML = Title;
		
	var ObjectProductPopupTitel = document.getElementById( 'ProductPopupTitel' );
	
	if( ObjectProductPopupTitel )
		ObjectProductPopupTitel.innerHTML = Title;
	
} 

PopUp.prototype.closePopup = function() {
	//Setting popupDiv visable
	$( '#' + this.PopupDivID ).fadeOut( 'slow' );
}

PopUp.prototype.changePicture = function( Picture ) {

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

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;
  }
};