// JScript source code
var Object = function(){
    var cfg = new YAHOO.util.Config(this);
        element;
    
    initDefaultConfig: function() {

        this.cfg.addProperty(
            "color",
            {
                value: "#000000",
                handler: setColor
            }
        );
        
        this.cfg.addProperty(
            "width", 
            {
                value: null,
                handler: setWidth
            }
        );
        
        this.cfg.fireQueue();        
    }
    
    var setColor = function(type, args, obj){
        var color = args[0];
        YAHOO.util.Dom.setStyle(element, "color", color);        
    }
    
    var setWidth = function(type, args, obj){
        var width = args[0] + "px";
        YAHOO.util.Dom.setStyle(element, "width", width);        
    }
    
    this.init = function(elementId){
        element = YAHOO.util.Dom.get(elementId);
        initDefaultConfig();
    } 
};

IncrediLetter = function(){};
IncrediLetter.prototype = {

    element:   null,
    textEl:    null,
    underlay:  null,
    overlay:   null,
    cfg:       null,
   
    initDefaultConfig: function() {

        this.cfg.addProperty(
            "bgcolor",
            {
                value: "#FFFFFF",
                handler: this.setBGColor
            }
        );
        
        this.cfg.addProperty(
            "bgimage", 
            {
                value: null,
                handler: this.setOverlayURL
            }
        );
        
        this.cfg.addProperty(
            "fontcolor", 
            {
                value: "#000000",
                handler: this.setFontColor
            }
        );

        this.cfg.addProperty(
            "fontsize", 
            {
                value: "12px",
                handler: this.setFontSize
            }
        );
        
        this.cfg.addProperty(
            "fontfamily", 
            {
                value: "arial",
                handler: this.setFontFamily
            }
        );

        this.cfg.addProperty(
            "imagesource", 
            {
                value: null,
                handler: this.setUnderlaySource
            }
        );

        this.cfg.addProperty(
            "imagedimensions",
            {
                value: null,
                handler: this.setUnderlayDimensions
            }
        );

        this.cfg.addProperty(
            "imageInitDimensions",
            {
                value: null,
                handler: this.setUnderlayInitDimensions
            }
        );
        
        this.cfg.addProperty(
            "imageresize", 
            {
                value: 100,
                handler: this.resizeUnderlay
            }
        );

        this.cfg.addProperty(
            "imageposition", 
            {
                value: [0, 0],
                handler: this.setUnderlayPosition
            }
        );

        this.cfg.addProperty(
            "imageInitPosition", 
            {
                value: null,
                handler: this.setUnderlayInitPosition
            }
        );
        
        this.cfg.addProperty(
            "imagerotation", 
            {
                value: 0,
                handler: this.rotateUnderlay
            }
        );
        
        this.cfg.addProperty(
            "move", 
            {
                value: null,
                handler: this.moveUnderlay
            }
        );
        
        this.cfg.fireQueue();
        
    },
    
    init: function(id, swfSource){
        this.element = YAHOO.util.Dom.get(id);  
        this.textEl = this.element.getElementsByTagName("p")[0];
        
        this.overlay = new Overlay(); 
        this.overlay.init();  
        this.element.appendChild(this.overlay.getElement());

        this.underlay = new Underlay(); 
        this.underlay.init(swfSource, "underlayWrapper", "underlay");  
        this.element.appendChild(this.underlay.getElement());
        this.underlay.appendElement();
        
        this.cfg = new YAHOO.util.Config(this);
        this.initDefaultConfig();
    },
    
    setProperties: function(properties, setAsInitCfg){
        this.cfg.applyConfig(properties, setAsInitCfg);
        this.cfg.fireQueue();
    },
    
    getProperties: function(){
        return {
				    imagesource: this.cfg.getProperty("imagesource"),
				    imagedimensions: this.cfg.getProperty("imagedimensions"),
				    imageInitDimensions: this.cfg.getProperty("imageInitDimensions"),
				    imageresize: this.cfg.getProperty("imageresize"),
				    imagerotation: this.cfg.getProperty("imagerotation"),
				    imageposition: this.cfg.getProperty("imageposition")
				}
    },
    
    setFontFamily: function(type, args, obj){
        var family = args[0];
        YAHOO.util.Dom.setStyle(this.textEl, "font-family", family);        
    },
    
    setFontSize: function(type, args, obj){
        var size = args[0];
        YAHOO.util.Dom.setStyle(this.textEl, "font-size", size);
    },
    
    setFontColor: function(type, args, obj){
        var color = args[0];
        YAHOO.util.Dom.setStyle(this.textEl, "color", color);        
    },
    
    setBGColor: function(type, args, obj){
        var color = args[0];
        YAHOO.util.Dom.setStyle(this.element, "background-color", color);        
    },
    
    setOverlayURL: function(type, args, obj){
        var url = args[0];
        this.overlay.setURL(url)
    },    
    
    setOverlayCenterCoords: function(type, args, obj){
        var coords = args[0];
        this.overlay.setCenter(coords)
    },
    
    setUnderlaySource: function(type, args, obj){
        var imageSource = args[0];        
        if (imageSource){
            this.underlay.setImageSource(imageSource);
        }
    },
    
    resizeUnderlay: function(type, args, obj){
        var percentage = args[0];
        this.underlay.resizeImage(percentage);
    },
    
    rotateUnderlay: function(type, args, obj){
        var degree = args[0];
		this.underlay.rotateImage(degree);        
    },
    
    setUnderlayDimensions: function(type, args, obj){
        var dimensions = args[0];
        if (dimensions){
            this.underlay.setDimensions(dimensions);
        }
    },
    
    setUnderlayInitDimensions: function(type, args, obj){
        var dimensions = args[0];
        if (dimensions){
            this.underlay.setInitDimensions(dimensions);
        }
    },
    
    setUnderlayPosition: function(type, args, obj){
        var position = args[0];
        this.underlay.setPosition(position);    
    },
    
    setUnderlayInitPosition: function(type, args, obj){
        var position = args[0];
        if (position){
            this.underlay.setInitPosition(position);    
        }
    },
    
    moveUnderlay: function(type, args, obj){
        var cfg = args[0];
        if (cfg){
            this.underlay.move(cfg); 
        }  
    }
}

Config is a utility used within an Object to allow the implementer to maintain a list of local configuration properties and listen for changes to those properties dynamically using CustomEvent. The initial values are also maintained so that the configuration can be reset at any given point to its initial state.

Dependencies:
* yahoo.js
* event.js

A guide to YUI Config utility

JavaScript