// JavaScript Document

var orangeOpen = false;
var closeOrange = true;
var currentOverlay = "";
var overZoom = false;

var overlays = new Array();

var moveOverlay = false;
var moveOffsetX = 0;
var moveOffsetY = 0;

var noImageURL = "/img/nophoto.gif";
var evt = null;
var maySelect = true;

var icons = new Array();
var tempX = 0;
var tempY = 0;

var req = null;

var imageLoaded=new Array();

function preLoadIcon(img){
	icons[img] = new Array();
	icons[img][0] = new Object();
	icons[img][0].src = "/img/user/ic_" + img + ".gif";
	icons[img][1] = new Object();
	icons[img][1].src = "/img/user/ic_" + img + "_white.gif";
}

var cumulativeOffset = function(element) {
    var valueT = 0, valueL = 0;
    do {
        valueT += element.offsetTop  || 0;
        valueL += element.offsetLeft || 0;
        element = element.offsetParent;
    } while (element);
        return [valueL, valueT];
}

function documentClick(e)
{
	
	evt = e || window.event;
	if(imageViewer && imageViewer.isZoomed() && !imageViewer.overZoom) {
	    imageViewer.zoomOut();
	}
	//if(orangeOpen && closeOrange){
	//
	//	closeOrangeOverlay();
	//}
}

function closeOrangeOverlay()
{
	if(currentOverlay != ""){
		if(currentOverlay == "send") overlays[currentOverlay][10].style.backgroundColor="#FFFFFF";
		else overlays[currentOverlay][10].style.backgroundColor="#FFF7D4";
		overlays[currentOverlay][10].style.color='#000000';
		if(overlays[currentOverlay][11]!= undefined){
			overlays[currentOverlay][11].src = icons[overlays[currentOverlay][12]][0].src;
		}

		var oWrapper = overlays[currentOverlay][0];
		oWrapper.style.visibility="hidden";
		orangeOpen = false;
		
		if(currentOverlay == "googlemap"){
			currentOverlay = "";
			//document.mapFrame.document.location.reload();
		}else if(currentOverlay == "video"){
			currentOverlay = "";
			//document.videoFrame.document.location.reload();
		}else{
			currentOverlay = "";
		}
	}
}

function getStyleClass (className) {
	if (document.all) {
		for (var s = 0; s < document.styleSheets.length; s++)
			for (var r = 0; r < document.styleSheets[s].rules.length; r++)
				if (document.styleSheets[s].rules[r].selectorText == '.' + className) return document.styleSheets[s].rules[r];
	}
  	else if (document.getElementById) {
		for (var s = 0; s < document.styleSheets.length; s++)
      		for (var r = 0; r < document.styleSheets[s].cssRules.length; r++)
        		if (document.styleSheets[s].cssRules[r].selectorText == '.' + className) return document.styleSheets[s].cssRules[r];
  	}
  	return null;
}


