/* DotCom Interactive Core Library of functions

version:        1.6
last modified:  21/06/2009 20:05:35
latest url:     http://fragged.org/js/dci_core.js
dependencies: 	mootools 1.2.1 (core+more)

copyright (c) 2008, 2009 by Dimitar Christoff <dimitar@dci.uk.net>

use and modify as you see fit, credit me if you wish

changelog:

1.6
- rewrote the element.tooltip prototype, it is now much shorter and _should_ be less dependent on
  css irregularities (weird line spacings etc).

1.5
- removed site specific domready functions and placed the in a separate file.
- cleaned up largerBox, created its own namespace and rewrote it.
- added options for largerBox, including: colours, styles, modal, shadow and tooltip use, selectors

1.4
- Added centerBox function which returns on-screen coordinates for center print of a box.
- Altered slidingTips and improved interface
- added a clipboard copy function for flash < ver 10.

*/



// general variables we set to do with tooltips and images
var delayTimer;

// compatibility with mootools 1.11

Window.implement({
	$E: function(s) {
		return this.document.getElement(s);
	}
});

// element extending functions
Element.implement({
    getText: function(){
		var tag = this.getTag();
		if (['style', 'script'].contains(tag)){
			if (window.ie){
				if (tag == 'style') return this.styleSheet.cssText;
				else if (tag ==  'script') return this.getProperty('text');
			} else {
				return this.innerHTML;
			}
		}
		return ($pick(this.innerText, this.textContent));
	},
    showProgress: function(options) {
        // javascript progress indicator. needs a background image on the prototyped element
        options = $merge({
            count: 0,
            total: 10,
            message: "",
            className: "progress",
            backgroundPosition: 200, // start pos
            tween: true // animate or static
        }, options);

        // calculate % of progress
        var percent = options.total / 100, donePercent = (options.count / percent).round(), BGoffset = options.backgroundPosition - (donePercent*2).round();
        donePercent = (isNaN(donePercent)) ? "0" : donePercent;
        // set inline message
        this.set({
            styles: {
                "background-position": "-" + options.backgroundPosition + "px"
            },
            html: "&nbsp; " + options.count + " of " + options.total + " " + options.message + " ("+donePercent+"%)",
            "class": options.className
        });

        if (options.tween)
            new Fx.Tween(this, {
                duration: 500,
                transition: Fx.Transitions.Cubic.easeIn
            }).start("background-position", "-" + BGoffset);
        else
            this.setStyle("background-position", "-" + BGoffset + "px");

        this.store("percent", donePercent);
        return this;
    },
    smartDispose: function() {
        // dispose of an element and its dropShadow (if there is one)
        var rel = this.retrieve("data-related");
	    if ($(rel)) {
	        $(rel).destroy();
	    }
		this.destroy();
	}, // end smartDispose
	dropShadow: function(options) {
	    // creates a shadow effect to a rectangular element

	    // define defaults
        var options = $merge({
            id: "dropShadow" + $random(100,1000),
            x: 3, // offset from parent
            y: 3,
            border: "1px solid #000",
            background: "#555",
            opacity: .5,
            zIndex: this.getStyle("z-index").toInt() - 1 // behind parent
        }, options);

        // only apply shadow on absolutely positioned elements
        if (this.getStyle("position") != "absolute")
            return this;

        var c = this.getCoordinates();

        var f = new Element("div", {
            id: options.id,
            styles: {
                position: "absolute",
                left: c.left + options.x,
                top: c.top + options.y,
                width: c.width,
                height: c.height,
                background: options.background,
                zIndex: options.zIndex
            },
            opacity: 0
        }).injectBefore(this).fade(0, options.opacity);

        // store the shadow id into the element
        this.store("data-related", options.id);

        return this;
    }, // end dropShadow
	Bubble: function(message,options) {
        // open up a  bubble popup for text

        var bubbleOptions = $merge({
            y: 64,					// offset (substracted from element top)
            x: 10, 					// offset to element left
            fadeFrom: 0,			// fade start value
            fadeUntil: .95,			// fade end
            shadowFadeFrom: 0,
            shadowFadeUntil: .5,
            directionX: 2,			// shadow offset X from bubble
            directionY: 2,			// shadow offset Y
            delayShort: 1000,
            delayLong: 5000
        }, options)

        $clear(delayTimer);
        if ($("myBubble")) {
            $("myBubble").destroy();
            $("myBubbles").destroy();
        }

        var coords  = this.getPosition();
        var bubbles = new Element("div", {
            "styles": {
                "position": "absolute",
                "top": coords.y-bubbleOptions.y+bubbleOptions.directionY,
                "left": coords.x+bubbleOptions.x+bubbleOptions.directionX
            },
            "id": "myBubbles",
            "opacity": bubbleOptions.shadowFadeFrom,
            "z-index": 100000001

        }).inject(document.body).fade(bubbleOptions.shadowFadeFrom,bubbleOptions.shadowFadeUntil);
        var bubble = new Element("div", {
            "styles": {
                "position": "absolute",
                "top": coords.y-bubbleOptions.y,
                "left": coords.x+bubbleOptions.x
            },
            "id": "myBubble",
            "opacity": bubbleOptions.fadeFrom,
            "html": message,
            "z-index": 100000002,
            "events": {
                "mouseenter": function() {
                    $clear(delayTimer);
                    this.setOpacity(1);
                },
                "mouseleave": function() {
                    this.setOpacity(bubbleOptions.fadeUntil);
                    delayTimer = (function() {
                        if (bubbleOptions.fadeFrom == bubbleOptions.fadeUntil && $("myBubble")) {
                            $("myBubble").destroy();
                            $("myBubbles").destroy();
                        }
                        else {
                            if ($("myBubble")) {
                                $("myBubble").fade(bubbleOptions.fadeFrom);
                                $("myBubbles").fade(bubbleOptions.shadowFadeFrom);
                                if ($("closeBubble"))
                                    $("closeBubble").destroy();
                                (function() {
                                    $("myBubble").destroy();
                                    $("myBubbles").destroy();
                                }).delay(500);
                            }
                        }
                    }).delay(bubbleOptions.delayShort);
                }
            }
        }).inject(document.body).fade(bubbleOptions.fadeUntil);


        new Element("img", {
            "src": imagePath + "close.gif",
            "id": "closeBubble",
            "events": {
                "mouseenter": function() {
                    this.set("opacity", 1);
                },
                "mouseleave": function() {
                    this.set("opacity", .7);
                },
                "click": function() {
                    $clear(delayTimer);
                    if (bubbleOptions.fadeFrom == bubbleOptions.fadeUntil && $("myBubble")) {
                        $("myBubble").destroy();
                        $("myBubbles").destroy();
                    }
                    else {
                        $("myBubble").fade(bubbleOptions.fadeFrom).removeEvents();
                        $("myBubbles").fade(bubbleOptions.shadowFadeFrom);
                        if ($("closeBubble"))
                           $("closeBubble").destroy();
                        (function() {
                            $("myBubble").destroy();
                            $("myBubbles").destroy();
                        }).delay(500);
                    }
                } // click
            },
            "styles": {
                "position": "absolute",
                "top": 2,
                "left": 148,
                "opacity": .7
            },
            "class": "cur"
        }).injectInside(bubble);

        delayTimer = (function() {
            if (bubbleOptions.fadeFrom == bubbleOptions.fadeUntil && $("myBubble")) {
                $("myBubble").destroy();
                $("myBubbles").destroy();
            }
            else {
                if ($("myBubble")) {
                    $("myBubble").fade(bubbleOptions.fadeFrom).removeEvents();
                    $("myBubbles").fade(bubbleOptions.shadowFadeFrom);
                    if ($("closeBubble"))
                        $("closeBubble").destroy();
                    (function() {
                        $("myBubble").destroy();
                        $("myBubbles").destroy();
                    }).delay(500);
                }
            }
        }).delay(bubbleOptions.delayLong);

        return this;
    },
    tooltip: function(message, options) {
    	// a quick 'facebook' style tooltip
    	// function version 2.2, 21/06/2009 20:04:16

    	if (!$type(message))
    	    return false;

        if ($type(this.tipbody)== "element")
            this.tipbody.destroy();

        var options = $merge({
            eventStart: "mouseenter",
            eventEnd: "mouseleave",
            topOffset: 20,
            opacity: 1
        }, options);

        var coords = this.getCoordinates();

        this.tipbody = new Element("div", {
            styles: {
                background: "transparent url(/images/point_down.gif) no-repeat center bottom",
                float: "left",
                position: "absolute",
                left: 0,
                top: -100,
                opacity: options.opacity,
                height: 20
            }
        }).adopt(new Element("div", {
            styles: {
                background: "#4c4c4c",
                color: "#ffffe5",
                padding: 0,
                "padding-top": 2,
                "line-height": 10,
                margin: 0,
                "padding-left": 9,
                "padding-right": 9,
                display: "block",
                "margin-left": "auto",
                "margin-right": "auto",
                overflow: "hidden",
                "font-size": "10px",
                "font-family": "verdana",
                float: "left",
                height: 13
            },
            html: message.replace(/ /g, "&nbsp;")
        })).inject(document.body);

        this.addEvent(options.eventEnd, function() {
            if ($type(this.tipbody) == "element") {
                this.tipbody.destroy();
                this.tipbody = null;
                this.removeEvent(options.eventEnd);
            }
        }.bind(this));

        // var tipWidth = tipbody.getCoordinates();
        var t = this.tipbody.getSize();

	    this.tipbody.setStyles({
	        left: coords.left + (coords.width / 2).round() - (t.x / 2).round(),
	        top: coords.top - options.topOffset,
	        width: t.x
        });

        return this;
    },
    slidingTip: function(what, options) {
        // apple style tooltip
        var _this = this, coords = _this.getCoordinates(), options = $merge({
            eventEnd: "mouseleave",
            eventEndTrigger: _this,     // parent element or self
            topOffset: 90,             // offset when in full view
            topStartOffset: 100,        // offset for animation start
            opacity: .8,                // target opacity in full view
            className: "tooltip",       // linked to css
            morphOptions: {
                duration: 300,
                transition: Fx.Transitions.Sine.easeOut
            },
            delay: 0,                    // can dispose on a timer, in seconds
            id: "tid" + $random(100, 1000)
        }, options);

        // we only need one tip instance per parent element.
        if ($type(this.tip) != "element") {
            this.tip = new Element("div", {
                "class": options.className
                // id: options.id,
            });
        }

        // if it's an existing one, with an implicit id, pick it up
        if ($(options.id))
            this.tip = $(options.id);

        // set initial options and html
        this.tip.set({
            opacity: 0,
            html: "<div style='padding:20px'>" + what + "</div>",
            styles: {
                left: coords.left + coords.width / 2
            }
        }).inject(document.body).removeEvents();

        // show it. cancel any previous animation instances for tip
        if ($type(this.morph) == "object")
           this.morph.cancel();
        else
            this.morph = new Fx.Morph(this.tip, options.morphOptions);

        // show it. really.
        this.morph.start({
            opacity: options.opacity,
            top: [coords.top - _this.tip.getSize().y - options.topStartOffset, coords.top - options.topOffset]
        }).chain(function() {
            // once done, decide how to exit
            if (options.delay == 0) {
                // based on an event.
                options.eventEndTrigger.addEvent(options.eventEnd, function() {
                    _this.morph.cancel();
                    _this.slidingTipaway();
                });
            }
            else {
                // based on a timed delay
                (function() {
                    _this.slidingTipaway();
                }).delay(options.delay);
            }
        });

        // define the tooltip close animation morph object
        var closeAnimation = {
            opacity: 0,
            top: coords.top - _this.tip.getSize().y - options.topStartOffset
        }

        // ... and save it within the parent element
        this.store("closeAnimation", closeAnimation);

        return this;
    },
    slidingTipaway: function() {
        // animate an slidingTip, opposite on in method.
        if (this.tip) {
            this.morph.start(this.retrieve("closeAnimation"));
        }

        return this;
    },
	polka: function() {
		// draw polka dots over an element to make it 'unavailable'.
		var _this = this;
		var coords = this.getCoordinates();
		new Element("div", {
			"class": "polka",
			styles: {
				width: coords.width-2,
				height: coords.height-2,
				position: "absolute",
				left: coords.left+1,
				top: coords.top+1,
				"background-image": "url("+imagePath+"polka.gif)",
				"z-index": 1000,
				opacity: .7
			},
			events: {
				click: function() {
					_this.getElement(".polka").destroy();
					_this.destroy();
					// reposition the rest.

					$$(".polka").each(function(el) {
						var c = el.getParent().getPosition();
						el.setStyles({
							top: c.y+1,
							left: c.x+1
						});
					})
				}
			}
		}).inject(this);
		return this;
	}
}); // end element.implement


