ajax = new Ajax();
tags = new Array('p','h1','img');
tagNames = new Array('un paragraphe','un titre','une image');
availClasses = new Array();
availClasses['P'] = new Array();
availClasses['H1'] = new Array();
availClasses['IMG'] = new Array();
availClasses['IMG']['left'] = 'Alignement Gauche';
availClasses['IMG']['right'] = 'Alignement Droite';
availClasses['IMG'].length = 2;
picsPath = 'images/site/';
pics = new Array('Josette.jpg','_DSC2936.jpg','_DSC3062.jpg','_DSC3225.jpg','_DSC3443.jpg','_DSC3520.jpg','_DSC3599.jpg','_DSC3818.jpg','_DSC3935.jpg','_DSC4012.jpg','_DSC4216.jpg','_DSC4302.jpg','_DSC4365.jpg','_DSC4442.jpg','_DSC4470.jpg','_DSC4480.jpg','_DSC4874.jpg');document.writeln("<div id='infoBox' style='z-index:2; left: 0px; width: 750px; position: absolute; top: 0px; height: 180px; display: none; background-color:#FFFFFF; border:1px solid black;'>allo<p>hey</p></div>");
document.writeln("<div id='space' style='height: 182px; display: none;'></div>");
if(document.getElementById){
	box = document.getElementById("infoBox");
	spacer = document.getElementById("space");
}else if(document.all){
	box = document.all.item("infoBox");
	spacer = document.all.item("space");
}else{
	box = null;
	spacer = null;
}
function showBox(content){
	box.innerHTML = ''+content;
	placeBox();
	box.style.display = 'block';
	spacer.style.display = 'block';
	scrollPoll = setTimeout("placeBox()",500);
	applyClicks();
}
function hideBox(){
	box.style.display = 'none';
	spacer.style.display = 'none';
	box.innerHTML = '';
}

function placeBox(){
	screenWidth = (window.innerWidth)?window.innerWidth-18:document.documentElement.clientWidth;
	screenHeight = (window.innerHeight)?window.innerHeight:document.documentElement.clientHeight;
	pageX = (window.pageXOffset)?window.pageXOffset:document.documentElement.scrollLeft;
	pageY = (window.pageYOffset)?window.pageYOffset:document.documentElement.scrollTop;
	box.style.left = ((screenWidth-parseInt(box.style.width))/2+pageX)+'px';
	box.style.top = (pageY)+'px';
	scrollPoll = setTimeout("placeBox()",500);
}
function applyClicks(){
	for(u=0;u<tags.length;u++){
	elems = document.getElementsByTagName(tags[u])
  	for(i=0;i<elems.length;i++){
			elems[i].onmouseup = function(){getMod(this);};
		}
	}
}
currentElement = new Object();
function getMod(elem){
	if(top.currentElement.ref){
		if(top.currentElement.ref.innerHTML == ''){
			if(top.currentElement.ref.tagName != 'IMG'){
  			top.currentElement.ref.parentNode.removeChild(top.currentElement.ref);
			}
		}else{
  		top.currentElement.ref.style.backgroundColor = top.currentElement.bgBackUp;
		}
	}
	top.currentElement.ref = elem;
	top.currentElement.backUp = elem.innerHTML;
	if(elem.style.backgroundColor != ''){
  	top.currentElement.bgBackUp = elem.style.backgroundColor;
	}else{
  	top.currentElement.bgBackUp = '';
	}
	elem.style.backgroundColor = '#DDDDDD';
	var content;
	content = '<table border="0" cellspacing="0" cellpadding="0" style="height:180px;width:750px;"><tr><td style="width:500px;height:140px;text-align:center;">';
	
	
	
	if(elem.tagName == 'IMG'){
  	options = '';
  	for(i=0;i<pics.length;i++){
  		options += '<option value="'+picsPath+pics[i]+'">'+pics[i]+'</option>';
  	}
  	content += 'Changer l\'image pour: <select onChange="top.currentElement.ref.src=this.value;">'+options+'</select>';
	}else{
  	content += '<textarea name="content" style="width:90%;height:100px;" onKeyUp="updateElement(this.value);">'+elem.innerHTML+'</textarea>';
	}
	content += '</td><td style="width:250px;vertical-align:top;">Position: <a href="javascript:moveObj(-1);"><img src="images/upArrow.gif" width="50" height="19" align="absmiddle" style="border:none;margin:0px;padding:0px;"/></a> <a href="javascript:moveObj(1);"><img src="images/downArrow.gif" width="50" height="19" align="absmiddle" style="border:none;margin:0px;padding:0px;"/></a>';
	options = '';
	for(key in availClasses[elem.tagName]){
		options += '<option value="'+key+'"';
		if(key == elem.className)options += ' SELECTED';
		options += '>'+availClasses[elem.tagName][key]+'</option>';
	}
	if(options.length > 0){
  	content += '<br>Style: <select onChange="top.currentElement.ref.className=this.value;">'+options+'</select>';
	}
	content += '</td></tr><tr><td style="height:40px;"><input type="button" value="Ajouter" onClick="addElement(this.parentNode.getElementsByTagName(\'select\')[0].value)"> <select>';
	for(i=0;i<tags.length;i++){
		content += '<option value="'+tags[i]+'">'+tagNames[i]+'</option>';
	}
	content += '</select> avant l\'&eacute;l&eacute;ment s&eacute;lectionn&eacute;</td><td><input type="button" value="Sauvegarder" onmouseup="doSave()"><input type="button" value="Recommencer" onClick="top.currentElement.ref.innerHTML=top.currentElement.backUp;getMod(top.currentElement.ref);">';
	box.innerHTML = content;
}

function updateElement(content){
	top.currentElement.ref.innerHTML = content;
}

function addElement(elementAdded){
	if(elementAdded != 'img'){
		newMember = document.createElement(elementAdded);
		newMember.innerHTML = 'Lorem Ipsum Dolor Sit Amet';
	}else{
  	newMember = new Image();
		newMember.src = picsPath+pics[0];
	}
	top.currentElement.ref.parentNode.insertBefore(newMember,top.currentElement.ref);
	newMember.onmouseup = function(){getMod(this);};
	getMod(newMember);
}

function moveObj(modifier){
  theFather = top.currentElement.ref.parentNode;
  for(i=0;i<theFather.childNodes.length;i++){
  	if(theFather.childNodes[i] == top.currentElement.ref){
  		break;
  	}
  }
  movedElem = i;
  movedBrother = i;
  do{
  movedBrother += modifier;
  }while(theFather.childNodes[movedBrother] && theFather.childNodes[movedBrother].nodeType != 1)
  
  brother = theFather.childNodes[movedBrother];
  elem = theFather.childNodes[movedElem];
  if(brother && elem){
    if(modifier == 1)theFather.insertBefore(brother,elem);
    if(modifier == -1)theFather.insertBefore(elem,brother);
  }
}

function doSave(){
  top.currentElement.ref.style.backgroundColor = top.currentElement.bgBackUp;
	ajax.postData = 'theData='+document.getElementById("editor").innerHTML;
	ajax.doGet('javascript/editor.php',confirmSave,'text');
}

function confirmSave(){
	alert('update successfull');
}