// JavaScript Document
dojo.require('dojo.fx');
	
dojo.addOnLoad(function() {
	doAccordionFunction();
	
	var diagId = 10;
	createHeader(diagId);
	createBody(diagId);
	
	var diagId = 11;
	createHeader(diagId);
	createBody(diagId);
	
	var diagId = 12;
	createHeader(diagId);
	createBody(diagId);
	
	var diagId = 13;
	createHeader(diagId);
	createBody(diagId);
	
	var diagId = 20;
	createHeader(diagId);
	createBody(diagId);
	//wipeOptionInOut(diagId);
	
	var diagId = 30;
	createHeader(diagId);
	createBody(diagId);
	//wipeOptionInOut(diagId);
	
});

function doAccordionFunction() {
	dojo.query('dt', 'Accordion').style('cursor','pointer');
	var dtElements = dojo.query('dt', 'Accordion');
	var ddElements = dojo.query('dd', 'Accordion');
	for(var x=0; x< dtElements.length; x++) {
		if (x == 0) {
			dtElements[x].no = x;
			dtElements[x].status = true;
		} else {
			dtElements[x].no = x;
			dojo.fx.wipeOut({
				node:ddElements[x]
			}).play();
			dtElements[x].status = false;
		}
		dtElements[x].onclick = function () {
			var no = this.no;
			if (this.status == true) {
				this.status = false;
				dojo.fx.wipeOut({
					node:ddElements[no]
				}).play();
			} else {
				this.status = true;
				dojo.fx.wipeIn({
					node:ddElements[no]
				}).play();
			}
		}
	}
}

function createBody(diagId) {
	if (diagId == 20 || diagId == 30) {
		getOptionPlotType(diagId);
		plotTypSwitcher(diagId);
	
	} else {
		getAjaxOption(diagId);
	}
}
function getOptionPlotType(diagId) {
	var bodyDiv = document.createElement("div");
	bodyDiv.id = 'diagram'+diagId+'Body';
	bodyDiv.className = 'diagramBody';
	var eSelect = document.createElement('select');
	eSelect.id = 'diagram'+diagId+'Options';
	var eOption1 = document.createElement('option');
	eOption1.value = '1';
	eOption1.innerHTML = 'Balkendiagramm';
	var eOption2 = document.createElement('option');
	eOption2.value = '2';
	eOption2.innerHTML = 'Liniendiagramm';
	
	bodyDiv.appendChild(eSelect);
	eSelect.appendChild(eOption1);
	eSelect.appendChild(eOption2);
	dojo.place(bodyDiv,dojo.byId('diagram'+diagId),'before');
	//dojo.fx.wipeOut({node: bodyDiv, duration: 0 }).play();
}

function createHeader(diagId) {
	/*
	var headerTitle = document.createElement("div");
	headerTitle.className = 'optionButton'
	var headerIconHolder = document.createElement("span");
	headerIconHolder.id = 'headerIcon'+diagId;
	var headerTitleA = document.createElement("a");
	headerTitleA.innerHTML = 'Optionen';
	*/
	var headerDiv = document.createElement("div");
	headerDiv.id = 'diagram'+diagId+'Header';
	headerDiv.className = 'diagramHeader';
	
	//headerTitle.appendChild(headerIconHolder);
	//headerTitle.appendChild(headerTitleA);
	//headerDiv.appendChild(headerTitle);
	dojo.place(headerDiv,dojo.byId('diagram'+diagId),'before');
}
	
function wipeOptionInOut(diagId) {
	var iconOpen = dojo.doc.createElement('img');
    dojo.attr(iconOpen, {
        src: "/img/badge_down.png",
	    alt: "Open"
    });

    var iconClose = dojo.doc.createElement('img');
    dojo.attr(iconClose, {
        src: "/img/badge_up.png",
	    alt: "Close"
    });
	   	
	dojo.byId('headerIcon'+diagId).appendChild(iconClose,'before');
		
	
	dojo.connect(dojo.byId('diagram'+diagId+'Header'), "onclick", function(evt) {
		var bodyDiv = dojo.byId('diagram'+diagId+'Body');
		if(dojo.style(bodyDiv, 'height') == 0) {
       	    dojo.fx.wipeIn({node: bodyDiv, duration: 200 }).play();
			dojo.byId("headerIcon"+diagId).appendChild(iconOpen);
            dojo.byId("headerIcon"+diagId).removeChild(iconClose);

       	} else {
       	    dojo.fx.wipeOut({node: bodyDiv, duration: 200 }).play();
			dojo.byId("headerIcon"+diagId).removeChild(iconOpen);
            dojo.byId("headerIcon"+diagId).appendChild(iconClose);
       	}
	});
}