var toggleModal = function(backgroundColour, options) {
    // modal view for the whole screen
    // ver 2.02 17/10/2008 03:42:06
    // returns the $("modal") div as element.
    if ($("modal")) {
        $("modal").destroy();
        return false;
    }

    var options = $merge({
        zIndex: 10000000,
        opacity: .8,
        events: $empty()
    }, options);

    if (!$type(backgroundColour) && !$("modal"))
        return false;

    return new Element("div", {
        id: "modal",
        styles: {
            position: "absolute",
            top: 0,
            left: 0,
            width: window.getScrollWidth(),
            height: window.getScrollHeight(),
            background: backgroundColour,
            "z-index": options.zIndex
        },
        opacity: options.opacity,
        events: options.events
    }).inject(document.body);
} // end toggleModal

var centerBox = function(width, height) {
    // returns a coordinates JSON for positioning of a box in the centre of the browser
    var winSize = window.getSize();
    var winScroll = window.getScroll();
    var windowHeight = window.getScrollHeight()-1;

    var coords = {
        y: winScroll.y + (winSize.y / 2) - (height / 2),
        x: winSize.x / 2 - width / 2,
        width: width,
        height: height
    }

    if (coords.y + height + 20 > windowHeight)
        coords.y = windowHeight - 20 - height;

    if (coords.y <= 0) {
        coords.y = 20;
    }

    return coords;
}