function showOrangeOverlay(obj, contentId, content,img,user,from_url,email,id, lat,lon){
	
	if(currentOverlay != contentId && orangeOpen){
		closeOrangeOverlay();
	}
	if(currentOverlay == contentId && orangeOpen){
		closeOrangeOverlay();
	} else {
		currentOverlay = contentId;
		var offset = cumulativeOffset(obj);
		var oL = offset[0];
		var oT = offset[1] + (obj.offsetHeight/2);
		if(overlays[content] == undefined){

			overlays[contentId] = new Array();
			var oWrapper = document.createElement("div");
			overlays[contentId][0] = oWrapper;

			oWrapper.style.position = "absolute";
			oWrapper.style.top="0px";
			oWrapper.style.left="0px";
			oWrapper.style.width="354px";
			oWrapper.style.visibility="hidden";
			oWrapper.className="no_print";//hide when printing
			document.body.appendChild(oWrapper);

			oContent = document.createElement("div");
			overlays[contentId][1] = oContent;

			oContent.style.backgroundColor="#FFA200";

			oButtons = document.createElement("div");
			overlays[contentId][2] = oButtons;

			oButtons.style.backgroundColor="#FFA200";
			oArrow = document.createElement("div");
			overlays[contentId][3] = oArrow;

			if(content == "send"){
				oArrow.style.position = "absolute";
				oWrapper.appendChild(oContent);
				oWrapper.appendChild(oButtons);
                oWrapper.appendChild(oArrow);
			 	
			 	oContent.innerHTML = getContent(content, user, from_url, email, id);
			 	oButtons.innerHTML = getButtons(content);
			 	oButtons.style.padding = "0px 0px 10px 0px";
			 	oButtons.style.textAlign="right";

			 	oArrow.innerHTML = "<img src=\"/img/user/orange_arrow_down.gif\"/>";
			 	oArrow.style.left = (oContent.offsetWidth - 38) + "px";
			 	oWrapper.style.top = oT - (oButtons.offsetHeight + oContent.offsetHeight + 25);
			 	oWrapper.style.left = oL - oContent.offsetWidth + (obj.offsetWidth/2) + 27;
			} else {
                if (content == "googlemap") {
                    oContent.style.width="516px";
                    oContent.style.height="345px";

                } else if (content!="mail" && content!="send" && content!="chat") { // so it it is telephone
                    //oContent.style.width="388px";
                    oWrapper.style.width="auto";
                    oContent.style.width="auto";
                }
				oArrow.style.position = "absolute";
				oArrow.style.top="0px";
				oArrow.style.left="0px";
				oArrow.style.height="19px";

				oWrapper.appendChild(oContent);
				oWrapper.appendChild(oButtons);
				oWrapper.appendChild(oArrow);

			 	oContent.innerHTML = getContent(content,user,from_url,email,id,lat,lon);
			 	oButtons.innerHTML = getButtons(content);

			 	oButtons.style.top = oContent.offsetHeight + "px";
			 	oButtons.style.left = "0px";
			 	oButtons.style.padding = "0px 0px 10px 0px";
			 	oButtons.style.width= oContent.offsetWidth + "px";
			 	oButtons.style.textAlign="right";
			 	oArrow.innerHTML = "<img src=\"/img/user/orange_arrow.gif\">";
			 	oArrow.style.left = oContent.offsetWidth + "px";
			 	oArrow.style.top = (oButtons.offsetHeight + oContent.offsetHeight-19)/2;
			 	oWrapper.style.top = oT - (oButtons.offsetHeight + oContent.offsetHeight)/2;
			 	oWrapper.style.left = oL - 20 - oContent.offsetWidth;
                if (content == "googlemap") {
                    if (navigator.userAgent.indexOf('Firefox') == -1 && navigator.userAgent.indexOf('Safari') == -1) {
                        //oContent.document.mapFrame.document.location.reload();
                    }
                }
				if (content == "video") {
                    if (navigator.userAgent.indexOf('Firefox') == -1 && navigator.userAgent.indexOf('Safari') == -1) {
                        //oContent.document.videoFrame.document.location.reload();
                    }
                }
			}

		 	oWrapper.style.visibility="visible";
		 	oWrapper.onmouseover = function(){ closeOrange = false;}
		 	oWrapper.onmouseout = function(){ closeOrange = true;}

			overlays[contentId][4] = false;
			overlays[contentId][10] = obj;
			if(img!=""){
				overlays[contentId][11] = document.getElementById(img);
				overlays[contentId][12] = img;
			}
		} else {
			var oWrapper = overlays[contentId][0];
			var oContent = overlays[contentId][1];
			var oArrow = overlays[contentId][3];
			var oButtons = overlays[contentId][2];


			if(!overlays[contentId][4]){
				if(content == "send"){
			 		oWrapper.style.top = oT - (oButtons.offsetHeight + oContent.offsetHeight + 25);
				 	oWrapper.style.left = oL - oContent.offsetWidth + (obj.offsetWidth/2) + 27;
			 	} else {

				 	oButtons.style.top = oContent.offsetHeight + "px";
				 	oArrow.style.left = oContent.offsetWidth + "px";
				 	oArrow.style.top = (oButtons.offsetHeight + oContent.offsetHeight-19)/2;
			 		oWrapper.style.top = oT - (oButtons.offsetHeight + oContent.offsetHeight)/2;
			 		oWrapper.style.left = oL - 20 - oContent.offsetWidth;
			 	}

			}
			oWrapper.style.visibility="visible";

		}

		overlays[contentId][0].style.zIndex=100;
		overlays[contentId][10].style.backgroundColor='#FFA200';
		overlays[contentId][10].style.color='#FFFFFF';
		if(overlays[contentId][11]!= undefined) overlays[contentId][11].src = icons[overlays[contentId][12]][1].src;
	 	orangeOpen = true;
	}
}


