function save_image_order(which) {

	http_request = false;

	if (window.XMLHttpRequest) { // Mozilla, Safari,...
		http_request = new XMLHttpRequest();
		if (http_request.overrideMimeType) {
			http_request.overrideMimeType('text/xml');
		}
	} else if (window.ActiveXObject) { // IE
		try {
			http_request = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
			http_request = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {}
		}
	}

	if (!http_request) {
		alert('Giving up :( Cannot create an XMLHTTP instance');
		return false;
	}
	
	//hideImageSaveMsg(which);
	
	var ajax_msg = document.getElementById('ajax_msg');
	
	http_request.onreadystatechange = function(){
		if (http_request.readyState == 4) {
			if (http_request.status == 200) {
				
				if(http_request.responseText == 'true'){
					ajax_msg.innerHTML = 'Order saved successfully.'
				} else {
					ajax_msg.innerHTML = 'Could not save order.'
				}
				
				init_images(which);
				//init_page();
			}else if (http_request.status == 404) {
				ajax_msg.innerHTML = 'Could not find component.';
				//init_page();
			} else {
				ajax_msg.innerHTML = 'Could not save order.';
			}
		}
	}
	http_request.open('POST', '/master/portfolio.php', true);
	http_request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	
	var params = "imageorder=";
	var container = document.getElementById(which);
	var images = getElementsByClassName('image', 'div', container);
	for(var i = 0; i < images.length; i++){
		var id = images[i].getAttribute('id');
		var temp = id.split("_"); // id is in the format  image_{image_id}
		params += temp[1]; // just use image_id
		//params += id;
		if(i != (images.length-1)) params += "|";
	}
	http_request.send(params);
	ajax_msg.innerHTML = 'Saving order...';
	
	
}

function init_images(which){
	
	var component = document.getElementById(which);

	Sortable.create(component,
	 {tag:'div',overlap:'vertical',handle:'drag', 
		onChange: function(){
			save_image_order(which);
			//alert("changed");
		}
	})
}

function changeImage(category,subcategory,image){
	
	http_request = false;

	if (window.XMLHttpRequest) { // Mozilla, Safari,...
		http_request = new XMLHttpRequest();
		if (http_request.overrideMimeType) {
			http_request.overrideMimeType('text/xml');
		}
	} else if (window.ActiveXObject) { // IE
		try {
			http_request = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
			http_request = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {}
		}
	}

	if (!http_request) {
		alert('Giving up :( Cannot create an XMLHTTP instance');
		return false;
	}
	
	http_request.onreadystatechange = function(){
		if (http_request.readyState == 4) {
			if (http_request.status == 200) {
				document.getElementById('portviewer').innerHTML = http_request.responseText;
				
				changethumbnails(category,subcategory,image);
				
			}else if (http_request.status == 404) {
				document.getElementById('portviewer').innerHTML = 'Could not find image.';
				
			} else {
				document.getElementById('portviewer').innerHTML = 'Could not change image.';
			}
		}
	}
	
	http_request.open('POST', '/portfolio/portviewer.php', true);
		
	http_request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	
	var params = "c="+category+"&sc="+subcategory+"&i="+image;
	http_request.send(params);
	document.getElementById('portviewer').innerHTML = '<div style="width:100%;margin-top:80px;text-align:center;"><img src="/images/ajax-loader.gif" style="border:none;"></div>';
	
	document.getElementById('prev_next').innerHTML = '';
	document.getElementById('thumbnailbox').innerHTML = '';
}

function changethumbnails(category,subcategory,image){
	
	http_request = false;

	if (window.XMLHttpRequest) { // Mozilla, Safari,...
		http_request = new XMLHttpRequest();
		if (http_request.overrideMimeType) {
			http_request.overrideMimeType('text/xml');
		}
	} else if (window.ActiveXObject) { // IE
		try {
			http_request = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
			http_request = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {}
		}
	}

	if (!http_request) {
		alert('Giving up :( Cannot create an XMLHTTP instance');
		return false;
	}
	
	http_request.onreadystatechange = function(){
		if (http_request.readyState == 4) {
			if (http_request.status == 200) {
				document.getElementById('thumbnailbox').innerHTML = http_request.responseText;
				
				changeButtons(category,subcategory,image);
				
			}else if (http_request.status == 404) {
				document.getElementById('thumbnailbox').innerHTML = 'Could not find image.';
				
			} else {
				document.getElementById('thumbnailbox').innerHTML = 'Could not change image.';
			}
		}
	}
	
	http_request.open('POST', '/portfolio/thumbnailbox.php', true);
		
	http_request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	
	var params = "c="+category+"&sc="+subcategory+"&i="+image;
	http_request.send(params);
	
}

function changeButtons(category,subcategory,image){
	
	http_request = false;

	if (window.XMLHttpRequest) { // Mozilla, Safari,...
		http_request = new XMLHttpRequest();
		if (http_request.overrideMimeType) {
			http_request.overrideMimeType('text/xml');
		}
	} else if (window.ActiveXObject) { // IE
		try {
			http_request = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
			http_request = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {}
		}
	}

	if (!http_request) {
		alert('Giving up :( Cannot create an XMLHTTP instance');
		return false;
	}
	
	http_request.onreadystatechange = function(){
		if (http_request.readyState == 4) {
			if (http_request.status == 200) {
				document.getElementById('prev_next').innerHTML = http_request.responseText;
				
				
				
			}else if (http_request.status == 404) {
				document.getElementById('prev_next').innerHTML = 'Could not find image.';
				
			} else {
				document.getElementById('prev_next').innerHTML = 'Could not change image.';
			}
		}
	}
	
	http_request.open('POST', '/portfolio/prev_next.php', true);
		
	http_request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	
	var params = "c="+category+"&sc="+subcategory+"&i="+image;
	http_request.send(params);
	
}

function viewThumbnails(category,subcategory){
	
	http_request = false;

	if (window.XMLHttpRequest) { // Mozilla, Safari,...
		http_request = new XMLHttpRequest();
		if (http_request.overrideMimeType) {
			http_request.overrideMimeType('text/xml');
		}
	} else if (window.ActiveXObject) { // IE
		try {
			http_request = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
			http_request = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {}
		}
	}

	if (!http_request) {
		alert('Giving up :( Cannot create an XMLHTTP instance');
		return false;
	}
	
	http_request.onreadystatechange = function(){
		if (http_request.readyState == 4) {
			if (http_request.status == 200) {
				document.getElementById('portviewer').innerHTML = http_request.responseText;
				
				
				
			}else if (http_request.status == 404) {
				document.getElementById('portviewer').innerHTML = 'Could not find thumbnails.';
				
			} else {
				document.getElementById('portviewer').innerHTML = 'Could not load thumbnails.';
			}
		}
	}
	
	http_request.open('POST', '/portfolio/thumbnails.php', true);
		
	http_request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	
	var params = "c="+category+"&sc="+subcategory;
	http_request.send(params);
	document.getElementById('portviewer').innerHTML = '<div style="width:100%;margin-top:80px;text-align:center;"><img src="/images/ajax-loader.gif" style="border:none;"></div>';
}