// Tooltip , alert tip by thuy.nguyen (email: ducthuy@gmail.com)
var BubbleTips = new Class({
	initialize: function(id, width, fontStyle, bgColor, opacity){
		this.id = id;
		this.fontStyle = fontStyle;
		this.opacity = opacity;
		this.waitInterval = 0;
		this.createClass(width, bgColor);
		this.build();
	},
	
	show: function(text, controlObject) {
		clearTimeout(this.waitInterval);
		$(this.id+"Content").setHTML(text);
		var objectCoordinates =$(controlObject).getCoordinates();
		var tipCoordinates =$(this.id).getCoordinates();
		$(this.id).setStyles({
			top:(objectCoordinates.top-tipCoordinates.height+5)+"px",
			left:(objectCoordinates.left+10)+"px"
		});
		//
		if (window.ie) {
			$(this.id+"IframeContent").setStyles({
				height: $(this.id+"Content").getCoordinates().height+"px"
			});
			$(this.id+"Iframe").setStyles({
				top:(objectCoordinates.top-tipCoordinates.height+5)+"px",
				left:(objectCoordinates.left+10)+"px",
				visibility: "visible"
			});
		}
		//
		var thisObject = this;
		new Fx.Style($(thisObject.id), 'opacity', {
			duration:500,
			onComplete: function(){
				thisObject.waitInterval = setTimeout(function() {
					thisObject.hide();
				}, 3000);
			}
		}).start(0, thisObject.opacity);
	},
	
	hide: function() {
		clearTimeout(this.waitInterval);
		$(this.id).setOpacity(0);
		if (window.ie) {
			$(this.id+"Iframe").setOpacity(0);
		}
	},
	
	build: function() {
		var bgDiv = new Element("div").setProperties({id: this.id}).addClass("gx").injectInside($$("body")[0]);
		//
		if (window.ie) {
			var iframeDiv = new Element("div").setProperties({id: this.id+"Iframe"}).addClass("gx").injectInside($$("body")[0]);
		}
		//
		for (var i = 0; i < 5; i++) {
			new Element("b").addClass("b"+i).setHTML("&nbsp;").injectInside(bgDiv);
			if (window.ie) {
				new Element("iframe").setProperties({scrolling: "no", frameBorder:0}).addClass("f"+i).setStyles({filter:"alpha(opacity=0)"}).injectInside(iframeDiv);
			}
		}
		//
		new Element("div").setProperties({id: this.id+"Content"}).addClass("b5").setHTML("&nbsp;").injectInside(bgDiv);
		if (window.ie) {
			new Element("iframe").setProperties({id: this.id+"IframeContent", scrolling: "no", frameBorder:0}).addClass("f5").setStyles({filter:"alpha(opacity=0)"}).injectInside(iframeDiv);
		}
		//
		for (i = 4; i > 0; i--) {
			new Element("b").addClass("b"+i).setHTML("&nbsp;").injectInside(bgDiv);
			if (window.ie) {
				new Element("iframe").setProperties({scrolling: "no", frameBorder:0}).addClass("f"+i).setStyles({filter:"alpha(opacity=0)"}).injectInside(iframeDiv);
			}
		}
		//
		for (i = 6; i < 27; i++) {
			new Element("b").addClass("b"+i).setHTML("&nbsp;").injectInside(bgDiv);
			if (window.ie) {
				new Element("iframe").setProperties({scrolling: "no", frameBorder:0}).addClass("f"+i).setStyles({filter:"alpha(opacity=0)"}).injectInside(iframeDiv);
			}
		}
	},
	
	createClass: function(tipWidth, bgColor) {
		this.createCSS(".fx", "width:"+tipWidth+"px; position:absolute; left:100px; top:100px; text-align:left; visibility:hidden; z-index:100;");
		this.createCSS(".gx", "width:"+tipWidth+"px; position:absolute; left:100px; top:100px; text-align:left; visibility:hidden; z-index:101;");
		this.createCSS("#"+this.id+"Content", this.fontStyle);
		//
		var skinElements = [
			{w:(tipWidth-12), b:"#000", ml:6, bl:0, br:0},
			{w:(tipWidth-12), b:bgColor, ml:4, bl:2, br:2},
			{w:(tipWidth-8), b:bgColor, ml:3, bl:1, br:1},
			{w:(tipWidth-6), b:bgColor, ml:2, bl:1, br:1},
			{w:(tipWidth-4), b:bgColor, ml:1, bl:1, br:1, h:2},
			{w:(tipWidth-16), b:bgColor, ml:0, bl:1, br:1, h:"auto", p:7},
			{w:25, b:bgColor, ml:6, bl:12, br:(tipWidth-12-25-12)},
			{w:24, b:bgColor, ml:16, bl:1, br:2},
			{w:22, b:bgColor, ml:16, bl:1, br:2},
			{w:21, b:bgColor, ml:15, bl:1, br:2},
			{w:19, b:bgColor, ml:15, bl:1, br:2},
			{w:18, b:bgColor, ml:14, bl:1, br:2},
			{w:17, b:bgColor, ml:13, bl:1, br:2},
			{w:15, b:bgColor, ml:13, bl:1, br:2},
			{w:14, b:bgColor, ml:12, bl:1, br:2},
			{w:12, b:bgColor, ml:12, bl:1, br:2},
			{w:12, b:bgColor, ml:11, bl:1, br:1},
			{w:11, b:bgColor, ml:10, bl:1, br:2},
			{w:9, b:bgColor, ml:10, bl:1, br:2},
			{w:8, b:bgColor, ml:9, bl:1, br:2},
			{w:6, b:bgColor, ml:9, bl:1, br:2},
			{w:5, b:bgColor, ml:8, bl:1, br:2},
			{w:4, b:bgColor, ml:7, bl:1, br:2},
			{w:2, b:bgColor, ml:7, bl:1, br:2},
			{w:1, b:bgColor, ml:6, bl:1, br:2},
			{w:2, b:"#000", ml:6, bl:0, br:0},
			{w:1, b:"#000", ml:5, bl:0, br:0}
		];
		//
		var divCSS;
		var iframeCSS;
		for (var i = 0; i<skinElements.length; i++){
			divCSS = "width:"+skinElements[i].w+"px; ";
			divCSS += "height:"+(skinElements[i].h?((skinElements[i].h!="auto")?skinElements[i].h+"px":"auto"):"1px")+"; ";
			divCSS += "border-left:"+skinElements[i].bl+"px solid #000; ";
			divCSS += "border-right:"+skinElements[i].br+"px solid #000; ";
			divCSS += "background:"+skinElements[i].b+"; ";
			divCSS += "margin-left:"+skinElements[i].ml+"px; ";
			divCSS += (skinElements[i].h!="auto")?"font-size:1px; line-height:1px; display:block; overflow:hidden;":"display:block; overflow:hidden;";
			if (skinElements[i].p) {
				divCSS += " padding:0 "+skinElements[i].p+"px;";
			}
			this.createCSS(".b"+i, divCSS);
			//
			if (window.ie) {
				iframeCSS = "width:"+(skinElements[i].w+skinElements[i].bl+skinElements[i].br+(skinElements[i].p?skinElements[i].p*2:0))+"px; ";
				iframeCSS += "height:"+(skinElements[i].h?((skinElements[i].h!="auto")?skinElements[i].h+"px":"auto"):"1px")+"; ";
				iframeCSS += "margin-left:"+skinElements[i].ml+"px; ";
				iframeCSS += "font-size:1px; line-height:1px; display: block;overflow: hidden;";
				this.createCSS(".f"+i, iframeCSS);
			}
		}
	},
	
	createCSS: function(selector, declaration) {
		var style = $$("style");
		if (style.length < 2) {
			var style_node = new Element("style");
			style_node.setProperty("type", "text/css");
		} else {
			var style_node = style[style.length-1];
		}
		//
		if (!window.ie) {
			style_node.appendText("\n"+selector+"{"+declaration+"}");
		}
		style_node.injectInside($$("head")[0]);
		// use alternative methods for IE
		if (window.ie && document.styleSheets && document.styleSheets.length > 0) {
			var style_node = document.styleSheets[document.styleSheets.length - 1];
			if (typeof(style_node.addRule) == "object") style_node.addRule(selector, declaration);
		}
	}
});
BubbleTips.implement(new Events);
BubbleTips.implement(new Options);
//