//==================================================
// ImageModel object
//==================================================
function ImageModel( id, src, overSrc, outSrc, downSrc, upSrc, selectedSrc ) {
    // The id of the image obj
    this.id = id;

    // The source of the image
    this.src = src;
    if ( this.src && document.images ) {
        this.srcImage = new Image();
    }
    
    // The mouse-over source
    this.overSrc = overSrc;
    if ( this.overSrc && document.images ) {
        this.overSrcImage = new Image();
    }
    
    // The mouse-out source
    this.outSrc = outSrc;
    if ( this.outSrc && document.images ) {
        this.outSrcImage = new Image();
    }
    
    // The on or mouse-selected source
    this.selectedSrc = selectedSrc;
    if ( this.selectedSrc && document.images ) {
        this.selectedSrcImage = new Image();
    }
    
    //The mouse-down source
    this.downScr = downSrc;
    if (  this.downSrc && document.images ) {
        this.downSrcImage = new Image();
    }
    
    // The mouse-up source
    this.upSrc= upSrc;
    if ( this.upSrc && document.images ) {
        this.upSrcImage = new Image();
    }
    
    this.loaded = false;
    
    this.load = function( ) {
        if ( ! document.images ) { 
            return; 
       }
       if (!this.loaded) {
            if ( this.srcImage )
                this.srcImage.src = this.src;
            if ( this.overSrcImage )
                this.overSrcImage.src = this.overSrc;
            if ( this.outSrcImage )
                this.outSrcImage.src = this.outSrc;
            if ( this.selectedSrcImage )
                this.selectedSrcImage.src = this.selectedSrc;
            if ( this.downSrcImage )
                this.downSrcImage.src = this.downScr;
            if ( this.upSrcImage )
                this.upSrcImage.src = this.upSrc;
            this.loaded = true;
       }
    }
    
    this.isLoaded = function( ) {
    }
}
//==================================================
// ImageController object
//==================================================
function ImageController( imageModel, preload ) {
    // The image model that this controller uses.
    this.imageModel = imageModel;
    
    // Locks this object and prevents any further image changes
    this.locked = false;
    
    // Pre-Loads the images
    if ( preload )
        this.imageModel.load( );
        
    // Returns the model of this controller.
    this.getModel = function( ) {
        return imageModel;
    }
    
    // Returns the controllers id
    this.getID = function( ) {
        return imageModel.id;
    }
    
    this.setLocked = function( locked ) {
        this.locked = locked;
    }
    
    // Sets the source of the img based upon the type of event.
    this.showImage = function( eventType, img ) {
        if ( this.locked ) {
            return;
        }
        if ( ! img ) {
            return;
        }
        this.imageModel.load( );
        switch( eventType ) {
            case "mouseout":
                if ( this.imageModel.outSrc )
                    img.src = this.imageModel.outSrc;
            break;
            case "mouseover":
                if ( this.imageModel.overSrc )
                    img.src = this.imageModel.overSrc;
            break;
            case "mousedown":
                if ( this.imageModel.downScr )
                    img.src = this.imageModel.downScr;
            break;
            case "mouseup":
                if ( this.imageModel.upSrc )
                    img.src = this.imageModel.upSrc;
            break;
            case "selected":
                if ( this.imageModel.selectedSrc )
                    img.src = this.imageModel.selectedSrc;
            break;
            default:
                if ( this.imageModel.src )
                    img.src = this.imageModel.src;
        }
    }
}
//==================================================
// ImageChangeDelegate object
//==================================================
function ImageChangeDelegate( ) {
    this.selected;
    
    // Holds all the Image Controllers that this delegate handles.
    this.imageControllers = new Array( );
    
    // Add a new Image Controller to this delegate.
    this.addImageController = function( imageController ) {
        this.imageControllers.push( imageController );
    }
    
    // Notifies the correct Image Controller of the event
    this.notify = function( event ) {
        var element = whichElement( event );
        var imageController = this.getImageController( element.id );
        if ( imageController ) {
            imageController.showImage( event.type, element );
        }
    }
    
    // Notifies the correct Image Controller using the obj and event type.
    this.notifyController = function( obj, eventType ) {
        this.getImageController( obj.id ).showImage( eventType, obj );
    }
    
    this.lockImageController = function( id ) {
        var imageController = this.getImageController( id );
        if ( imageController ) {
            imageController.setLocked( true );
        }
    }
    
    // Returns a controller using the id
    this.getImageController = function( id ) {
        for( i = 0; i < this.imageControllers.length; i++ ) {
            //alert( this.imageControllers[ i ].getID( ) + ":" +  id )
            if ( this.imageControllers[ i ].getID( ) == id ) {
                return this.imageControllers[ i ];
            }
        }
        return null;
    }
    
    // Returns the event object
    this.whichElement = function( event ) {
        var e
        if ( ! event ) {
            event = window.event
        }
        if ( event.target ) {
            e = event.target
        }
        else if ( event.srcElement) {
            e = event.srcElement
        }
        return e;
    } 

}