var imageClicked='';
var imageStyle='';
var myIndex=1;
var myDiaporamaTimer;
var selectedTool = 'tool_pointer';
var logoDrag = null;
var	menuDrag = null;
var	smenuDrag = null;
var	windowDrag = null;
var	texteDrag = null;
var	imagesDrag = null;
var	thumbnailsDrag = null;
var	pictomosIndexLink = null;

function displayContent(str){
	myId = str.substring(9);
	myId = myId.substring(0,myId.indexOf('"'));
	header = '<div id="'+myId+'">';
	
	myReloadContent = str.substring(header.length);
	myReloadContent = myReloadContent.substring(0,myReloadContent.length-6);
	
	if ($(myId) == undefined){
		document.body.innerHTML += str;
	} else {
		$(myId).innerHTML = myReloadContent;
	}
	if(myId == 'thumbnails') {
		displayNextImage();
	}
	if (selectedTool == 'tool_move'){
		enableDrag(true);
	}
	
}

function displayBox(templateId, boxId, visible,userId){
	myIndex = 0;
	if (templateId == 'smenu'){
		//$('window').style.display='none';
	}
	if (templateId == 'images'){
		$('window').style.display='none';
		if ($('texte') != undefined) $('texte').style.display='none';
		if ($('images') != undefined) $('images').style.display='';
		if ($('thumbnails') != undefined) $('thumbnails').style.display='';
	}
	if (templateId == 'texte' || templateId == 'rubrique_texte'){
		$('window').style.display='none';
		if ($('images') != undefined) $('images').style.display='none';
		if ($('thumbnails') != undefined) $('thumbnails').style.display='none';
		if ($('texte') != undefined) $('texte').style.display='';
		
	}
	
	
 	req = new GetRequest ({url:'getsubmenu.php',func:displayContent});
	req.send(
		'box='+encodeURIComponent(boxId)
		+'&template='+encodeURIComponent(templateId)
		+'&userId='+encodeURIComponent(userId)
	);
	if (templateId == 'images'){
	 	req = new GetRequest ({url:'getsubmenu.php',func:displayContent});
		req.send(
			'box='+encodeURIComponent(boxId)
			+'&template=thumbnails'
			+'&userId='+encodeURIComponent(userId)
		);
	}
}

function displayPage(pictomosId, templateId, boxId, page){
	myIndex = 0;
 	req = new GetRequest ({url:'getsubmenu.php',func:displayContent});
	req.send(
		'userId='+pictomosId
		+'&box='+boxId
		+'&template='+templateId
		+'&page='+page
	);
}

function executeJs(str){
	eval(str);	
}

function displayPicture(id,ratio,title, year, myCursor){
	myIndex = myCursor;
 	req = new GetRequest ({url:'getsubmenu.php',func:executeJs});
	req.send(
		'id='+id
		+'&action=getDescription'
	);
	if ($('thumb_'+imageClicked) != undefined){
		element = $('thumb_'+imageClicked);
		element.setAttribute('style','border:#000000 4px solid;margin:0px 0px 0px 0px');
	} else if ($('thumb_'+id) != undefined){
		imageClicked = id;
	}
	$('thumb_'+id).setAttribute('style','border:#FFFFFF 4px solid;margin:0px 0px 0px 0px');
	
	$('imageTitle').innerHTML = title;
	$('imageYear').innerHTML = year;
	
	$('pictureScreen').innerHTML = '<img src="/tableaux/grand/'+id+'.jpg" width="490" height="'+(490*ratio)+'">';
	$('images').getElementsByTagName("img")[0].setAttribute('height',(490*ratio)+60);
	imageClicked = id;
}

function imageOver(element){
	if (element.getAttribute('id') != 'thumb_'+imageClicked){
		
		imageStyle=element.getAttribute('style');				
		
		element.setAttribute('style','border:#F90 4px solid;margin:0px 0px 0px 0px');
	}
}