var largerBox = {
    version: function() {
        return 2.1; // 17/05/2009 14:18:40
    },
    init: function(options) {
        // by default it works on image links with the class 'fullImage'

        // set other defaults.
        var options = $merge({
            selector: "a.fullImage",        // can pass on any A object or array of objects, need to contain links to images.
            styleBorder: "1px solid #000",  // border style around image
            useShadow: false,               // apply a css shadow after image is drawn
            useModal: true,                 // use a modal window (toggleModal function) or not
            useTooltip: true,               // uses element.tooltip prototype (needs it defined, set to false if not avail)
            colourModal: "#555",            // default colour for modal,
            imageBackground: "#fff",        // useful to have one for png or gif with transparency
            zIndex: 1000000000              // default z-index for the enlarged images
        }, options);

        // attach to selector
        $$(options.selector).addEvents({
            click: function(e) {
                this.fireEvent("mouseleave"); // get rid of tooltips, if any.

                // only one instance and do not go over other modals...
                if ($("largerBox") || $("modal"))
                    return false;

                var _this = this, myevents;
                var e = new Event(e).stop(); // stop default. can use e.preventDefault also but this has
                                             // issues in IE6
                if (options.useModal)
                    toggleModal(options.colourModal);

                var coords = this.getFirst().getCoordinates();

                // load the image
                new Asset.image(this.get("href"), {
                    onload: function() {
                        // insert it. use the centerBox function to get coordinates
                        var image = centerBox(this.width, this.height); // height and width are available after onload ends

                        this.set({
                            id: "largerBox",
                            styles: $merge({
                                zIndex: options.zIndex,
                                position: "absolute",
                                border: options.styleBorder,
                                background: options.imageBackground
                            }, coords),
                            "class": "cur",
                            events: {
                                click: function() {
                                    $clear(myevents);
                                    this.fireEvent("mouseleave");

                                    if (options.useShadow) {
                                        var rel = this.get("data-related");
                            	        if ($(rel)) {
                            	            $(rel).destroy();
                            	        }
                            	    }

                                    // close animation
                                    var myEffect = new Fx.Morph($("largerBox"), {
                                        transition: Fx.Transitions.Sine.easeOut,
                                        duration: 150
                                    }).start($merge({
                                        "border-width": 0,
                                        opacity: .4
                                    }, coords));

                                    this.fade(0);

                                    var _this = this;
                                    (function() {
                                        _this.smartdestroy(); // also gets rid of a shadow if any.
                                        if (options.useModal && $("modal"))
                                            toggleModal();
                                    }).delay(500);
                                }
                            }
                        }).inject(document.body);


                        $clear(initCheck); // cancels out any older animations

                        var myEffect = new Fx.Morph($("largerBox"), {
                            transition: Fx.Transitions.Sine.easeOut,
                            duration: 300
                        }).start({
                            width: image.width,
                            height: image.height,
                            left: image.x,
                            top: image.y,
                            "border-width": "3px"
                        }).chain(function() {
                            if (options.useShadow)
                                $("largerBox").dropShadow();
                        });

                        var __this = this;

                        (function() {
                            // add close function after we're done animating
                            __this.addEvents({
                                mouseenter: function() {
                                    if ($type(__this.tooltip) == "function" && options.useTooltip)
                                        __this.tooltip("click to close");
                                }
                            });

                            if (options.useModal) {
                                // get rid of it by clicking on modal also
                                $("modal").addEvents({
                                    click: function() {
                                        __this.fireEvent("click");
                                    }
                                });
                            }
                        }).delay(300);

                        myevents = (function() {
                            __this.fireEvent("mouseenter");
                        }).delay(1000);
                    }
                });

                var initCheck = (function() {
                    _this.set("href", "#").removeEvents();
                    _this.getFirst().removeEvents();
                    if (!$("largerBox") && options.useModal)
                        toggleModal();
                }).delay(3500);
            },
            mouseenter: function() {
                // do something on parent element's mouseover.
            }

        });

    } // end init largerBox
}; // end largerBox namespace


