var x = 201-(col*201);
var beltWidth = 603;
var dest_x_col1 = 0;
var dest_x_col2 = -201;
var dest_x_col3 = -402;


document.getElementById("col1").style.height = colHeight[1]+'px';
document.getElementById("col2").style.height = colHeight[2]+'px';
document.getElementById("col3").style.height = colHeight[3]+'px';

document.getElementById("col1").style.marginTop = y_col[1]+'px';
document.getElementById("col2").style.marginTop = y_col[2]+'px';
document.getElementById("col3").style.marginTop = y_col[3]+'px';

document.getElementById("belt").style.marginLeft = x+'px';
document.getElementById("belt").style.visibility = 'visible';

if(col ==1){
        document.getElementById('col_menu1').style.color = '#FFFFFF';
		document.getElementById('col_menu2').style.color = '#999999';
		document.getElementById('col_menu3').style.color = '#999999';
		document.getElementById('col_arrow').style.backgroundPosition = '47px -23px';
}
if(col ==2){
        document.getElementById('col_menu1').style.color = '#999999';
		document.getElementById('col_menu2').style.color = '#FFFFFF';
		document.getElementById('col_menu3').style.color = '#999999';
		document.getElementById('col_arrow').style.backgroundPosition = 'center -23px';
}
if(col ==3){
        document.getElementById('col_menu1').style.color = '#999999';
		document.getElementById('col_menu2').style.color = '#999999';
		document.getElementById('col_menu3').style.color = '#FFFFFF';
		document.getElementById('col_arrow').style.backgroundPosition = '159px -23px';
}


var interval = 15;
var interval2 = 15;

if(dest_y_up_col[col] > -1*colHeight[col]){
    document.getElementById('arrow_down').style.backgroundPosition = 'center 0px';
}else{
    document.getElementById('arrow_down').style.backgroundPosition = 'center -40px';
}
if(dest_y_down_col[col] < 417){
	document.getElementById('arrow_up').style.backgroundPosition = 'center 0px';
}else{
	document.getElementById('arrow_up').style.backgroundPosition = 'center -40px';
}


function moveup() {
	
	beltHeight = colHeight[col];
	
	//alert(dest_y_up_col[col]);

    if(dest_y_up_col[col] > -1*beltHeight){

        document.getElementById('arrow_down').style.backgroundPosition = 'center -40px';
		document.getElementById('arrow_up').style.backgroundPosition = 'center -40px';

		//Keep on moving the image till the target is achieved
		if(y_col[col]>dest_y_up_col[col]) y_col[col] = y_col[col] - interval; 
				
		//Move the image to the new location
		document.getElementById("col"+col).style.marginTop =  y_col[col]+'px';
			
		if (y_col[col]-interval > dest_y_up_col[col]) {
			//Keep on calling this function every 10 microsecond 
			//	till the target location is reached
			window.setTimeout('moveup()',5);
		}else{
			document.getElementById("col"+col).style.marginTop =  dest_y_up_col[col]+'px';
						
			POSTRequest('col'+col+'Y='+dest_y_up_col[col]);
			
			dest_y_up_col[col] -= 417;
			dest_y_down_col[col] -= 417;
			
			
			if(dest_y_up_col[col] > -1*beltHeight){
				document.getElementById('arrow_down').style.backgroundPosition = 'center 0px';
			}
			if(dest_y_down_col[col] < 417){
				document.getElementById('arrow_up').style.backgroundPosition = 'center 0px';
			}
	
		}
    }
}

function movedown() {
	
	beltHeight = colHeight[col];

    if(dest_y_down_col[col] < 417){
 
        document.getElementById('arrow_down').style.backgroundPosition = 'center -40px';
		document.getElementById('arrow_up').style.backgroundPosition = 'center -40px';
	
		//Keep on moving the image till the target is achieved
		if(y_col[col]<dest_y_down_col[col]) y_col[col] = y_col[col] + interval; 
				
		//Move the image to the new location
		document.getElementById("col"+col).style.marginTop =  y_col[col]+'px';
			
		if (y_col[col]+interval < dest_y_down_col[col]) {
			//Keep on calling this function every 10 microsecond 
			//	till the target location is reached
			window.setTimeout('movedown()',5);
		}else{
			document.getElementById("col"+col).style.marginTop =  dest_y_down_col[col]+'px';
			
			POSTRequest('col'+col+'Y='+dest_y_down_col[col]);
			
			dest_y_up_col[col] += 417;
			dest_y_down_col[col] += 417;

			if(dest_y_up_col[col] > -1*beltHeight){
				document.getElementById('arrow_down').style.backgroundPosition = 'center 0px';
			}
			if(dest_y_down_col[col] < 417){
				document.getElementById('arrow_up').style.backgroundPosition = 'center 0px';
				//alert(dest_y_down);
			}
					
	
		}
    }
}