function moveMe(b)
{
	if(b){
		if(currentOverlay!=""){
    		var offset = cumulativeOffset(overlays[currentOverlay][0]);
			moveOffsetX = tempX - offset[0];
			moveOffsetY = tempY - offset[1];
		}
		overlays[currentOverlay][4] = true;
		overlays[currentOverlay][3].style.visibility="hidden";
	}
	moveOverlay = b;
	maySelect = !b;
}

function doMove(e)
{
	evt = e || window.event;
	var e = evt; //document.all?window.event:evt;
	if ( e.clientX ) {
		tempX = e.clientX + document.body.scrollLeft;
		tempY = e.clientY + document.body.scrollTop;
	}
	if (e.pageX) {
		tempX = e.pageX;
		tempY = e.pageY;
	}
	if(moveOverlay){
		if(currentOverlay!=""){
			var oWrapper = overlays[currentOverlay][0];
			oWrapper.style.top = (tempY - moveOffsetY) + "px";
			oWrapper.style.left = (tempX - moveOffsetX) + "px";
		}
	}
}

function echeck(str) {
    if (/^\w+([\.-]?\w*)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/.test(str)) {
        return true;
    }
    return false;
}

function submitEmailForm(val) {
   if (val == 1) {
        if (!echeck(document.mailAdvertiser.textfieldfrom.value)) {
            alert("Veuillez indiquer une adresse e-mail valide");
            return false;
        }
        if (document.mailAdvertiser.textarea.value == "") {
            alert("Veuillez saisir votre message");
            return false;
        }
        document.mailAdvertiser.submit();
   } else if (val == 2) {
        if (!echeck(document.mailFriend.textfieldfrom.value)) {
            alert("Veuillez indiquer une adresse e-mail valide");
            document.mailFriend.textfieldfrom.focus();
            return false;
        } else if (!echeck(document.mailFriend.textfield.value)) {
            alert("Veuillez indiquer une adresse e-mail valide");
            document.mailFriend.textfield.focus();
            return false;
        }
        document.mailFriend.submit();
   }
}

