// Check browser
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false

var DRAG_dragging;
var offX = 0;
var offY = 0;
var loadingImg = new Image();
loadingImg.src = '../_img/cargando_imagen.gif';

// Shows a picture in a formatted layer. If layer doesnīt exist already, create it.
function showPicture(imageUrl, title1, title2) {
	// Layer does not exist. So letīs create it!
	content = '<table border="0" cellspacing="0" cellpadding="0">';
	content += '<tr>';
	content += '<td width="1" height="1" background="../_img/marco_n.gif"><img src="../_img/espacio.gif" width="1" height="1"></td>';
	content += '<td width="1" height="1" background="../_img/marco_n.gif"><img src="../_img/espacio.gif" width="1" height="1"></td>';
	content += '<td width="1" height="1" background="../_img/marco_n.gif"><img src="../_img/espacio.gif" width="1" height="1"></td>';
	content += '</tr>';
	content += '<tr>';
	content += '<td width="1" height="1" background="../_img/marco_n.gif"><img src="../_img/espacio.gif" width="1" height="1"></td>';
	content += '<td valign=middle>';
	content += '<!-- interior inicio -->';
	content += '<table border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">';
	content += '<tr onMouseOver="setRowColor(this,\'#656565\')" onMouseOut="setRowColor(this,\'#000000\')">';
	content += '<td bgcolor="#000000"><div align="right"><img name="dragger" src="../_img/espacio.gif" width="270" height="12" border="0"></a>';
	content += '<a href="#" onClick="closeShowreel()"><img src="../_img/cerrar.gif" width="15" height="12" border="0" alt="close"></a></div>';
	content += '</td>';
	content += '</tr>';
	content += '<tr>';
	content += '<td><img src="_img/espacio.gif" width="1" height="5"></td>';
	content += '</tr>';
	content += '<tr>';
	content += '<td>';
	content += '<div align=center><img name="showreelImg" src="'+imageUrl+'" border="1" hspace="6"></div>';
	content += '</td>';
	content += '</tr>';
	content += '<tr>';
	content += '<td><img src="_img/espacio.gif" width="1" height="8"></td>';
	content += '</tr>';
	content += '<tr>';
	content += '<td>';
	content += '<table width="95%" border="0" cellspacing="0" cellpadding="0" align="center">';
	content += '<tr>';
	content += '<td valign="top"><img src="../_img/ventana_logo.gif" width="147" height="59" border="0"></td>';
	content += '<td width="129" valign="top" align="right">';

	if (title1 != "") {
		content += '<div id="showreel_t1" class="gris10bold">'+title1+'</div>';
	}
	if (title2 != "")
	{
		content += '<div id="showreel_t2" class="gris10normal">'+title2+'</div>';
	}

	content += '</td>';
	content += '</tr>';
	content += '</table>';
	content += '</td>';
	content += '</tr>';
	content += '</table>';
	content += '<!-- interior fin -->';
	content += '</td>';
	content += '<td width="1" height="1" background=../_img/marco_n.gif><img src=../_img/espacio.gif width=1 height=1></td>';
	content += '</tr>';
	content += '<tr>';
	content += '<td width="1" height="1" background="../_img/marco_n.gif"><img src="../_img/espacio.gif" width="1" height="1"></td>';
	content += '<td width="1" height="1" background="../_img/marco_n.gif"><img src="../_img/espacio.gif" width="1" height="1"></td>';
	content += '<td width="1" height="1" background="../_img/marco_n.gif"><img src="../_img/espacio.gif" width="1" height="1"></td>';
	content += '</tr>';
	content += '</table>';

	if (!checkLayer("showreel")) {
		if (ns4) {
			document.layers["showreel"] = new Layer(400)
			document.layers["showreel"].left = 40
			document.layers["showreel"].top = 100
			document.layers["showreel"].height = 300
			document.layers["showreel"].bgColor = "black"
			document.layers["showreel"].visibility = "show"
			document.layers["showreel"].document.open()
			document.layers["showreel"].document.write(content)
			document.layers["showreel"].document.close()
			document.layers["showreel"].document.images["dragger"].onmousedown=DRAG_begindrag;
			document.layers["showreel"].document.images["dragger"].onmouseup=DRAG_enddrag;
		} else if (ie4)	{
			content2 = '<div id="showreel" style="position:absolute; left:263px; top:24px; height:421px; z-index:10;">';
			content = content2 + content;
			content += '</div>';
			document.body.insertAdjacentHTML("beforeEnd",content);
			document.dragger.onmousedown=DRAG_begindrag;
			document.dragger.onmouseup=DRAG_enddrag;
		}
	}

	if (checkLayer("showreel") && ns4) {
		document.layers["showreel"].document.open()
		document.layers["showreel"].document.write(content)
		document.layers["showreel"].document.close()
		document.layers["showreel"].document.images["showreelImg"].src = loadingImg.src;
		document.layers["showreel"].visibility = "show";
		document.layers["showreel"].document.images["showreelImg"].src = imageUrl;
		document.layers["showreel"].document.images["dragger"].onmousedown=DRAG_begindrag;
		document.layers["showreel"].document.images["dragger"].onmouseup=DRAG_enddrag;
	} else if (ie4) {
		document.images["showreelImg"].src = loadingImg.src;
		showreel.style.visibility = "visible";
		document.images["showreelImg"].src = imageUrl;
		showreel_t1.innerText=title1;
		showreel_t2.innerText=title2;
	}
}


// Closes showreel layer
function closeShowreel() {
	if (ns4) {
		document.layers["showreel"].visibility = "hide";
	}
	else if (ie4) {
		showreel.style.visibility = "hidden";
	}
}


// Checks if layer is already created. Returns TRUE if exists, otherwise it returns FALSE
function checkLayer(layer) {
	if (ns4) {
		if (document.layers[layer]) {
			return true;
		} else {
			return false;
		}
	} else if (ie4) {
		if (document.all[layer]) {
			return true;
		} else {
			return false;
		}
	}
}

function DRAG_drag(e) {
	if (DRAG_dragging) {
		if (ie4) {
			mx=event.x;
			my=event.y;
			ob = document.all.showreel.style;
		} else {
			mx=e.pageX;
			my=e.pageY;
			ob = document.layers["showreel"];
		}
		ob.left = mx-offX;
		ob.top = my-offY;
		return false;
	} else {
		return true;
	}
}

function DRAG_begindrag(e){
	if (ie4) {
		ob = document.all.showreel;
		document.onmousemove=DRAG_drag;
		offX = event.x - parseInt(ob.style.left);
		offY = event.y - parseInt(ob.style.top);
	} else {
		ob = document.layers["showreel"];
		window.captureEvents(Event.MOUSEMOVE);
		window.onmousemove=DRAG_drag;
		offX = e.pageX - parseInt(ob.left);
		offY = e.pageY - parseInt(ob.top);
	}

	DRAG_dragging=true;
	return false;
}


function DRAG_enddrag(e){
	if (ie4)
	{
		document.onmousemove=null
	} else {
		window.releaseEvents(Event.MOUSEMOVE);
		window.onmousemove=null
	}
	DRAG_dragging=false;
	return false;
}