function plotTypSwitcher(diagId) {
	dojo.connect(dojo.byId( 'diagram' + diagId + 'Options' ),"onchange", function(e) {
		var diagTyp = dojo.byId( 'diagram' + diagId + 'Options' );
		var imgArr = dojo.query('img', 'diagram'+diagId );
		var oldSrc = dojo.attr(imgArr[0],'src');
		var newTyp = e.target.value;
		var newSrc = oldSrc.replace(/(typ=)\d+/,'$1'+newTyp );
		dojo.destroy(imgArr[0]);
		var img = dojo.doc.createElement('img');
		dojo.attr(img, {
        	src: newSrc,
        	id: 'diagram'+diagId+'img',
			alt: "Diagramm"
    	});
		img.opacity = 0;
		dojo.byId("diagram"+diagId).appendChild(img);
	    dojo.connect(img, "onload", function(event){
	        dojo.animateProperty({
	            node : img,
	            duration: 500,
	            properties : {
	                opacity : {start: 0, end : 1}
	            }
	        }).play();
	    });
	});
}
function plotSelectParamSwitcher(diagId) {
	dojo.connect(dojo.byId( 'diagram' + diagId + 'Options' ),"onchange", function(e) {
		var diagTyp = dojo.byId( 'diagram' + diagId + 'Options' );
		var imgArr = dojo.query('img', 'diagram'+diagId );
		var oldSrc = dojo.attr(imgArr[0],'src');
		
		if(diagId == 13) { // Param as Array
			tmpArr = oldSrc.split("?");
			var newSrc = '';
			tmpArr2 = tmpArr[1].split("&");
			for each( var val2 in tmpArr2 ) {
				tmpArr3 = val2.split("=");
				if (tmpArr3[0] == 'typ' || tmpArr3[0] == 'basic') {
					if (newSrc == '') newSrc = tmpArr[0]+'?'+val2;
					else newSrc = newSrc.concat('&'+val2);
				}
			}
			
			var selectArr = dojo.query('input',diagTyp);
			for each(var elem in selectArr) {
				var valElem = dojo.attr(elem, 'value');
				var chkElem = dojo.attr(elem, 'checked');
				if(chkElem == true) {
					newSrc = newSrc.concat('&param[]='+valElem);
				}
			}
		} else { // Param as String
			var newParam = e.target.value;
			var newSrc = oldSrc.replace(/(param=)\d+/,'$1'+newParam );
		}
		
		dojo.destroy(imgArr[0]);
		var img = dojo.doc.createElement('img');
		dojo.attr(img, {
        	src: newSrc,
        	id: 'diagram'+diagId+'img',
			alt: "Diagramm",
			opacity: 0
    	});
		dojo.byId("diagram"+diagId).appendChild(img);
	    dojo.connect(img, "onload", function(event){
	        dojo.animateProperty({
	            node : img,
	            duration: 500,
	            properties : {
	                opacity : {start: 0, end : 1}
	            }
	        }).play();
	    });
	});
}

function getAjaxOption(diagId) {
	var d = dojo.xhrGet({
        url: '/masernajax.php?basic='+diagId,
        timeout: 5000,
        
        load: function(response, ioArgs) {
        	var bodyDiv = document.createElement("div");
			bodyDiv.id = 'diagram'+diagId+'Body';
			bodyDiv.className = 'diagramBody';
			bodyDiv.innerHTML = response;
			dojo.place(bodyDiv,dojo.byId('diagram'+diagId),'before');
			//dojo.fx.wipeOut({node: bodyDiv, duration: 0 }).play();
			if(diagId == 10 || diagId == 11 || diagId == 12 || diagId == 13) {
				plotSelectParamSwitcher(diagId);
				//wipeOptionInOut(diagId);

			}
        },
        error: function(response, ioArgs) { }
    });
	
}