function moveCol1() {

    if(x < dest_x_col1){
		
		document.getElementById('arrow_down').style.backgroundPosition = 'center -40px';
		document.getElementById('arrow_up').style.backgroundPosition = 'center -40px';

        document.getElementById('col_menu1').style.color = '#FFFFFF';
		document.getElementById('col_menu2').style.color = '#999999';
		document.getElementById('col_menu3').style.color = '#999999';
		document.getElementById('col_arrow').style.backgroundPosition = '47px -23px';

		//Keep on moving the image till the target is achieved
		x = x + interval2; 
				
		//Move the image to the new location
		document.getElementById("belt").style.marginLeft =  x+'px';
			
		if (x+interval2 < dest_x_col1) {
			//Keep on calling this function every 10 microsecond 
			//	till the target location is reached
			window.setTimeout('moveCol1()',5);
		}else{
			
			document.getElementById("belt").style.marginLeft = dest_x_col1+'px';
			
            POSTRequest('col=1');
			
			col = 1;
			
			beltHeight = colHeight[col];
			
			if(dest_y_up_col[col] > -1*beltHeight){
				document.getElementById('arrow_down').style.backgroundPosition = 'center 0px';
			}
			if(dest_y_down_col[col] < 417){
				document.getElementById('arrow_up').style.backgroundPosition = 'center 0px';
			}
				
		}
    }

}

function moveCol2() {

    if(x > dest_x_col2){
		
		document.getElementById('arrow_down').style.backgroundPosition = 'center -40px';
		document.getElementById('arrow_up').style.backgroundPosition = 'center -40px';

        document.getElementById('col_menu1').style.color = '#999999';
		document.getElementById('col_menu2').style.color = '#FFFFFF';
		document.getElementById('col_menu3').style.color = '#999999';
		document.getElementById('col_arrow').style.backgroundPosition = 'center -23px';

		//Keep on moving the image till the target is achieved
		x = x - interval2; 
				
		//Move the image to the new location
		document.getElementById("belt").style.marginLeft =  x+'px';
			
		if (x-interval2 > dest_x_col2) {
			//Keep on calling this function every 10 microsecond 
			//	till the target location is reached
			window.setTimeout('moveCol2()',5);
		}else{
			
			document.getElementById("belt").style.marginLeft = dest_x_col2+'px';
			
			POSTRequest('col=2');			
            			
			col = 2;
			
			beltHeight = colHeight[col];
			
			if(dest_y_up_col[col] > -1*beltHeight){
				document.getElementById('arrow_down').style.backgroundPosition = 'center 0px';
			}
			if(dest_y_down_col[col] < 417){
				document.getElementById('arrow_up').style.backgroundPosition = 'center 0px';
			}
				
		}
    }else if(x < dest_x_col2){

        document.getElementById('col_menu1').style.color = '#999999';
		document.getElementById('col_menu2').style.color = '#FFFFFF';
		document.getElementById('col_menu3').style.color = '#999999';
		document.getElementById('col_arrow').style.backgroundPosition = 'center -23px';

		//Keep on moving the image till the target is achieved
		x = x + interval2; 
				
		//Move the image to the new location
		document.getElementById("belt").style.marginLeft =  x+'px';
			
		if (x+interval2 < dest_x_col2) {
			//Keep on calling this function every 10 microsecond 
			//	till the target location is reached
			window.setTimeout('moveCol2()',5);
		}else{
			
			document.getElementById("belt").style.marginLeft = dest_x_col2+'px';
			
			POSTRequest('col=2');
          	
			col = 2;
			
			beltHeight = colHeight[col];
			
			if(dest_y_up_col[col] > -1*beltHeight){
				document.getElementById('arrow_down').style.backgroundPosition = 'center 0px';
			}
			if(dest_y_down_col[col] < 417){
				document.getElementById('arrow_up').style.backgroundPosition = 'center 0px';
			}
				
		}
    }

}
function moveCol3() {

    if(x > dest_x_col3){
		
		document.getElementById('arrow_down').style.backgroundPosition = 'center -40px';
		document.getElementById('arrow_up').style.backgroundPosition = 'center -40px';

        document.getElementById('col_menu1').style.color = '#999999';
		document.getElementById('col_menu2').style.color = '#999999';
		document.getElementById('col_menu3').style.color = '#FFFFFF';
		document.getElementById('col_arrow').style.backgroundPosition = '159px -23px';

		//Keep on moving the image till the target is achieved
		x = x - interval2; 
				
		//Move the image to the new location
		document.getElementById("belt").style.marginLeft =  x+'px';
			
		if (x-interval2 > dest_x_col3) {
			//Keep on calling this function every 10 microsecond 
			//	till the target location is reached
			window.setTimeout('moveCol3()',5);
		}else{
			
			document.getElementById("belt").style.marginLeft = dest_x_col3+'px';
			
			POSTRequest('col=3');
			
			col = 3;
			
			beltHeight = colHeight[col];
			
			if(dest_y_up_col[col] > -1*beltHeight){
				document.getElementById('arrow_down').style.backgroundPosition = 'center 0px';
			}
			if(dest_y_down_col[col] < 417){
				document.getElementById('arrow_up').style.backgroundPosition = 'center 0px';
			}
				
		}
    }

}

function createXMLHttpRequest() {
    if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
}
 
function POSTRequest(query) {
    createXMLHttpRequest();
    
    var url = "http://www.zeedijk-ontwerp.nl/web/";
      
    xmlHttp.open("POST", url, true);
    //xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");    
    xmlHttp.send(query);
}