/* DotCom Interactive Core functions 

release: 		11/06/2008 01:16:15
dependent on: 	mootools 1.2dev

copyright (c) 2008 by Dimitar Christoff <dimitar@dci.uk.net>
usage w/o prior conscent by the author is not legal 

*/

var delayTimer, imagePath = "/new/images/", pdown = new Asset.image(imagePath + "point_down.gif");


// element functions 
Element.implement({
	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").dispose();
            $("myBubbles").dispose();
        }

        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": 99999

        }).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": 100000,
            "events": {
                "mouseenter": function() {
                    $clear(delayTimer);
                    this.setOpacity(1);
                },
                "mouseleave": function() {
                    this.setOpacity(bubbleOptions.fadeUntil);
                    delayTimer = (function() {
                        if (bubbleOptions.fadeFrom == bubbleOptions.fadeUntil && $("myBubble")) {
                            $("myBubble").dispose();
                            $("myBubbles").dispose();
                        }
                        else {
                            if ($("myBubble")) {
                                $("myBubble").fade(bubbleOptions.fadeFrom);
                                $("myBubbles").fade(bubbleOptions.shadowFadeFrom);
                                if ($("closeBubble"))
                                    $("closeBubble").dispose();
                                (function() {
                                    $("myBubble").dispose();
                                    $("myBubbles").dispose();
                                }).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").dispose();
                        $("myBubbles").dispose();
                    }
                    else {
                        $("myBubble").fade(bubbleOptions.fadeFrom).removeEvents();
                        $("myBubbles").fade(bubbleOptions.shadowFadeFrom);
                        if ($("closeBubble"))
                           $("closeBubble").dispose();
                        (function() {
                            $("myBubble").dispose();
                            $("myBubbles").dispose();
                        }).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").dispose();
                $("myBubbles").dispose();
            }
            else {
                if ($("myBubble")) {
                    $("myBubble").fade(bubbleOptions.fadeFrom).removeEvents();
                    $("myBubbles").fade(bubbleOptions.shadowFadeFrom);
                    if ($("closeBubble"))
                        $("closeBubble").dispose();
                    (function() {
                        $("myBubble").dispose();
                        $("myBubbles").dispose();
                    }).delay(500);
                }
            }
        }).delay(bubbleOptions.delayLong);

        return this;
    },
    tooltip: function(message, options) {
    	// a quick 'facebook' style tooltip
        var options = $merge({
            eventStart: "mouseenter",
            eventEnd: "mouseleave",
            topOffset: 21,
            opacity: 1
        }, options);

        var el = this;
        var coords = el.getCoordinates();
        var c = el.getPosition();

        if ($("pointerDown"))
            $("pointerDown").dispose();



        var pointer = new Element("div", {
            styles: {
                position: "absolute",
                height: options.topOffset,
                top: coords.top - options.topOffset,
                left: -200,
                "text-align": "center",
                "z-index": 1000,
                "line-height": "9px"
            },
            id: "pointerDown"
        });

        var tipbody = new Element("div", {
            styles: {
                background: "#4c4c4c",
                color: "#ffffe5",
                padding: 2,
                "padding-bottom": 3,
                "padding-left": 9,
                "padding-right": 9,
                width: "auto",
                display: "inline",
                "margin-left": "auto",
                "margin-right": "auto",
                overflow: "hidden",
                opacity: options.opacity,
                "font-size": "9px",
                "font-family": "verdana",
                "line-height": "9px"
            },
            html: message.replace(/ /g, "&nbsp;")
        }).inject(pointer);
        pointer.inject(document.body);

        pdown.clone().inject(pointer);
        // .setStyle("margin-top", 2);

        this.addEvent(options.eventEnd, function() {
            if ($("pointerDown")) {
                $("pointerDown").dispose();
                el.removeEvent(options.eventEnd);
            }
        });

        // var tipWidth = tipbody.getCoordinates();
        var t = tipbody.getSize();
        if (Browser.Engine.trident4 && t.x == 0) {
        	pwidth = 90;
        	
        	var lefty = coords.left + (coords.width / 2).round() - (pwidth / 2).round();
        	pointer.setStyles({"left":  lefty, "width": pwidth});
        	// again, needs to be visible to calc width sometimes in ie6
        	var t = tipbody.getSize();
        	pointer.setStyles({"left":  lefty, "width": t.x});
        }
        else {
	        var lefty = coords.left + (coords.width / 2).round() - (t.x / 2).round();
	        pointer.setStyles({"left":  lefty, "width": t.x});
        }
        
        return this;
    },
    zoomColour: function(newBackground, selectedImage) {
    	// by pantone
	   	var el = this;
	    var coords = this.getPosition();

	    if ($("expanded"))
	    	$("expanded").dispose();

	    var zoomed = new Element("div", {
	    	id: "expanded",
	    	title: newBackground,
	    	"class": "cur",
	    	rel: el.getProperty("title"),
	    	styles: {
	    		position: "absolute",
	    		border: "1px solid #000",
	    		background: el.getStyle("background-color"),
	    		height: 30,
	    		width: 30,
	    		top: coords.y - 8,
	    		left: coords.x - 8
	    	}
	    }).inject(document.body).cloneEvents(this, "click").tooltip(this.get("title"), {topOffset: 20});
	    
	    return this;
	}	    	
}); // end element.implement