function imageOut(element){
	if (element.getAttribute('id') != 'thumb_'+imageClicked){
		element.setAttribute('style',imageStyle);
	}
}


function playDiaporama(){
	displayNextImage();
	myDiaporamaTimer = setTimeout('playDiaporama()',4000);
	$('playPauseButtons').innerHTML = '<a href="javascript:stopDiaporama()" style="color:#FFF"><img src="imgs/ic-pause.png" border="0" /></a>';
}

function stopDiaporama(){
	clearTimeout(myDiaporamaTimer);
	$('playPauseButtons').innerHTML = '<a href="javascript:playDiaporama()" style="color:#FFF"><img src="imgs/ic-play.png" border="0" /></a>';
}


function displayPreviousImage(){
	myIndex--;
	if ($('link_'+myIndex) ==undefined) myIndex = 1;
	myHref = $('link_'+myIndex).getAttribute('href');
	myHref = myHref.substring(11);
	eval(myHref);
}



function displayNextImage(){
	myIndex++;
	if ($('link_'+myIndex) == undefined) {
		if ($('nextThumbnailsPage') != undefined){
			myHref = $('nextThumbnailsPage').getAttribute('href');
			myHref = myHref.substring(11);
			eval(myHref);
			myIndex = 0;
		} else {
			stopDiaporama();
		}	
	} else {
		myHref = $('link_'+myIndex).getAttribute('href');
		myHref = myHref.substring(11);
		eval(myHref);
	}
}

function selectTool(tool){
	
	if ($('colorpicker') != undefined) {
		$('colorpicker').style.display = 'none';
	}
	displayTexture(false,'');
	displayLogo(false);
	if ($('Input_windowTitle') != undefined || $('Input_menuTitle') != undefined){
		alert('Vous devez valider le texte en cours d\'édition avant de changer d\'outil');
	}

	else {
		$(selectedTool).setAttribute('src','/admin/images/'+selectedTool+'_off.png');
		$(tool).setAttribute('src','/admin/images/'+tool+'_on.png');
		$('background').style.display = 'none';
		$('textColorDiv').style.display = 'none';
		enableDrag(false);
		
		switch(tool){
			case 'tool_pointer':
				document.body.style.cursor = 'default';
			break;
			
			case 'tool_move':
				
				enableDrag(true);
			break;
			
			case 'tool_text':
				$('textColorDiv').style.display = '';				
				document.body.style.cursor = 'text';
			break;
			case 'tool_background':
				$('background').style.display = '';				
			break;
		}
		selectedTool = tool;
	}
}

function saveMyPosition(element){

	positionTop = element.getStyle('top');
	positionLeft = element.getStyle('left');

 	req = new GetRequest ({url:'update_style.php',func:executeJs});
	req.send(
		'name='+element.getAttribute('id')
		+'&top='+positionTop
		+'&left='+positionLeft
	);
	
	return true;
}

function enableDrag(b){
	if (b){
		document.body.style.cursor = 'move';
		if ($('logo') != undefined) {
			pictomosIndexLink = $('logo').getAttribute('onclick');
			$('logo').setAttribute('onclick','');
			$('logo').style.cursor = 'move';
			logoDrag = new Draggable('logo', {onEnd:function(draggable, eventName){saveMyPosition(draggable.element);}});
		}
		if ($('menu') != undefined) menuDrag = new Draggable('menu', {onEnd:function(draggable, eventName){saveMyPosition(draggable.element);}});
		if ($('smenu') != undefined) smenuDrag = new Draggable('smenu', {onEnd:function(draggable, eventName){saveMyPosition(draggable.element);}});
		if ($('window') != undefined) windowDrag = new Draggable('window', {onEnd:function(draggable, eventName){saveMyPosition(draggable.element);}});
		if ($('texte') != undefined) texteDrag = new Draggable('texte', {onEnd:function(draggable, eventName){saveMyPosition(draggable.element);}});
		if ($('images') != undefined) imagesDrag = new Draggable('images', {onEnd:function(draggable, eventName){saveMyPosition(draggable.element);}});
		if ($('thumbnails') != undefined) thumbnailsDrag = new Draggable('thumbnails', {onEnd:function(draggable, eventName){saveMyPosition(draggable.element);}});
	} else {
		document.body.style.cursor = 'default';
		if (logoDrag !=null) {
			logoDrag.destroy();
			$('logo').setAttribute('onclick',pictomosIndexLink);
			$('logo').style.cursor = 'pointer';
		}
		if (menuDrag !=null) menuDrag.destroy();
		if (smenuDrag !=null) smenuDrag.destroy();
		if (windowDrag !=null) windowDrag.destroy();
		if (texteDrag !=null) texteDrag.destroy();
		if (imagesDrag !=null) imagesDrag.destroy();
		if (thumbnailsDrag !=null) thumbnailsDrag.destroy();
	}
}

