var xSlider = null;
var ySlider = null;
var tailleSlider = null;
var redSlider = null;
var greenSlider = null;
var blueSlider = null;


//----------------------------------------------------------------
function initPage() {
	var rh = getRange(10, 400, 10);
	var rw = getRange(20, 600, 10);
    heightSlider = new Control.Slider('height1','height', {
		range: $R(10,400),
    	values:	rh,
		onSlide:function(v){$('theight1').value=v;},
		onChange:function(v){$('theight1').value=v;resizeSlider(parseInt($('twidth1').value), parseInt($('theight1').value));updatePicture();}});
    widthSlider = new Control.Slider('width1','width', {
    	range:		$R(10,600),
    	values:		rw,
    	sliderValue: parseInt($('twidth1').value),
		onSlide:function(v){$('twidth1').value=v;},
		onChange:function(v){$('twidth1').value=v;resizeSlider(parseInt($('twidth1').value), parseInt($('theight1').value));updatePicture();}});

    xSlider = new Control.Slider('handlex1','xpos1', {
    	range:$R(0,468),
    	values:$R(0,468),
		onSlide:function(v){$('xvalue1').value=v;},
		onChange:function(v){$('xvalue1').value=v;updatePicture();}});
    ySlider = new Control.Slider('handley1','ypos1', {
    	range:$R(0,60),
    	values:$R(0,60),
		onSlide:function(v){$('yvalue1').value=v;},
		onChange:function(v){$('yvalue1').value=v;updatePicture();}});
    tailleSlider = new Control.Slider('handlet1','taille1', {
    	range:$R(10,60),
    	values:$R(10,60),
		onSlide:function(v){$('tvalue1').value=v;},
		onChange:function(v){$('tvalue1').value=v;updatePicture();}});
    redSlider = new Control.Slider('hRouge1','rouge1', {
    	range:$R(0,255),
    	values:$R(0,255),
		onSlide:function(v){$('couleurR1').value=v;previewColor(1);},
		onChange:function(v){$('couleurR1').value=v;previewColor(1);updatePicture();}});
    greenSlider = new Control.Slider('hVert1','vert1', {
    	range:$R(0,255),
    	values:$R(0,255),
		onSlide:function(v){$('couleurG1').value=v;previewColor(1);},
		onChange:function(v){$('couleurG1').value=v;previewColor(1);updatePicture();}});
    blueSlider = new Control.Slider('hBleu1','bleu1', {
    	range:$R(0,255),
    	values:$R(0,255),
		onSlide:function(v){$('couleurB1').value=v;previewColor(1);},
		onChange:function(v){$('couleurB1').value=v;previewColor(1);updatePicture();}});
    angleSlider = new Control.Slider('hAngle1','angleV1', {
    	range:$R(-90,90),
    	values:$R(-90,90),
		onSlide:function(v){$('angle1').value=v;},
		onChange:function(v){$('angle1').value=v;updatePicture();}});

    xSlider2 = new Control.Slider('handlex2','xpos2', {
    	range:$R(0,468),
    	values:$R(0,468),
		onSlide:function(v){$('xvalue2').value=v;},
		onChange:function(v){$('xvalue2').value=v;updatePicture();}});
    ySlider2 = new Control.Slider('handley2','ypos2', {
    	range:$R(0,60),
    	values:$R(0,60),
		onSlide:function(v){$('yvalue2').value=v;},
		onChange:function(v){$('yvalue2').value=v;updatePicture();}});
    tailleSlider2 = new Control.Slider('handlet2','taille2', {
    	range:$R(10,60),
    	values:$R(10,60),
		onSlide:function(v){$('tvalue2').value=v;},
		onChange:function(v){$('tvalue2').value=v;updatePicture();}});
    redSlider2 = new Control.Slider('hRouge2','rouge2', {
    	range:$R(0,255),
    	values:$R(0,255),
		onSlide:function(v){$('couleurR2').value=v;previewColor(2);},
		onChange:function(v){$('couleurR2').value=v;previewColor(2);updatePicture();}});
    greenSlider2 = new Control.Slider('hVert2','vert2', {
    	range:$R(0,255),
    	values:$R(0,255),
		onSlide:function(v){$('couleurG2').value=v;previewColor(2);},
		onChange:function(v){$('couleurG2').value=v;previewColor(2);updatePicture();}});
    blueSlider2 = new Control.Slider('hBleu2','bleu2', {
    	range:$R(0,255),
    	values:$R(0,255),
		onSlide:function(v){$('couleurB2').value=v;previewColor(2);},
		onChange:function(v){$('couleurB2').value=v;previewColor(2);updatePicture();}});
    angleSlider2 = new Control.Slider('hAngle2','angleV2', {
    	range:$R(-90,90),
    	values:$R(-90,90),
		onSlide:function(v){$('angle2').value=v;},
		onChange:function(v){$('angle2').value=v;updatePicture();}});

	heightSlider.setValue(parseInt($('theight1').value));
	widthSlider.setValue(parseInt($('twidth1').value));
	
	redSlider.setValue(parseInt($('couleurR1').value));
	greenSlider.setValue(parseInt($('couleurG1').value));
	blueSlider.setValue(parseInt($('couleurB1').value));
	tailleSlider.setValue(parseInt($('tvalue1').value));
	xSlider.setValue(parseInt($('xvalue1').value));
	ySlider.setValue(parseInt($('yvalue1').value));
	angleSlider.setValue(parseInt($('angle1').value));
	
	redSlider2.setValue(parseInt($('couleurR2').value));
	greenSlider2.setValue(parseInt($('couleurG2').value));
	blueSlider2.setValue(parseInt($('couleurB2').value));
	tailleSlider2.setValue(parseInt($('tvalue2').value));
	xSlider2.setValue(parseInt($('xvalue2').value));
	ySlider2.setValue(parseInt($('yvalue2').value));
	angleSlider2.setValue(parseInt($('angle2').value));
	
	previewColor(1);		
	previewColor(2);		
	resizeSlider(parseInt($('twidth1').value), parseInt($('theight1').value))
	setTimeout('updatePicture()', 1000);
	$('text1').focus();
	$('text1').select();
}

