/**
 * MercadoPago Button Render
 * <br><br>
 * Este componente se encarga de interpretar links de MP en el Site de los usuarios integradores y "dibujar" el boton con
 * la configuracion grafica y de comportamiento especificada
 * 
 * @author hcasatti - 20110321
 * @version 1.5b
 */
function MPButtonRender (){}

/**
 * Metodo de ejecucion del Render.<br>
 * Se encarga de disparar el Render para procesar todos los botones de la pagina.
 */
MPButtonRender.doRender = function () {
	if (window.mp_buttons == null) {
		window.mp_buttons = new Array ();
	}
	
	// Toma todos los botones de MP. Si no hubiera ninguno, setea un evento para volver a ejecutarse al terminar de cargar la pagina.
	var buttons = document.getElementsByName ("MP-payButton");
	if (buttons.length <= 0 && window.mp_renderLoaded != true) {
		window.mp_renderLoaded = MPButtonRender.addEvent (window, "load", MPButtonRender.doRender);
		return;
	}
	
	for (var f = 0; f < buttons.length; f++) {
		if (buttons[f].processed == true) {
			continue;
		}
		
		window.mp_buttons.push (buttons[f]);
		
		// Setea el comportamiento del boton.
		MPButtonRender.doBehavior (buttons[f]);
		
		buttons[f].processed = true;
		buttons[f].cssProcessed = false;
	}

	// Llama al renderizado visual, luego de aplicar el comportamiento a todos los botones que lo necesiten.
	MPButtonRender.doVisual ();
};

/**
 * Metodo encargado de generar los estilos visuales para los botones
 * 
 * @param {Array} buttons(optional)
 * @param {String} forcedClass(optional)
 */
MPButtonRender.doVisual = function (buttons, forcedClass) {
	var force = false;
	
	if (window.mp_stylesLoaded == null) {
		window.mp_stylesLoaded = new Array ();
	}
	
	if (buttons == null) {
		buttons = window.mp_buttons; 
	} else {
		if (buttons.length == null) {
			buttons = [buttons];
		}
		force = true;
	}
	
	var styleCombination = new Array ();
	for (var i = 0; i < buttons.length; i++) {
		if (force) {
			buttons[i].cssProcessed = false;
			buttons[i].styleDefinition = null;
		}
		
		if (buttons[i].cssProcessed) {
			continue;
		}
		
		var className = "";
		if (force) {
			className = forcedClass != null ? forcedClass : buttons[i].srcClassName;
		} else {
			className = buttons[i].className;	
			buttons[i].srcClassName = className;
		}
		
		// Si el boton no tiene className asociado, no lo procesa.
		if (className == "") {
			buttons[i].cssProcessed = true;
			continue;
		}
		// Si el className del boton no respeta minimamente la nomenclatura de MP, no lo procesa.
		if (!/^(-?\w+)+-?$/.test (className)) {
			buttons[i].cssProcessed = true;
			continue;
		}
		
		// Recorre los Grupos Visuales existentes y obtiene los valores de cada uno del className.
		for (var d in MPButtonRender.visualGroups) {
			var group = MPButtonRender.visualGroups[d]; 
			var data = group.getData (className);
			
			if (MPButtonRender.styles[d] != null && MPButtonRender.styles[d][data] != null) {
				if (buttons[i].styleDefinition == null) {
					// Define los grupos visuales y asocia el Base.Common.
					buttons[i].styleDefinition = new Object ();
					buttons[i].styleDefinition.all = new Object ();					
					buttons[i].styleDefinition.base = new Object ();					
							
					buttons[i].styleDefinition.all[MPButtonRender.defaultStyle] = "common";
					buttons[i].styleDefinition.base[MPButtonRender.defaultStyle] = "common";
				}

				if (buttons[i].styleDefinition[group.groupType] == null) {
					buttons[i].styleDefinition[group.groupType] = new Object ();
				}
				
				buttons[i].styleDefinition.all[d] = data;
				buttons[i].styleDefinition[group.groupType][d] = data;
			}
		}
		
		// De acuerdo al tipo de grupo (base, style, extra) llama al metodo encargado de procesarlo.
		if (buttons[i].styleDefinition != null) {
			// Limpia el className original
			buttons[i].className = "";
			
			MPButtonRender.processBase(buttons[i]);
			MPButtonRender.processStyle(buttons[i]);
			MPButtonRender.processExtra(buttons[i]);
		}
		else {
			buttons[i].className = buttons[i].srcClassName;
		}
	
		buttons[i].cssProcessed = true;
	}
};

/**
 * Metodo encargado de procesar los estilos base de los botones.
 * 
 * @param {Object} button
 */
MPButtonRender.processBase = function (button) {
	if (button.styleDefinition.base == null) {
		return;
	}
	var className = MPButtonRender.processCSS (button, "base");
	button.className += button.className == "" ? className : " " + className;
};

/**
 * Metodo encargado de procesar los estilos especificos de los botones.
 * 
 * @param {Object} button
 */
MPButtonRender.processStyle = function (button) {
	if (button.styleDefinition.style == null) {
		return;
	}
	var className = MPButtonRender.processCSS (button, "style");
	button.className += button.className == "" ? className : " " + className;
};

/**
 * Metodo encargado de procesar los estilos y elementos extra del boton (por ejemplo Logos).
 * 
 * @param {Object} button
 */