function enableLink(b){
	
}

function displayMessage(str){
	
}

function toggleMenu(){
	myElement = window.parent.document.getElementById('header_menu');
	if (myElement.style.display == ''){
		$('tool_fullscreen').setAttribute('src','/admin/images/tool_fullscreen_on.png');
		myElement.style.display = 'none';
	} else {
		$('tool_fullscreen').setAttribute('src','/admin/images/tool_fullscreen_off.png');
		myElement.style.display = '';
	}
}

function updateText(id, text){
 	req = new GetRequest ({url:'ajax_request.php',func:executeJs});
	req.send(
		'pictomosAction=updateText'
		+'&pictomosId='+id
		+'&pictomosText='+text
	);	
}

function updateStyle(pictomosId, cssName, cssChild, cssKey, cssValue) {
	
    myEditableBoxes = document.getElementsByClassName(cssName+'EditableColor');
    for (i=0 ; i<myEditableBoxes.length ; i++){       
        myElement = myEditableBoxes[i];
        myElement.setStyle(cssKey,cssValue);
        switch (cssKey){
        	case 'color' :
        		myElement.style.color = cssValue;
        	break;
        	case 'font-size':
        		myElement.style.fontSize = cssValue;
        	break;
        }
    }
	
 	req = new GetRequest ({url:'ajax_request.php',func:executeJs});
	req.send(
		'pictomosAction=updateStyle'
		+'&pictomosId='+encodeURIComponent(pictomosId)
		+'&cssName='+encodeURIComponent(cssName)
		+'&cssChild='+encodeURIComponent(cssChild)
		+'&cssKey='+encodeURIComponent(cssKey)
		+'&cssValue='+encodeURIComponent(cssValue)
	);	
}

function submitenter(myfield,e,text) {
	var keycode;
	if (window.event) keycode = window.event.keyCode;
	else if (e) keycode = e.which;
	else return true;
	
	if (keycode == 13) {
		myName = myfield.getAttribute('name');
		updateText(myName, myfield.value);
		$(myName).innerHTML = myfield.value;
		$(myName).setAttribute('onClick',"$('"+myName+"').setAttribute('onClick','');$('"+myName+"').innerHTML='<input id=\"Input_"+myName+"\" name=\""+myName+"\" onKeyPress=\"return submitenter(this,event)\" style=\"width:100%;border:0px\" type=\"text\" value=\"'+$('"+myName+"').innerHTML+'\"/>';$('Input_"+myName+"').focus();");
		return false;
	}
	else
	   return true;
}

function updateBackgroundImage(pictomosId, textureFile){
 	req = new GetRequest ({url:'ajax_request.php',func:executeJs});
	req.send(
		'pictomosAction=updateBackGroundImage'
		+'&pictomosId='+pictomosId
		+'&textureFile='+textureFile
	);	
}