var labels = {
    setLabels: function() {
        $$("code").each(function(el) {
            // attach a label in the top-left corner
            var $coords = el.getCoordinates();
            var blockQuote = el.getParent().getParent();
            var $coords = blockQuote.getCoordinates();
            var foo = new Element("div", {
                styles: {
                    border: "1px solid #727F8A",
                    background: "#ffffe5",
                    color: "#444",
                    "font-size": "9px",
                    "font-weight": 600,
                    "letter-spacing": 2,
                    "text-transform": "uppercase",
                    height: 14,
                    padding: 1,
                    "padding-top": 0,
                    position: "absolute",
                    "z-index": 1000000000,
                    left: $coords.left + 6,
                    top: $coords.top - 12
                },
                "class": "codeLabel",
                text: el.className
            }).inject(document.body);

            foo.clone().set({
                styles: {
                    left: $coords.left + 10,
                    top: $coords.top - 8,
                    opacity: .4,
                    background: "#000",
                    border: 0
                }
            }).injectBefore(foo);

            var c2c = new Element("div", {
                styles: {
                    border: "1px solid #727F8A",
                    background: "#ffffe5",
                    color: "#444",
                    "font-size": "9px",
                    "font-weight": 600,
                    "letter-spacing": 2,
                    "text-transform": "uppercase",
                    height: 14,
                    padding: 1,
                    "padding-top": 0,
                    position: "absolute",
                    left: $coords.right - 70,
                    top: $coords.top - 12
                },
                "class": "codeLabel cur",
                text: "copy"
            }).inject(document.body).addEvents({
                click: function() {
                    clipboard(el.get("text"));
                }
            });

            c2c.clone().set({
                styles: {
                    left: $coords.right - 66,
                    top: $coords.top - 8,
                    opacity: .4,
                    background: "#000",
                    border: 0
                }
            }).injectBefore(c2c);

            var foo2 = new Element("div", {
                styles: {
                    border: "1px solid #727F8A",
                    background: "#ffffe5",
                    color: "#444",
                    "font-size": "9px",
                    "font-weight": 600,
                    "letter-spacing": 2,
                    "text-transform": "uppercase",
                    height: 14,
                    padding: 1,
                    "padding-top": 0,
                    position: "absolute",
                    left: $coords.right - 20,
                    top: $coords.top - 12
                },
                "class": "codeLabel cur",
                text: "+"
            }).inject(document.body).addEvents({
                click: function() {
                    this.fireEvent("mouseleave");
                    var oldStyles = blockQuote.getStyles("width", "position", "z-index", "height", "left", "top");
                    if ($("codeBox") || $("modal"))
                        return false;

                    var _this = this, myevents;
                    toggleModal("#555", {
                        zIndex: 1000,
                        events: {
                            click: function() {
                                $("modal").destroy();
                                blockQuote.setStyles(oldStyles).set("id", "");
                                window.doresize = true;
                                labels.moveLabels();
                                blockQuote.removeEvents();
                            }
                        }
                    });

                    var coords = blockQuote.getCoordinates();

                    var winSize = window.getSize();
                    var winScroll = window.getScroll();
                    var windowHeight = window.getScrollHeight()-1;

                    blockQuote.set({
                        id: "codeBox",
                        styles: {
                            position: "absolute",
                            left: blockQuote.left,
                            top: blockQuote.top,
                            "z-index": 1000000000-1
                        },
                        events: {
                            click: function(e) {
                                e.stopPropagation();
                            }
                        }
                    });


                    blockQuoteHeight = blockQuote.getStyle("height").toInt();
                    var code = {
                        y: winScroll.y + (winSize.y / 2) - (blockQuoteHeight / 2),
                        x: winSize.x / 2 - 800 / 2,
                        width: 800,
                        height: (blockQuoteHeight > winSize.y) ? winSize.y - 40 : blockQuoteHeight
                    }

                    if (code.y + blockQuoteHeight + 20 > windowHeight)
                        code.y = windowHeight - 20 - blockQuoteHeight;

                    if (code.y <= 0)
                        code.y = 20;

                    var myEffect = new Fx.Morph(blockQuote, {
                        transition: Fx.Transitions.Sine.easeOut,
                        duration: 300
                    }).start({
                        width: code.width,
                        height: code.height,
                        left: code.x,
                        top: code.y,
                        "border-width": 0,
                        opacity: 1
                    }).chain(function() {
                        $$("div.codeLabel").destroy();
                        window.doresize = false;
                        blockQuote.addEvent("click", function() {
                            $("modal").fireEvent("click");
                        });
                    });

                },
                mouseenter: function() {
                    this.tooltip("expand code");
                }
            });

            foo2.clone().set({
                styles: {
                    left: $coords.right - 16,
                    top: $coords.top - 8,
                    opacity: .4,
                    background: "#000",
                    border: 0
                }
            }).injectBefore(foo2);

        });

    },
    moveLabels: function() {
        if (window.doresize == false)
            return false;
        $$("div.codeLabel").destroy();
        this.setLabels();
    },
    init: function() {
        this.moveLabels();
        window.addEvent("resize", function() {
            labels.moveLabels()
        });
    }
}