function getContent(content, user, from_url, email, id, lat, lon){
	
	switch(content){
		case 'mail':
			return "<form action='/mailAdvertiser.php' method='POST' name='mailAdvertiser' onsubmit='return false;'><input type='hidden' name='id' value='"+id+"'><input type='hidden' name='from_url' value='"+from_url+"'/><input type='hidden' name='Submit2' value='send' /><table border=0 cellspacing=0 cellpadding=0 width='100%'><tr><td class='contentTitle moveCursor' onmousedown='moveMe(true)' onmouseup='moveMe(false)'>&nbsp;</td><td class='contentTitle moveCursor' width='20' onmousedown='moveMe(true)' onmouseup='moveMe(false)'><img src='/img/user/ic_mail_white.gif'></td><td class='contentTitle moveCursor' onmousedown='moveMe(true)' onmouseup='moveMe(false)'>Envoyer un message &agrave; '"+user+"' :</td><td class='contentTitle moveCursor' onmousedown='moveMe(true)' onmouseup='moveMe(false)'>&nbsp;</td></tr><tr><td>&nbsp;</td><td colspan='2' class='contentText' align='right'></td><td>&nbsp;</td></tr><tr><td colspan='4'></td></tr><tr><td>&nbsp;</td><td colspan='2' class='contentText'>Votre message:</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td colspan=2><textarea rows=7  style='width:100%;' name='textarea'></textarea></td><td></td></tr><tr><td>&nbsp;</td><td colspan='2'>Votre adresse e-mail:</td></tr><tr><td>&nbsp;</td><td colspan='3'><input name='textfieldfrom' type='text' size='25' value='"+email+"' /></td></tr></table>";
		case 'send':
			return "<form style='margin:0px;padding:0px;display:inline;' action='/mailFriend.php' method='POST' name='mailFriend' onsubmit='return false;'><input type='hidden' name='id' value='"+id+"'/><input type='hidden' name='from_url' value='"+from_url+"'/><input type='hidden' name='Submit2' value='send' /><table border=0 cellspacing=0 cellpadding=0 width='100%'><tr><td class='contentTitle moveCursor' onmousedown='moveMe(true)' onmouseup='moveMe(false)'>&nbsp;</td><td class='contentTitle moveCursor' width='20' onmousedown='moveMe(true)' onmouseup='moveMe(false)'><img src='/img/user/ic_mail_white.gif'/></td><td class='contentTitle moveCursor' onmousedown='moveMe(true)' onmouseup='moveMe(false)'>Envoyer cette annonce &agrave; un ami:</td><td class='contentTitle moveCursor' onmousedown='moveMe(true)' onmouseup='moveMe(false)'>&nbsp;</td></tr><tr><td>&nbsp;</td><td colspan='2' class='contentText' align='right'>&nbsp;</td><td>&nbsp;</td></tr><tr><td colspan='4'></td></tr><tr><td>&nbsp;</td><td colspan='2' class='contentText'>Adresse e-mail de votre ami:</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td colspan=2><input type='text' size='25' name='textfield'/></td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td colspan='2' class='contentText'>Votre message:</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td colspan=2><textarea rows=7 name='textarea' style='width:100%;'></textarea></td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>Votre adresse e-mail:</td></tr><tr><td></td><td colspan='3'><input name='textfieldfrom' type='text' size='25' value='"+email+"' /></td></tr></table>";
		case 'googlemap':
			code="<table border=0 cellspacing=0 cellpadding=0 width='100%' height='100%'><tr><td class='contentTitle moveCursor' onmousedown='moveMe(true)' onmouseup='moveMe(false)'>&nbsp;</td><td class='contentTitle moveCursor' width='20' onmousedown='moveMe(true)' onmouseup='moveMe(false)'><img src='/img/user/ic_map_white.gif'></td><td class='contentTitle moveCursor' onmousedown='moveMe(true)' onmouseup='moveMe(false)'>Carte:</td><td class='contentTitle moveCursor' onmousedown='moveMe(true)' onmouseup='moveMe(false)'>&nbsp;</td></tr>";
            code += "<tr><td>&nbsp;</td><td colspan='2' class='contentText' align='right'>&nbsp;</td><td>&nbsp;</td></tr>";
            code += "<tr><td>&nbsp;</td><td align='center' colspan='2'><iframe name='mapFrame' id='mapFrame' frameborder='0' src='/map.php?lat="+lat+"&amp;lon="+lon+"' scrolling='no' class='contentMap'></iframe></td><td>&nbsp;</td></tr></table>";
            return code;
		case 'video' :
			code="<table border=0  cellspacing=0 cellpadding=0><tr><td class='contentTitle moveCursor' onmousedown='moveMe(true)' onmouseup='moveMe(false)'>&nbsp;</td><td class='contentTitle moveCursor' width='20' onmousedown='moveMe(true)' onmouseup='moveMe(false)'><img src='/img/user/ic_video_white.gif'></td><td class='contentTitle moveCursor' onmousedown='moveMe(true)' onmouseup='moveMe(false)'>Vid&eacute;o:</td><td class='contentTitle moveCursor' onmousedown='moveMe(true)' onmouseup='moveMe(false)'>&nbsp;</td></tr>";
            code += "<tr><td>&nbsp;</td><td colspan='2' class='contentText' align='right'>&nbsp;</td><td>&nbsp;</td></tr>";
            code += "<tr><td>&nbsp;</td><td align='center' colspan='2'><iframe name='videoFrame' id='videoFrame' frameborder='0' src='/video.php?idads="+id+"' scrolling='no' class='contentVideo'></iframe></td><td>&nbsp;</td></tr></table>";
			return code;
		default:
			return "<table border=0 cellspacing=0 cellpadding=5 width='390'><tr><td nowrap><font style='font-size:64px;'>" + content + "</font></td></tr></table>";
	}
}