function saveLayout(pictomosId){
 	req = new GetRequest ({url:'/ajax_request.php',func:executeJs});
	req.send(
		'pictomosAction=saveLayout'
		+'&pictomosId='+pictomosId
	);	
}

function cancelLayout(pictomosId, pictomosLogin){
 	req = new GetRequest ({url:'/ajax_request.php',func:executeJs});
	req.send(
		'pictomosAction=cancelLayout'
		+'&pictomosId='+pictomosId
		+'&pictomosLogin='+pictomosLogin
	);	
}

function changecss(theClass,element,value) {
	var cssRules;
	if (document.all) {
		cssRules = 'rules';
	} else if (document.getElementById) {
		cssRules = 'cssRules';
	}
	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 == theClass) {
				//alert('style : '+document.styleSheets[S][cssRules][R].selectorText+', => '+value);
				document.styleSheets[S][cssRules][R].style[element] = value;
			}
		}
	}	
}

function displayLogo(b){
	if ($('background_logo') != undefined){
		if (b){
			$('background_logo').style.display = '';
		} else {
			$('background_logo').style.display = 'none';
		}
	}
}

function displayTexture(b,type){
	if ($('background_texture') != undefined){
		if (b){
			if (type == 'tomos') {
				$('background_texture_title').innerHTML = 'Image de fond des TOMOS';
			} else if (type == 'body')  {
				$('background_texture_title').innerHTML = 'Image de fond du site';
			}
			$('background_texture').style.display = '';
		} else {
			$('background_texture').style.display = 'none';
		}
	}
}

var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
	
function getMouseXY(e) {
	if (IE) { // grab the x-y pos.s if browser is IE
		tempX = event.clientX + document.body.scrollLeft;
		tempY = event.clientY + document.body.scrollTop;
	}
	else {  // grab the x-y pos.s if browser is NS
		tempX = e.pageX;
		tempY = e.pageY;
	}  
	if (tempX < 0){tempX = 0;}
	if (tempY < 0){tempY = 0;}  
	if ($('help_panel')!=null) {
		$('help_panel').style.top = tempY;
		$('help_panel').style.left = tempX+60;
	}
	return true;
}

function displayPanel(index){
	$('help_panel').innerHTML = tipsArray[index];
	$('help_panel').style.display = '';
}

function hidePanel(){
	$('help_panel').style.display = 'none';
	$('help_panel').innerHTML = '';
}

var tipsArray = Array();
tipsArray[0] = '<img src="/admin/images/ic_question.png"> <strong>Titre</strong><br/><br/>Entrez ici le titre de l\'oeuvre. Il sera automatiquement écrit en gras et placé au bas de votre oeuvre.';
tipsArray[1] = '<img src="/admin/images/ic_question.png"> <strong>Année</strong><br/><br/>Entrez ici l\'année dans laquelle a été réalisée l\'oeuvre. Ce chiffre sera placé sous le titre.';
tipsArray[2] = '<img src="/admin/images/ic_question.png"> <strong>Description</strong><br/><br/>Entrez ici une description - détaillée ou non - qui pourra préciser à vos visiteurs l\'histoire de l\'oeuvre, les conditions de sa réalisation, ou tout autre commentaire que vous jugerez utile.';
tipsArray[3] = '<img src="/admin/images/ic_question.png"> <strong>Mots-clés</strong><br/><br/>Entrez ici le(s) mot(s) que vous souhaitez associer à votre oeuvre. Ces mots serviront dans un premier temps au référencement de votre oeuvre dans les moteurs de recherche sur Internet.<br/>Ils vous ouvriront prochainement les portes de nouvelles fonctionnalités.';
tipsArray[4] = '<img src="/admin/images/ic_question.png"> <strong>Mes Rubriques</strong><br/><br/>Vous choisissez ici à quelle galerie cette oeuvre doit être associée. Notez que si vous cochez une rubrique (en plus d\'une sous-rubrique), l\'image sera affichée de façon aléatoire dans le cadre affichant les sous-rubriques.';