//----------------------------------------------------------------
function setSliderValue(val, slider) {
	slider.setValue(parseInt(val));
}

//----------------------------------------------------------------
function toHex(n) {
    return (enHex((0x0000f0 & n) >>  4) + enHex((0x00000f & n) >>  0))
}

//----------------------------------------------------------------
function enHex(aDigit) {
	return("0123456789ABCDEF".substring(aDigit, aDigit+1))
}

//----------------------------------------------------------------
function previewColor(n) {
	color = "#" + toHex(parseInt($('couleurR'+n).value))
				+ toHex(parseInt($('couleurG'+n).value))
				+ toHex(parseInt($('couleurB'+n).value));

	$('colorSample'+n).bgColor = color;	
}

//----------------------------------------------------------------
function updatePicture() {
	var params = Form.serialize($('theForm'));
	new Ajax.Updater('bannerPreview', '/banner4/getBannerHTML.php', {asynchronous:true, parameters:params});
}

//----------------------------------------------------------------
function resizeSlider(width, height) {

	$('xpos1').style.width = (width / 2) + "px";
	$('ypos1').style.width = height + "px";
	$('xpos2').style.width = (width / 2) + "px";
	$('ypos2').style.width = height + "px";

	xSlider = null;
	ySlider = null;


    xSlider = new Control.Slider('handlex1','xpos1', {
    	range:$R(0,width),
    	values:$R(0,width),
		onSlide:function(v){$('xvalue1').value=v;},
		onChange:function(v){$('xvalue1').value=v;updatePicture();}});
    delete(ySlider);
    ySlider = new Control.Slider('handley1','ypos1', {
    	range:$R(0,height),
    	values:$R(0,height),
		onSlide:function(v){$('yvalue1').value=v;},
		onChange:function(v){$('yvalue1').value=v;updatePicture();}});
	xSlider.setValue(parseInt($('xvalue1').value));
	ySlider.setValue(parseInt($('yvalue1').value));

	xSlider2 = null;
	ySlider2 = null;
    xSlider2 = new Control.Slider('handlex2','xpos2', {
    	range:$R(0,width),
    	values:$R(0,width),
		onSlide:function(v){$('xvalue2').value=v;},
		onChange:function(v){$('xvalue2').value=v;updatePicture();}});
    ySlider2 = new Control.Slider('handley2','ypos2', {
    	range:$R(0,height),
    	values:$R(0,height),
		onSlide:function(v){$('yvalue2').value=v;},
		onChange:function(v){$('yvalue2').value=v;updatePicture();}});
	xSlider2.setValue(parseInt($('xvalue2').value));
	ySlider2.setValue(parseInt($('yvalue2').value));

}

//----------------------------------------------------------------
function getRange(start, end, increment) {
	var array = [];
	var z = 0;
	for (var i = start; i <= end; i += increment) {
		array[z]  = i;
		z += 1;
	}
	return array;
}

//----------------------------------------------------------------
dumpArray = function(array, returnInsteadOfAlert) {
	var str = "";
	for (var i in array) {
		str += i+" : "+array[i]+"\r";
	}
	if (returnInsteadOfAlert)
		return str;
	else
		alert(str);
}