MPButtonRender.processExtra = function (button) {
	if (button.extraElement != null) {
		try {
			delete button.parentNode.removeChild(button.extraElement);
		} catch (e) {}
		try {
			delete button.extraElement;
		} catch (e) {}
	}
	if (button.styleDefinition.extra == null) {
		return;
	}
	
	if (button.extraContainer == null) {
		button.extraContainer = document.createElement ("div");
		button.extraContainer.style.textAlign = "center";
		button.extraContainer.style.display = "inline-block";
		
		button.parentNode.replaceChild (button.extraContainer, button);
		button.extraContainer.appendChild (button);
	}
	
	button.extraElement = document.createElement ("span");
	var extraClassName = MPButtonRender.processCSS (button, "extra");

	button.extraElement.className = extraClassName;
	if (button.nextSibling != null) {
		button.parentNode.insertBefore (button.extraElement, button.nextSibling);
	} else {
		button.parentNode.appendChild (button.extraElement);
	}
};

/**
 * Metodo generico encargado de procesar el estilo del boton.
 * Devuelve la clase generada para el tipo de definicion.
 * 
 * @param {Object} button
 * @param {String} styleDefinition
 * @return {String}
 */
MPButtonRender.processCSS = function (button, styleDefinition) {
	var styleArray = new Array ();
	for (var i in button.styleDefinition[styleDefinition]) {
		styleArray.push (button.styleDefinition[styleDefinition][i]);
	}
	var styleClassName = "MP-" + styleArray.sort().join("-");

	var combinedStyle = new Object ();
	var finalClassName = "";
	
	for (var i in button.styleDefinition[styleDefinition]) {
		var dependency = MPButtonRender.styles[i][button.styleDefinition[styleDefinition][i]].dependency;
		dependency = button.styleDefinition.all[dependency];
		if (dependency != null) {
			styleClassName += "-D" + dependency;
		}

		if (i != "base" && MPButtonRender.styles[i]["common"] != null) {
			var commonDependency = MPButtonRender.styles[i]["common"].dependency;
			commonDependency = button.styleDefinition.all[commonDependency];
			if (commonDependency != null) {
				styleClassName += "-CD" + commonDependency;
			}

			for (var a in MPButtonRender.styles[i]["common"].attributes) {
				if (combinedStyle[a] == null) {
					combinedStyle[a] = "";
				}

				combinedStyle[a] += MPButtonRender.styles[i]["common"].getCSS(a, commonDependency);
			}
		}
		
		for (var a in MPButtonRender.styles[i][button.styleDefinition[styleDefinition][i]].attributes) {
			if (combinedStyle[a] == null) {
				combinedStyle[a] = "";
			}

			combinedStyle[a] += MPButtonRender.styles[i][button.styleDefinition[styleDefinition][i]].getCSS (a, dependency);
		}
	}
	
	for (var a in combinedStyle) {
		finalClassName = a == "normal" ? styleClassName : styleClassName + ":" + a;
		if (window.mp_stylesLoaded.indexOf (finalClassName) >= 0) {
			continue;
		}

		MPButtonRender.addCSS (styleDefinition, finalClassName, combinedStyle[a]);
		window.mp_stylesLoaded.push (finalClassName);
	}
	
	return styleClassName;
};

/**
 * Metodo encargado de generar el comportamiento del boton.
 * 
 * @param {Object} button
 */