var C = {
    // console wrapper
    debug: true, // global debug on|off
    quietDismiss: false, // may want to just drop, or alert instead
    log: function() {
        if (!C.debug) return false;


        if (typeof console == 'object' && typeof console.log != "undefined")
            console.log.apply(this, arguments);
        else
            if (!C.quietDismiss) {
                var result = "";
                for (var i = 0, l = arguments.length; i < l; i++)
                    result += arguments[i] + " ("+typeof arguments[i]+") ";

                alert(result);
            }
    }
} // end console wrapper.

var mOOdalBox = new Class({
    // modal box class by D. Christoff
    Implements: [Options, Events],
    author: "Dimitar Christoff",
    url: "http://fragged.org",
    options: {
        width: 400,
        height: 300,
        title: "",
        titleClass: "modalTitle",
        titleColour: "#444",
        close: true,
        modal: true,
        shadow: true,
        scroll: false,
        modalColour: "#fff",
        text: "",
        textFunction: false,
        id: "mOOdalBox",
        innerPadding: 10,
        movable: false
    },
    initialize: function(el, options) {
        this.setOptions(options);
        this.sourceElement = el;
        this.open();
    },
    open: function() {
        var coords = this.sourceElement.getCoordinates();
        this.modalBox = new Element("div", {
            id: this.options.id,
            styles: {
                position: "absolute",
                width: coords.width,
                height: coords.height, // + "px !important",
                left: coords.left,
                top: coords.top,
                position: "absolute",
                border: "1px solid #000",
                background: "#ebf5fd  url(/images/v2/v2-modal-footer-bg.gif) repeat-x bottom left",
                "z-index": 1000
            }
        }).inject(document.body), this.myfx = new Fx.Morph(this.modalBox, {
            transition: Fx.Transitions.Sine.easeOut,
            duration: 300
        }), this.modalPos = centerBox(this.options.width, this.options.height);

        if (this.options.modal)
            toggleModal(this.options.modalColour, {
                zIndex: 100
            }).addEvents({
                click: function() {
                    this.close();
                }.bind(this)
            });

        this.modalTitleContainer = new Element("div", {
            styles: {
                height: 28,
                background: "#ebf5fd  url(/images/v2/v2-modal-header-bg.gif) repeat-x"
            }
        }).inject(this.modalBox);

        this.modalTitle = new Element("div", {
            id: "modalTitle",
            styles: {
                float: "left",
                fontWeight: "bold",
                fontSize: "18px",
                color: this.options.titleColour,
                padding: 2,
                fontFamily: "arial"
            },
            "class": this.options.titleClass
        }).injectTop(this.modalTitleContainer);

        this.modalBody = new Element("div", {
            id: "modalBody",
            styles: {
                height: this.options.height - 48,
                margin: 0,
                padding: 0,
                overflow: "hidden"
            }
        }).inject(this.modalBox);


        var _this = this;
        this.myfx.start({
            height: this.options.height,
            width: this.options.width,
            left: this.modalPos.x,
            top: this.modalPos.y
        }).chain(function() {
            this.fireEvent("onComplete");

            if (this.options.scroll) {
                this.modalBody.setStyles({
                    "overflow-y": "scroll",
                    "overflow-x": "none"
                });
            }



            if (this.options.shadow)
                this.modalBox.dropShadow();

            if (this.options.close)
                new Asset.image("/images/v2/button-close.png", {
                    onload: function() {
                        this.injectTop(_this.modalTitleContainer).addClass("cur").setOpacity(1).set({
                            styles: {
                                float: "right",
                                position: "relative",
                                top: -14,
                                right: -12
                            },
                            title: "click to close",
                            id: "modalClose",
                            events: {
                                click: function() {
                                    this.removeEvents();
                                     _this.close();
                                }
                            }
                        });
                    }
                });

            var adjustedWidth = (this.options.close) ? 36 : 0;
            this.modalTitle.set({
                html: this.options.title,
                styles: {
                    width: this.options.width - adjustedWidth,
                    cursor: (this.options.movable) ? "move" : "default"
                }
            });

            this.modalBody.set({
                styles: {padding: this.options.innerPadding, paddingTop: 0, clear: "both", color: "#000", "font-family": "arial", "font-size": "12px", "line-height": 16, "line-spacing": 0, margin: 0}
            });

            // this.setHTML(this.options.text);

            // movable.
            if (this.options.movable) {
                new Drag.Move(this.modalBox, {
                    handle: this.modalTitle,
                    onStart: function() {
                        if (this.options.shadow) {
                            var rel = this.modalBox.get("data-related");
                    	    if ($(rel))
                    	        $(rel).destroy();
                        }
                    }.bind(this),
                    onComplete: function() {
                        if (this.options.shadow) {
                            this.modalBox.dropShadow();
                        }
                    }.bind(this)
                });
            }
        }.bind(this));
    },
    setHTML: function(html) {
        this.modalBody.set("html", html);
    },
    onComplete: function() {
        this.fireEvent("onComplete");
    },
    close: function() {
    	this.fireEvent("onClose");

        this.myfx.cancel();
        if (this.options.modal && $("modal")) {
            $("modal").smartdestroy();
        }

        if ($(this.options.id))
            $(this.options.id).smartdestroy();

    },
	onClose: function() {
		this.fireEvent("onClose");
	}
}); // end mOOdalBox class