function getButtons(content){
	switch(content){
		case 'mail':
			return "<a href='javascript:closeOrangeOverlay();' class='whiteButton'>Fermer</a>&nbsp;&nbsp;&nbsp;<a href='#' onclick='submitEmailForm(1);' class='whiteButton'>Envoyer</a>&nbsp;&nbsp;&nbsp;</form>";
		case 'send':
			return "<a href='javascript:closeOrangeOverlay();' class='whiteButton'>Fermer</a>&nbsp;&nbsp;&nbsp;<a href='#' onclick='submitEmailForm(2);' class='whiteButton'>Envoyer</a>&nbsp;&nbsp;&nbsp;</form>";
		default:
			return "<center><a href='javascript:closeOrangeOverlay();' class='whiteButton'>Fermer</a></center>";
	}
}

document.onmousedown = function(evt) { documentClick(evt);return maySelect; };
document.onmousemove = function(evt) { doMove(evt); };
document.onselectstart = function(){ return maySelect;};

////////////////////////////////////////////////
var ImageViewer = Class.create();
ImageViewer.prototype = {
    images: [],
    round: false,
    detailImage: $('mediumImage'),
    zoomDiv: null,
    current:null,
    steps:10,
    freq:25,
    timer: null,
    direction: 1,
    initialize: function () {
    },
    add: function (src) {
        var i = {
            list: new Image(),
            detail: new Image(),
            big: new Image()
        };
        i.list.src = src;
		i.detail.src = src.replace('list', 'detail').replace('_list', '_detail');
		i.big.src = src.replace('list', 'big').replace('_list', '_big');
        i.big.onerror = function() {
            this.src='/img/nophoto400x400.gif';
        }
        
        this.images.push(i);
        if (!this.current) {
            this.current = 0;
        }
    },
    makeZoomDiv: function () {
        var div = document.createElement('div');
        div.id = 'zoomDiv';
        div.className = 'zoomDiv';
        var self = this;
        div.onmouseover = function() {self.overZoom = true;}
        div.onmouseout = function() {self.overZoom = false;}

        document.body.appendChild(div);
        this.zoomDiv = div;
        // big image
        this.bigImage = document.createElement("img");
        this.bigImage.src=this.images[this.current].big.src;
        this.bigImage.className = 'big';
        this.bigImage.style.position = 'absolute';
        this.bigImage.onclick = this.zoomOut.bind(this);
        this.bigImage.onerror = function() {
            this.src='/img/nophoto400x400.gif';
        }
        this.zoomDiv.appendChild(this.bigImage);

        // zoomout button
        this.zoomOutButton = document.createElement("img");
        this.zoomOutButton.src='/img/ic_zoomout.gif';
        this.zoomOutButton.className = 'zoomout';
        this.zoomOutButton.onclick = this.zoomOut.bind(this);

        this.zoomDiv.appendChild(this.zoomOutButton);

        // next button
        this.nextButton = document.createElement("img");
        this.nextButton.src='/img/ic_next.gif';
        this.nextButton.className = 'next';
        this.nextButton.onclick = this.next.bind(this);
        this.zoomDiv.appendChild(this.nextButton);

        // next button
        this.prevButton = document.createElement("img");
        this.prevButton.src='/img/ic_prev.gif';
        this.prevButton.className = 'prev';
        this.prevButton.onclick = this.prev.bind(this);
        this.zoomDiv.appendChild(this.prevButton);
       
        this.stepX = parseInt((this.zoomDiv.offsetWidth - this.detailImage.offsetWidth)/this.steps);
        this.stepY = parseInt((this.zoomDiv.offsetHeight - this.detailImage.offsetHeight)/this.steps);
		var offset = cumulativeOffset(this.detailImage);
		
        this.zoomDiv.style.top = offset[1] + "px";
        this.zoomDiv.style.left = offset[0] - (this.zoomDiv.offsetWidth - this.detailImage.offsetWidth)/2 + "px";

    	this.bigImage.style.height = this.detailImage.offsetHeight + "px";
    	this.bigImage.style.width = this.detailImage.offsetWidth + "px";
    	this.bigImage.style.left = (this.zoomDiv.offsetWidth - this.detailImage.offsetWidth)/2;
    },
    zoomIn: function () {
        if (!this.zoomDiv) {
            this.makeZoomDiv();
        }
        
    	addClass(this.zoomDiv, 'zooming');
        this.zoomDiv.style.display = 'block';

        this.showImage(this.current);
        clearInterval(this.timer);
        this.direction = 1;
        this.timer = setInterval(this.zooming.bind(this), this.freq);
    },
    isZoomed: function () {
        return (this.zoomDiv && this.zoomDiv.style.display != 'none');// && !hasClass(this.zoomDiv, 'zooming')
    },
    zoomOut: function () {
        addClass(this.zoomDiv, 'zooming');
        this.direction = -1;
        clearInterval(this.timer);
        this.timer = setInterval(this.zooming.bind(this), this.freq);
    },
    next: function () {
        this.showImage(this.current+1);
    },
    prev: function () {
        this.showImage(this.current-1);
    },
    showImage: function (i) {
        var current = $('thumb_'+this.current);
        if (current) {
            removeClass(current, 'selected');
        }
        this.current = i%this.images.length;
        this.detailImage.src = this.images[this.current].detail.src;

        if (this.zoomDiv) {
            this.bigImage.visibility = 'hidden';
            this.bigImage.onload = function () {
                this.style.visibility = 'visible';
            }
            this.bigImage.src = this.images[this.current].big.src;
            this.nextButton.style.display = (this.current == (this.images.length -1) || this.round) ? 'none': 'block';
            this.prevButton.style.display = (this.current == 0 || this.round) ? 'none': 'block';
        }
        var current = $('thumb_'+this.current);
        if (current) {
            addClass($('thumb_'+this.current), 'selected');
        }
    },
    zooming: function () {
        if (!this.locked) {
            this.locked = true;
            if (this.direction < 0) {
                //zooming out
            	if (this.bigImage.offsetWidth <= this.detailImage.offsetWidth || this.bigImage.offsetHeight <= this.detailImage.offsetHeight) {
                    // the end...
                    clearInterval(this.timer);
                    var iW = this.detailImage.offsetWidth;
                    var iH = this.detailImage.offsetHeight;
                    var zL = (this.zoomDiv.offsetWidth - this.detailImage.offsetWidth)/2;
                    
                    removeClass(this.zoomDiv, 'zooming');
                    this.zoomDiv.style.display = 'none';
            	} else {
            	    var iW = this.bigImage.offsetWidth - this.stepX;
            	    var iH = this.bigImage.offsetHeight - this.stepY;
            	    var zL =  this.bigImage.offsetLeft + this.stepX/2;
            	}
            } else {
                //zooming in
                if(this.bigImage.offsetWidth >= this.zoomDiv.offsetWidth || this.bigImage.offsetHeight >= this.zoomDiv.offsetHeight) {
                    // the end...
            	    var iW = this.zoomDiv.offsetWidth;
            	    var iH = this.zoomDiv.offsetHeight;
            	    var zL = 0;
                    clearInterval(this.timer);
                    removeClass(this.zoomDiv, 'zooming');
            	} else {
            	    var iW = this.bigImage.offsetWidth + this.stepX;
            	    var iH = this.bigImage.offsetHeight + this.stepY;
            	    var zL =  this.bigImage.offsetLeft - this.stepX/2;
            	}
            }
    	    this.bigImage.style.height = iH+'px';
    	    this.bigImage.style.width = iW+'px';
    	    this.bigImage.style.left = zL+'px';            	
            this.locked = false;
        }
    }
}