MPButtonRender.doBehavior = function (button) {
	var fireEvent = false;
	var buttonData = new Object ();

	var mode = button.getAttribute("mp-mode");
	if (mode != null && mode.trim() != "") {
		var modeData = mode.toLowerCase().split("-");
		buttonData.mode = modeData[0];
		buttonData.modeData = modeData[1];
		button.setAttribute("target", "");
	} else {
		var target = button.getAttribute("target");
		if (target != null && target.trim() != "") {
			buttonData.target = target.trim();
		}
	}

	/*
	 * Si la url del href no es un anchor local o un javascript, asociamos el evento de apertura
	 */
	if (button.getAttribute ("href") != null && !/^(#|javascript:)/.test (button.getAttribute ("href").trim())) {
		buttonData.url = button.getAttribute ("href");
		button.href = "javascript:void(0)";
		fireEvent = true;
	}

	button.data = buttonData;

	var imgContent = button.getElementsByTagName ("img");
	if (imgContent.length <= 0) {
		if (fireEvent) {
			MPButtonRender.addEvent(button, "click", MPButtonRender.fire);
		}
	} else {
		for (var i = 0; i < imgContent.length; i++) {
			imgContent[i].data = buttonData;
			if (fireEvent) {
				MPButtonRender.addEvent(imgContent[i], "click", MPButtonRender.fire);
			}
		}
	}
	
	/**
	 * Metodo agregado al boton para que pueda invocar al checkout
	 * 
	 * @param {String} url
	 */
	button.openMPCheckout = function (url) {
		if (this.data != null) {
			this.data.url = url;
		}
		
		MPButtonRender.openCheckout (this.data);
	}
};

/**
 * Metodo asociado al evento de click, que se encarga de disparar el checkout especificado.
 * 
 * @param {Event} e
 */
MPButtonRender.fire = function (e) {
	if (e == null) {
		e = window.event;
	}
	if (e == null) {
		return false;
	}
	
	var srcElement = e.srcElement != null ? e.srcElement : e.target;
	if (srcElement == null) {
		return false;
	}
	
	MPButtonRender.openCheckout (srcElement.data);
};

/**
 * Metodo que llama a todas las implementaciones de apertura del checkout.
 * 
 * @param {Object} data
 */
MPButtonRender.openCheckout = function (data) {
	var dflt = "redirect";
	
	if (data == null || data.url == null || data.url.trim () == "") {
		return;
	}
	
	var mode = dflt;
	if (typeof MPButtonRender.openCheckout[data.mode] == "function") {
		mode = data.mode;
	}
	
	MPButtonRender.openCheckout[mode] (data);
};

/**
 * Objeto que tiene todas las definiciones de tamanios para la apertura del checkout
 */
MPButtonRender.openCheckout.size = new Object ();
MPButtonRender.openCheckout.size.dflt = {width: 820, height: 600};
MPButtonRender.openCheckout.size.lite = {width: 520, height: 370};

/**
 * Retorna un objeto con el tamanio solicitado, o el Default si no lo encuentra
 * 
 * @param {String} size
 */
MPButtonRender.openCheckout.size.get = function (size) {
	if (size == null || MPButtonRender.openCheckout.size[size] == null) {
		return MPButtonRender.openCheckout.size.dflt;
	}
	return MPButtonRender.openCheckout.size[size];
};


// Open Checkout en New Window (target)
MPButtonRender.openCheckout.blank = function (data) {
	MPButtonRender.checkout = window.open (data.url, data.target);
};

// Open Checkout como Redirect
MPButtonRender.openCheckout.redirect = function (data) {
	document.location.href = data.url;
};

// Open Checkout en un PopUp
MPButtonRender.openCheckout.popup = function (data) {
	var size = MPButtonRender.openCheckout.size.get (data.modeData);
	
	var left = (screen.width - size.width)/2;
	var top = (screen.height - size.height)/2 - 50;
	
	MPButtonRender.checkout = window.open (data.url, "MPCheckout", "width=" + size.width + ",height=" + size.height + ",scrollbars=1,location=0,menubar=0,resizable=1,titlebar=0,toolbar=0,status=0,left=" + left + ",top=" + top + "");
};

// Open Checkout en un Modal
MPButtonRender.openCheckout.modal = function (data) {
	var size = MPButtonRender.openCheckout.size.get (data.modeData);
	
	MPButtonRender.Modal.openModal (data.url, size.width, size.height);
};

/**
 * Modal Window del Render
 */
MPButtonRender.Modal = new Object ();

/**
 * Abre un Modal con las dimensiones especificadas apuntando a la url pasada como parametro
 * 
 * @param {Object} url
 * @param {Object} width
 * @param {Object} height
 */
MPButtonRender.Modal.openModal = function (url, width, height) {
	if (url == null) {
		return;
	}
	
	MPButtonRender.Modal.size = new Object ();
	
	MPButtonRender.Modal.size.width = isNaN (width) ? 640 : parseInt (width, 10);
	MPButtonRender.Modal.size.height = isNaN (height) ? 480 : parseInt (height, 10);
	MPButtonRender.Modal.size.padding = 0;
	MPButtonRender.Modal.size.controlSize = 18; 
	MPButtonRender.Modal.size.dialogWidth = MPButtonRender.Modal.size.width + (MPButtonRender.Modal.size.padding * 2);
	MPButtonRender.Modal.size.dialogHeight = MPButtonRender.Modal.size.height + (MPButtonRender.Modal.size.padding * 2);
	
	
	// DIMMER
	if (MPButtonRender.Modal.dimmer == null) {
		MPButtonRender.Modal.dimmer = document.createElement ("div");
		document.getElementsByTagName ("body")[0].appendChild (MPButtonRender.Modal.dimmer);
		
		if (MPButtonRender.getIEVersion () >= 0) {
			MPButtonRender.Modal.dimmer.style.backgroundColor = "#000000";
			MPButtonRender.Modal.dimmer.style.filter = "alpha(opacity=50) !important";
			if (MPButtonRender.getIEVersion () == 6) {
				MPButtonRender.Modal.dimmer.style.width = window.size().width + "px";
				MPButtonRender.Modal.dimmer.style.height = (window.size().height + 12) + "px";
				MPButtonRender.Modal.dimmer.style.position = "absolute";
				MPButtonRender.Modal.dimmer.style.left = window.center(window.size(), true).x + "px";
				MPButtonRender.Modal.dimmer.style.top = window.center(window.size(), true).y + "px";
				MPButtonRender.addEvent (window, "scroll", function (){
					MPButtonRender.Modal.dimmer.style.left = window.center(window.size(), true).x + "px";
					MPButtonRender.Modal.dimmer.style.top = window.center(window.size(), true).y + "px";
				});
				MPButtonRender.addEvent (window, "resize", function (){
					MPButtonRender.Modal.dimmer.style.width = window.size().width + "px";
					MPButtonRender.Modal.dimmer.style.height = (window.size().height + 12) + "px";
					MPButtonRender.Modal.dimmer.style.left = window.center(window.size(), true).x + "px";
					MPButtonRender.Modal.dimmer.style.top = window.center(window.size(), true).y + "px";
				});
			}
		} else {
			MPButtonRender.Modal.dimmer.style.backgroundColor = "rgba(0,0,0,.5)";
		}
		MPButtonRender.Modal.dimmer.style.display = "none";
		if (MPButtonRender.getIEVersion() != 6) {
			MPButtonRender.Modal.dimmer.style.width = "100%";
			MPButtonRender.Modal.dimmer.style.height = "100%";
			MPButtonRender.Modal.dimmer.style.left = "0";
			MPButtonRender.Modal.dimmer.style.top = "0";
			MPButtonRender.Modal.dimmer.style.position = "fixed";
		}
		MPButtonRender.Modal.dimmer.style.zIndex = "150";
	}
	// END DIMMER

	// CONTAINER	
	if (MPButtonRender.Modal.dialog == null) {
		MPButtonRender.Modal.dialog = document.createElement("div");
		document.getElementsByTagName ("body")[0].appendChild (MPButtonRender.Modal.dialog);

		MPButtonRender.Modal.dialog.style.backgroundColor = "#fff";
		MPButtonRender.Modal.dialog.style.border = "1px solid #AFAFAF";
		MPButtonRender.Modal.dialog.style.display = "none";
		if (MPButtonRender.getIEVersion() == 6) {
			MPButtonRender.Modal.dialog.style.position = "absolute";
			MPButtonRender.addEvent (window, "scroll", MPButtonRender.Modal.centerDialog);
		} else {
			MPButtonRender.Modal.dialog.style.position = "fixed";
		}
		MPButtonRender.Modal.dialog.style.zIndex = "200";
		
		// CONTROL BAR
		MPButtonRender.Modal.closeButton = document.createElement("div");
		MPButtonRender.Modal.dialog.appendChild (MPButtonRender.Modal.closeButton);
		MPButtonRender.addEvent (MPButtonRender.Modal.closeButton, "click", MPButtonRender.Modal.closeModal);
		
		MPButtonRender.Modal.closeButton.style.width = (MPButtonRender.Modal.size.controlSize - 2) + "px";
		MPButtonRender.Modal.closeButton.style.height = (MPButtonRender.Modal.size.controlSize - 2) + "px";
		MPButtonRender.Modal.closeButton.style.fontFamily = "Arial";
		MPButtonRender.Modal.closeButton.style.fontStyle = "normal";
		MPButtonRender.Modal.closeButton.style.backgroundColor = "#FFF";
		MPButtonRender.Modal.closeButton.style.color = "#AFAFAF";
		MPButtonRender.addEvent (MPButtonRender.Modal.closeButton, "mouseover", function(){
			MPButtonRender.Modal.closeButton.style.color = "#333";
			MPButtonRender.Modal.closeButton.style.backgroundColor = "#DDD";
			MPButtonRender.Modal.closeButton.style.borderColor = "#333";});
		MPButtonRender.addEvent (MPButtonRender.Modal.closeButton, "mouseout", function(){
			MPButtonRender.Modal.closeButton.style.color = "#AFAFAF";
			MPButtonRender.Modal.closeButton.style.backgroundColor = "#FFF";
			MPButtonRender.Modal.closeButton.style.borderColor = "#AFAFAF";});
		
		MPButtonRender.Modal.closeButton.style.fontSize = "15px";
		MPButtonRender.Modal.closeButton.style.lineHeight = "14px";
		MPButtonRender.Modal.closeButton.style.fontWeight = "normal";
		MPButtonRender.Modal.closeButton.style.textAlign = "center";
		MPButtonRender.Modal.closeButton.style.border = "1px solid #AFAFAF";
		MPButtonRender.Modal.closeButton.style.position = "absolute";
		MPButtonRender.Modal.closeButton.style.right = "10px";
		MPButtonRender.Modal.closeButton.style.top = "10px";
		MPButtonRender.Modal.closeButton.style.cursor = "pointer";
		MPButtonRender.Modal.closeButton.style.zIndex = "250";
		MPButtonRender.Modal.closeButton.innerHTML = "x";
		// END CONTROL BAR
		
		// IFRAME
		MPButtonRender.Modal.container = document.createElement ("iframe");
		MPButtonRender.Modal.container.frameBorder = "0";
		MPButtonRender.Modal.dialog.appendChild (MPButtonRender.Modal.container);

		MPButtonRender.Modal.container.style.position = "absolute";
		MPButtonRender.Modal.container.style.left = MPButtonRender.Modal.size.padding + "px";
		MPButtonRender.Modal.container.style.bottom = MPButtonRender.Modal.size.padding + "px";
		// END IFRAME
	}
	// END CONTAINER
	
	// SIZE
	MPButtonRender.Modal.dialog.style.width = MPButtonRender.Modal.size.dialogWidth + "px";
	MPButtonRender.Modal.dialog.style.height = MPButtonRender.Modal.size.dialogHeight + "px";
	MPButtonRender.Modal.container.style.width = MPButtonRender.Modal.size.width + "px";
	MPButtonRender.Modal.container.style.height = MPButtonRender.Modal.size.height + "px";
	// END SIZE
	
	// CENTERING
	MPButtonRender.Modal.centerDialog ();
	MPButtonRender.addEvent (window, "resize", MPButtonRender.Modal.centerDialog);
	// END CENTERING

	MPButtonRender.Modal.dimmer.style.display = "block";
	MPButtonRender.Modal.dialog.style.display = "block";
	MPButtonRender.Modal.container.src = url;
};

/**
 * Centra el Modal en el area visible de la ventana
 */
MPButtonRender.Modal.centerDialog = function () {
	var useScrollOffset = MPButtonRender.getIEVersion() == 6;
	var pos = window.center({width:MPButtonRender.Modal.size.dialogWidth,height:MPButtonRender.Modal.size.dialogHeight}, useScrollOffset);
	
	var top = pos.y >= 0 ? pos.y : 0; 
	var left = pos.x >= 0 ? pos.x : 0; 
	
	MPButtonRender.Modal.dialog.style.top = top + "px";
	MPButtonRender.Modal.dialog.style.left = left + "px";
};

/**
 * Cierra el modal
 * 
 * @param {Event} e
 */
MPButtonRender.Modal.closeModal = function(e){
	if (MPButtonRender.Modal.dimmer != null) {
		MPButtonRender.Modal.dimmer.style.display = "none";
	}
	if (MPButtonRender.Modal.dialog != null) {
		MPButtonRender.Modal.dialog.style.display = "none";
		MPButtonRender.Modal.container.src = "";
		MPButtonRender.removeEvent (window, "resize", MPButtonRender.Modal.centerDialog);
	}
};

/**
* Metodos genericos
*/

/**
 * Asocia un evento a un elemento dado
 * 
 * @param {Object} element
 * @param {String} eventName
 * @param {Function} action
 */
MPButtonRender.addEvent = function (element, eventName, action) {
	if (element.addEventListener) {
		element.addEventListener (eventName, action, false);
	} else if (element.attachEvent) {
		element.attachEvent ("on"+eventName, action);
	} else {
		return false;
	}
	
	return true;
};

/**
 * Remueve la asociacion de un evento a un elemento dado
 * 
 * @param {Object} element
 * @param {String} eventName
 * @param {Function} action
 */
MPButtonRender.removeEvent = function (element, eventName, action) {
	if (element.removeEventListener) {
		element.removeEventListener (eventName, action, false);
	} else if (element.detachEvent) {
		element.detachEvent ("on"+eventName, action);
	} else {
		return false;
	}
	
	return true;
};

String.prototype.trim = function () {
	return this.replace(/^\s+|\s+$/, '');
};

Array.prototype.indexOf = function (o) {
	var returnIndex = -1;
	
	for (var i = 0; i < this.length; i++) {
		if (this[i] == o) {
			returnIndex = i;
			break;
		}
	}
	
	return returnIndex;
};

/**
 * Metodo que devuelve el tamanio de la ventana actual
 */
window.size = function(){
    var w = 0;
    var h = 0;

    if (!window.innerWidth) {
        if (!(document.documentElement.clientWidth == 0)) {
            w = document.documentElement.clientWidth;
            h = document.documentElement.clientHeight;
        }
        else {
            w = document.body.clientWidth;
            h = document.body.clientHeight;
        }
    }
    else {
        w = window.innerWidth;
        h = window.innerHeight;
    }
    return {width: w, height: h};
};

/**
 * Metodo que devuelve la posicion para centrar un elemento de w,h dimensiones en la ventana
 */
window.center = function(whObj, useScrollOffset){
	useScrollOffset = useScrollOffset === true;
	
	if (whObj == null || whObj.width == null || whObj.height == null) {
		whObj = {
			width: 0,
			height: 0
		};
	}
	
	var _x = 0;
	var _y = 0;
	var offsetX = 0;
	var offsetY = 0;
	
	if (useScrollOffset) {
		if (!window.pageYOffset) {
			if (!(document.documentElement.scrollTop == 0)) {
				offsetY = document.documentElement.scrollTop;
				offsetX = document.documentElement.scrollLeft;
			}
			else {
				offsetY = document.body.scrollTop;
				offsetX = document.body.scrollLeft;
			}
		}
		else {
			offsetX = window.pageXOffset;
			offsetY = window.pageYOffset;
		}
	}

    _x = ((this.size().width - whObj.width) / 2) + offsetX;
    _y = ((this.size().height - whObj.height) / 2) + offsetY;
    return {
        x: _x,
        y: _y
    };
};

/**
 * Metodo que devuelve la version de IExplorer
 * -1 = No Explorer
 */
MPButtonRender.getIEVersion = function () {
	if (MPButtonRender.IEVersion == null) {
		var rv = -1;
		if (navigator.appName == 'Microsoft Internet Explorer') {
			var ua = navigator.userAgent;
			var re = new RegExp ("MSIE ([0-9]{1,}[\.0-9]{0,})");
			if (re.exec (ua) != null) {
				rv = parseFloat (RegExp.$1);
			}
		}
		MPButtonRender.IEVersion = rv;
	}
	return MPButtonRender.IEVersion;
}

/* CSS ***************************************************************************************************/

/**
 * Clase que representa un objeto de definicion de CSS. Se le puede especificar dependencia de otro objeto.
 * 
 * @param {String} dependency
 */
function MPCSSObject (dependency) {
	this.dependency = dependency;
	this.attributes = new Object ();
}
MPCSSObject.prototype.type = "MPCSSObject";

/**
 * Metodo que genera el codigo CSS de acuerdo al status y valor de dependencia (opcional) especificado
 * 
 * @param {String} status
 * @param {String} depValue
 */
MPCSSObject.prototype.getCSS = function (status, depValue) {
	if (status == null) {
		status = "normal";
	}
	
	var returnCSS = "";

	if (this.attributes[status] != null) {
		for (var f = 0; f < this.attributes[status].length; f++) {
			var name = this.attributes[status][f].name;
			var value = this.attributes[status][f].value;
			
			if (this.dependency != null && MPButtonRender.styles[this.dependency] != null) {
				if (MPButtonRender.styles[this.dependency][depValue] == null) {
					depValue = "DEF";
				}
				var values = value.split (/[,;]/);
				if (values.length > 1) {
					for (var v = 0; v < values.length; v++) {
						var pair = values[v].split ("=");
						if (pair.length != 2) {
							continue;
						}
						
						if (pair[0].trim().toLowerCase () == depValue.toLowerCase ()) {
							value = pair[1];
							break;
						}
					}
				}
			}
			
			returnCSS += name + ": " + value + ";";
		}
	}
	
	return returnCSS;
};

/**
 * Metodo para agregar una definicion de CSS.
 * 
 * @param {String} attribute
 * @param {String} status(optional)
 * @param {String} value
 */
MPCSSObject.prototype.add = function () {
	var attribute = null;
	var status = null;
	var value = null;

	if (arguments.length < 2 || arguments.length > 3) {
		return;
	}
	
	if (arguments.length == 2) {
		attribute = arguments[0];
		value = arguments[1];
	}
	
	if (arguments.length == 3) {
		attribute = arguments[0];
		status = arguments[1].replace(":", "");
		value = arguments[2];
	}
	
	if (status == null) {
		status = "normal";
	}
	
	if (this.attributes[status] == null) {
		this.attributes[status] = new Array ();
	}
	
	this.attributes[status].push (new MPCSSAttribute (attribute, value));
};

/**
 * Clase que representa un atributo de CSS.
 * 
 * @param {String} name
 * @param {String} value
 */
function MPCSSAttribute (name, value) {
	this.name = name;
	this.value = value;
}
MPCSSAttribute.prototype.type = "MPCSSAttribute";

/**
 * Metodo que inyecta las definiciones de CSS generadas en el HTML del usuario.
 * 
 * @param {String} className
 * @param {String} styleBody
 */
MPButtonRender.addCSS = function (groupType, className, styleBody) {
	if (document.styleSheets != null) {
		if (MPButtonRender.styleSheets == null) {
			MPButtonRender.styleSheets = new Object ();
		}
		
		if (MPButtonRender.styleSheets[groupType] == null) {
			var mpStyleSheet = document.createElement('style');
			mpStyleSheet.type = 'text/css';
			document.getElementsByTagName("head")[0].appendChild(mpStyleSheet);
			
			MPButtonRender.styleSheets[groupType] = mpStyleSheet.sheet || mpStyleSheet.styleSheet;
		}

		if (MPButtonRender.styleSheets[groupType].addRule) {
			MPButtonRender.styleSheets[groupType].addRule("." + className, styleBody);
		} else {
			MPButtonRender.styleSheets[groupType].insertRule("." + className + " {" + styleBody + "} ", MPButtonRender.styleSheets[groupType].cssRules.length);
		}
	}
};

/**
* INICIO Definiciones de CSS.
*/

/**
 * Clase que representa una configuracion de un grupo de CSS.
 * 
 * @param {String} groupType
 * @param {Array} elements
 */
function MPVisualGroup (groupType, elements) {
	this.groupType = groupType;
	this.elements = elements;
}

/**
 * Metodo que permite obtener del className el valor correspondiente a un grupo determinado.
 * 
 * @param {String} className
 */
MPVisualGroup.prototype.getData = function (className) {
	if (this.elements == null || this.elements.length <= 0) {
		return "";
	}
	
	var regex = new RegExp ("-(" + this.elements.join ("|") + ")-", "g");
	
	var match = regex.exec ("-" + className.toLowerCase() + "-");
	if (match != null && match.length > 0) {
		return match[1];
	} else {
		return "";
	}
};

/**
 * Especificacion de grupos donde se van a definir los CSS, a que tipo pertenecen y que clases incluyen.
 * Para agregar un grupo, debe agregarse la definicion en esta lista.
 */
MPButtonRender.visualGroups = new Object ();
MPButtonRender.visualGroups.color = new MPVisualGroup ("base", ["blue", "orange", "red", "green", "lightblue", "grey"]);
MPButtonRender.visualGroups.size = new MPVisualGroup ("style", ["l", "m", "s"]);
MPButtonRender.visualGroups.font = new MPVisualGroup ("style", ["ar", "ge", "tr"]);
MPButtonRender.visualGroups.shape = new MPVisualGroup ("style", ["sq", "rn", "ov"]);
MPButtonRender.visualGroups.logo = new MPVisualGroup ("extra", ["arall", "aron", "mxall", "mxon"]);

/**
 * Grupos donde se van a definir los CSS
 * Para agregar un grupo, debe agregarse la definicion en esta lista.
 */
MPButtonRender.styles = new Object ();
MPButtonRender.styles.base = new Object ();
MPButtonRender.styles.color = new Object ();
MPButtonRender.styles.size = new Object ();
MPButtonRender.styles.font = new Object ();
MPButtonRender.styles.shape = new Object ();
MPButtonRender.styles.logo = new Object ();

MPButtonRender.defaultStyle = "base"; // Estilo por defecto. Se aplica a todos los botones.

/**
 * Definicion de estilos:
 *
 * MPButtonRender.styles.[GRUPO].common = new MPCSSObject ();
 *		-> Estilos comunes a todo el grupo
 * MPButtonRender.styles.[GRUPO].[NOMBRE_ESTILO] = new MPCSSObject ([GRUPO_DEPENDENCIA]); 
 *		-> Se pueden especificar valores para los atributos que dependan de otra definicion
 *		-> Se debe especificar solo el GRUPO del cual depende
 * MPButtonRender.styles.[GRUPO].[NOMBRE_ESTILO].add ("[ATRIBUTO_CSS]", "[VALOR]");
 * MPButtonRender.styles.[GRUPO].[NOMBRE_ESTILO].add ("[ATRIBUTO_CSS]", "[STATUS(:hover, :link, :active, etc.)]", "[VALOR]");
 * MPButtonRender.styles.[GRUPO].[NOMBRE_ESTILO].add ("[ATRIBUTO_CSS]", "[DEP]=[VALOR],[DEP]=[VALOR],[DEP]=[VALOR]...DEF=[VALOR_POR_DEFECTO]");
 *		-> De acuerdo al GRUPO_DEPENDENCIA, se pueden especificar distintos VALOR para cada DEP (NOBRE_ESTILO en el GRUPO_DEPENDENCIA)
 */

////// BASE
MPButtonRender.styles.base.common = new MPCSSObject ();
MPButtonRender.styles.base.common.add ("cursor", "pointer");

MPButtonRender.styles.base.common.add ("display", "inline-block");
MPButtonRender.styles.base.common.add ("margin", "10px");
MPButtonRender.styles.base.common.add ("font-weight", "normal");
MPButtonRender.styles.base.common.add ("text-decoration", "none");
MPButtonRender.styles.base.common.add ("text-decoration", ":hover", "none");
MPButtonRender.styles.base.common.add ("font-size", "20px");
MPButtonRender.styles.base.common.add ("line-height", "40px");
MPButtonRender.styles.base.common.add ("padding", "0px 20px");

////// COLOR
MPButtonRender.styles.color.common = new MPCSSObject ("size");
MPButtonRender.styles.color.common.add ("color", ":link", "#fff");
MPButtonRender.styles.color.common.add ("background-repeat", "repeat-x");
MPButtonRender.styles.color.common.add ("background-position", "0 0");
MPButtonRender.styles.color.common.add ("background-position", ":hover", "S=0 -470px,M=0 -300px,L=0 -80px,DEF=0 -80px");
MPButtonRender.styles.color.common.add ("background-position", ":active", "S=0 -520px,M=0 -360px,L=0 -160px,DEF=0 -120px");



////// blue
MPButtonRender.styles.color.blue = new MPCSSObject ();
MPButtonRender.styles.color.blue.add ("background", "url(https://www.mercadopago.com/org-img/MP3/payButton/assets/MP-payButton-blue.png)");
MPButtonRender.styles.color.blue.add ("background-color", "#28536F");
MPButtonRender.styles.color.blue.add ("background-color", ":hover", "#2F719D");
MPButtonRender.styles.color.blue.add ("background-color", ":active", "#326689");
MPButtonRender.styles.color.blue.add ("color", "#fff");
MPButtonRender.styles.color.blue.add ("color", ":visited", "#fff");
MPButtonRender.styles.color.blue.add ("color", ":hover", "#fff");
MPButtonRender.styles.color.blue.add ("color", ":active", "#fff");
MPButtonRender.styles.color.blue.add ("border", "1px solid #293E75");
MPButtonRender.styles.color.blue.add ("text-shadow", "1px 1px #293E75");

	

////// orange
MPButtonRender.styles.color.orange = new MPCSSObject ();
MPButtonRender.styles.color.orange.add ("background", "url(https://www.mercadopago.com/org-img/MP3/payButton/assets/MP-payButton-orange.png)");
MPButtonRender.styles.color.orange.add ("background-color", "#F27126");
MPButtonRender.styles.color.orange.add ("color", "#fff");
MPButtonRender.styles.color.orange.add ("color", ":visited", "#fff");
MPButtonRender.styles.color.orange.add ("color", ":hover", "#fff");
MPButtonRender.styles.color.orange.add ("color", ":active", "#fff");
MPButtonRender.styles.color.orange.add ("border", "1px solid #F67C41");
MPButtonRender.styles.color.orange.add ("text-shadow", "1px 1px #F67C41");	

////// red
MPButtonRender.styles.color.red = new MPCSSObject ();
MPButtonRender.styles.color.red.add ("background", "url(https://www.mercadopago.com/org-img/MP3/payButton/assets/MP-payButton-red.png)");
MPButtonRender.styles.color.red.add ("background-color", "#C12020");
MPButtonRender.styles.color.red.add ("color", "#fff");
MPButtonRender.styles.color.red.add ("color", ":hover", "#fff");
MPButtonRender.styles.color.red.add ("color", ":visited", "#fff");
MPButtonRender.styles.color.red.add ("color", ":active", "#fff");
MPButtonRender.styles.color.red.add ("border", "1px solid #CC1B17");
MPButtonRender.styles.color.red.add ("text-shadow", "1px 1px #CC1B17");	


////// green
MPButtonRender.styles.color.green = new MPCSSObject ();
MPButtonRender.styles.color.green.add ("background", "url(https://www.mercadopago.com/org-img/MP3/payButton/assets/MP-payButton-green.png)");
MPButtonRender.styles.color.green.add ("background-color", "#077574");
MPButtonRender.styles.color.green.add ("color", "#fff");
MPButtonRender.styles.color.green.add ("color", ":visited", "#fff");
MPButtonRender.styles.color.green.add ("color", ":hover", "#fff");
MPButtonRender.styles.color.green.add ("color", ":active", "#fff");
MPButtonRender.styles.color.green.add ("border", "1px solid #0B898B");
MPButtonRender.styles.color.green.add ("text-shadow", "1px 1px #0B898B");	

////// lightblue
MPButtonRender.styles.color.lightblue = new MPCSSObject ();
MPButtonRender.styles.color.lightblue.add ("background", "url(https://www.mercadopago.com/org-img/MP3/payButton/assets/MP-payButton-lightblue.png)");
MPButtonRender.styles.color.lightblue.add ("background-color", "#B8D2EB");
MPButtonRender.styles.color.lightblue.add ("background-color", ":hover", "#D9E7F4");
MPButtonRender.styles.color.lightblue.add ("background-color", ":active", "#E8F8FD");
MPButtonRender.styles.color.lightblue.add ("color", "#215181");
MPButtonRender.styles.color.lightblue.add ("color", ":link", "#215181");
MPButtonRender.styles.color.lightblue.add ("color", ":visited", "#215181");
MPButtonRender.styles.color.lightblue.add ("color", ":hover", "#215181");
MPButtonRender.styles.color.lightblue.add ("color", ":active", "#215181");
MPButtonRender.styles.color.lightblue.add ("border", "1px solid #8DB7E9");
//MPButtonRender.styles.color.lightblue.add ("text-shadow", "1px 1px #8DB7E9");	


////// grey
MPButtonRender.styles.color.grey = new MPCSSObject ();
MPButtonRender.styles.color.grey.add ("background", "url(https://www.mercadopago.com/org-img/MP3/payButton/assets/MP-payButton-grey.png)");
MPButtonRender.styles.color.grey.add ("background-color", "#C5C5C5");
MPButtonRender.styles.color.grey.add ("color", "#333333");
MPButtonRender.styles.color.grey.add ("color", ":link", "#333333");
MPButtonRender.styles.color.grey.add ("color", ":visited", "#333333");
MPButtonRender.styles.color.grey.add ("color", ":hover", "#333333");
MPButtonRender.styles.color.grey.add ("color", ":active", "#333333");
MPButtonRender.styles.color.grey.add ("border", "1px solid #ADADAD");
//MPButtonRender.styles.color.grey.add ("text-shadow", "1px 1px #F67C41");	

////// SIZE
MPButtonRender.styles.size.l = new MPCSSObject ();
MPButtonRender.styles.size.l.add ("font-size", "20px");
MPButtonRender.styles.size.l.add ("line-height", "40px");
MPButtonRender.styles.size.l.add ("padding", "0px 20px");


MPButtonRender.styles.size.m = new MPCSSObject ();
MPButtonRender.styles.size.m.add ("font-size", "17px");
MPButtonRender.styles.size.m.add ("line-height", "30px");
MPButtonRender.styles.size.m.add ("padding", "0px 17px");


MPButtonRender.styles.size.s = new MPCSSObject ();
MPButtonRender.styles.size.s.add ("font-size", "14px");
MPButtonRender.styles.size.s.add ("line-height", "25px");
MPButtonRender.styles.size.s.add ("padding", "0px 14px");


////// FONT
MPButtonRender.styles.font.ar = new MPCSSObject ();
MPButtonRender.styles.font.ar.add ("font-family", "Arial");

MPButtonRender.styles.font.tr = new MPCSSObject ();
MPButtonRender.styles.font.tr.add ("font-family", "Trebuchet MS");

MPButtonRender.styles.font.ge = new MPCSSObject ();
MPButtonRender.styles.font.ge.add ("font-family", "Georgia");

////// SHAPE
MPButtonRender.styles.shape.sq = new MPCSSObject ();
MPButtonRender.styles.shape.sq.add ("border-radius", "0px");
MPButtonRender.styles.shape.sq.add ("-moz-border-radius", "0px");
MPButtonRender.styles.shape.sq.add ("-webkit-border-radius", "0px");

MPButtonRender.styles.shape.rn = new MPCSSObject ("size");
MPButtonRender.styles.shape.rn.add ("border-radius", "S=3px,M=5px,L=7px,DEF=7px");
MPButtonRender.styles.shape.rn.add ("-moz-border-radius", "S=3px,M=5px,L=7px,DEF=7px");
MPButtonRender.styles.shape.rn.add ("-webkit-border-radius", "S=3px,M=5px,L=7px,DEF=7px");

MPButtonRender.styles.shape.ov = new MPCSSObject ("size");
MPButtonRender.styles.shape.ov.add ("border-radius", "S=12px,M=15px,L=20px,DEF=7px");
MPButtonRender.styles.shape.ov.add ("-moz-border-radius", "S=13px,M=15px,L=20px,DEF=7px");
MPButtonRender.styles.shape.ov.add ("-webkit-border-radius", "S=13px,M=15px,L=20px,DEF=7px");

////// LOGO
MPButtonRender.styles.logo.common = new MPCSSObject ();
MPButtonRender.styles.logo.common.add ("background", "url(https://www.mercadopago.com/org-img/MP3/payButton/assets/MP-payButton-logos.png)");
MPButtonRender.styles.logo.common.add ("margin", "0 auto");

MPButtonRender.styles.logo.arall = new MPCSSObject ();
MPButtonRender.styles.logo.arall.add ("display", "block");
MPButtonRender.styles.logo.arall.add ("background-position", "0 -29px");
MPButtonRender.styles.logo.arall.add ("width", "137px");
MPButtonRender.styles.logo.arall.add ("height", "23px");

MPButtonRender.styles.logo.aron = new MPCSSObject ();
MPButtonRender.styles.logo.aron.add ("display", "block");
MPButtonRender.styles.logo.aron.add ("background-position", "0 -3px");
MPButtonRender.styles.logo.aron.add ("width", "111px");
MPButtonRender.styles.logo.aron.add ("height", "23px");

/**
 * FIN Definiciones de CSS.
 */

/**
 * Ejecucion del Render.
 */
MPButtonRender.doRender ();