//array imatges js
var capaServ;
var capaCtrl;

/*objecte servei*/
function service(img,pos_x,pos_y,mode){
	this.img = img;
	this.pos_x = pos_x;
	this.pos_y = pos_y;
	this.mode = mode;
}

/*objecte interactiu*/
function interactivo(){
	//propietats
	this.mapa = false;
	this.foto = false;
	this.serv = false;
	this.statusServ = false;
	this.mode = 'foto';
	this.listServices = new Array();
	
	//mčtodes
	this.setFoto = setFoto;
	this.setMapa = setMapa;
	this.setServ = setServ;
	this.setMode = setMode;
	this.setStatusServ = setStatusServ;
	this.setMapaUrl = setMapaUrl;
	this.setFotoUrl = setFotoUrl;
	this.addService = addService;
	this.refreshInteractive = refreshInteractive;
	this.switchBackground = switchBackground;
	this.refreshServices = refreshServices;
	
	this.haveFoto = haveFoto;
	this.haveMapa = haveMapa;
	this.haveServ = haveServ;
	this.haveServMode = haveServMode;
	this.getMode = getMode;
	this.getStatusServ = getStatusServ;		
	this.updateControlsBar = updateControlsBar;
	this.getMapaUrl = getMapaUrl;
	this.getFotoUrl = getFotoUrl;
}

//funciones de escritura
function setFoto(valor){
	this.foto = valor;
}
function setMapa(valor){
	this.mapa = valor;
}
function setServ(valor){
	this.serv = valor;
}

//switcheam mode, actualitzem barra i refrescam contingut
function setMode(valor){
	this.mode = valor;
}

function setMapaUrl(valor){
	this.mapaUrl = valor;
	this.setMapa(true);
}

function setFotoUrl(valor){
	this.fotoUrl = valor;
	this.setFoto(true);
}	

//activem/desactivem serveis, actualitzem barra i refrescam contingut
function setStatusServ(valor){
	this.statusServ = valor;
}

function addService(img,pos_x,pos_y,mode){
	this.listServices[this.listServices.length] = new service(img,pos_x,pos_y,mode);
	this.setServ(true);
}

function refreshInteractive(){
	this.updateControlsBar();
	this.refreshServices();
}

function switchBackground(){
	var aux;
	aux = document.getElementById("imgFondo");
	
	if (this.getMode()=='plano'){
		aux.style.background = 'url(\''+this.getMapaUrl()+'\')';
	} else {
		aux.style.background = 'url(\''+this.getFotoUrl()+'\')';
	}
}

function refreshServices(){
	var str_html='';
	
	if (this.haveServ()){
		if (this.getStatusServ()){
			
			str_html+='<div>';
			for (i=0;i<this.listServices.length;i++){
				ele = this.listServices[i];
				if ( ele.mode == this.getMode() ){
					str_html+='<div class="'+ele.img+' iconoServicioPlano" style="left:'+ele.pos_x+'px;top:'+ele.pos_y+'px;"></div>';
				}
			}
			str_html+='</div>';
			
		    //seteam la capa de serveis i posició
		    capaServ.innerHTML = str_html;
			capaServ.style.display = 'inline';
		} else {
		    //seteam la capa de serveis i posició
		    capaServ.innerHTML = str_html;
			capaServ.style.display = 'none';
		}
	}
}

//funciones de lectura
function haveFoto(){
	return this.foto;
}

function haveMapa(){
	return this.mapa;
}

function haveServ(){
	return this.serv;
}

function haveServMode(mode){
	for (i=0;i<this.listServices.length;i++){
		ele = this.listServices[i];
		if ( ele.mode == this.getMode() ){
			return true;
		}
	}
	return false;
}	

function getMode(){
	return this.mode;
}

function getStatusServ(){
	return this.statusServ;
}

function getMapaUrl(){
	return this.mapaUrl;
}

function getFotoUrl(){
	return this.fotoUrl;
}	

function updateControlsBar(){
	//cream html capa serveis
	var aux;
	var mapaclass, fotoclass, servclass;
	var servicios='';
	var foto='';
	var mapa='';
	var str_html='';
	
	this.switchBackground();

	if ( this.haveFoto() && this.haveMapa() ){	//si la playa tiene foto y mapa
		
		
		if (this.getMode()=='plano'){
			mapaclass='optOptionButtonOn';
			fotoclass='optOptionButtonOff';
		} else {
			mapaclass='optOptionButtonOff';
			fotoclass='optOptionButtonOn';		
		}
		mapa='<a onclick="javascript:objInt.setMode(\'plano\');objInt.refreshInteractive();" class="'+mapaclass+' optLink">plano</a>';
		foto='<a onclick="javascript:objInt.setMode(\'foto\');objInt.refreshInteractive();" class="'+fotoclass+' optLink">foto</a>';




	} else {

		if (this.getMode()=='plano'){
			mapaclass='optOptionButtonOn';
			fotoclass='optOptionButtonOff';
		} else {
			mapaclass='optOptionButtonOff';
			fotoclass='optOptionButtonOn';		
		}
	
	}
	
	if ( this.haveFoto() || this.haveMapa() ){	//si hay plano o foto
		
		if ( this.haveServMode(this.getMode) ){	//si la playa tiene servicios
			
			if (this.getStatusServ()){
				servclass='optCheckBoxOn';
			} else {
				servclass='optCheckBoxOff';
			}
			servicios='<a onclick="javascript:objInt.setStatusServ( ! objInt.getStatusServ() );objInt.refreshInteractive();" class="'+servclass+' optLink">servicios</a>';
		}
	}
	
	str_html+='<span class="controlInteractivo">';
	str_html+=mapa;
	str_html+=foto;
	str_html+=servicios;
	str_html+='</span>';
	
	//document.form1.prova.value = str_html;
    
    //seteam la capa de serveis i posició
    capaCtrl.innerHTML = str_html;
	capaCtrl.style.zIndex = 10;
}
/*fi objecte interactiu*/

function init() {
    capaServ = document.getElementById('servicios');
    capaCtrl = document.getElementById('barraControles');
	objInt.updateControlsBar();
	objInt.refreshServices();
}


//////////////////////////////////////////////////////////////////////////////////////////////////////////////////

//afegim la funció init a la seqüčncia de carrega de la plana
if( navigator.userAgent.indexOf('MSIE')!=-1 ){
    window.attachEvent('onload', init );
}else if ( navigator.userAgent.indexOf('Gecko')!=-1 ){
    window.addEventListener( 'load', init, true );
}