var timer;
var interval = 3000;

var existing_images = new Array();
var img_count = 0;

function validateImage(form){
	
	var allowed_ext = ['.jpg','.jpeg','.gif'];
	
	var inputs = form.elements;
	var inputs_count = inputs.length;
	
	for(var i=0; i< inputs_count; i++){
		if(typeof(inputs[i]) !='undefined' && inputs[i].id !=''){
			if(/relative_id*/.test(inputs[i].id)){
				var relative_id = inputs[i];
			}
			if(/image_type*/.test(inputs[i].id)){
				var image_type = inputs[i];
			}
			if(/image*/.test(inputs[i].id)){
				var image_file = inputs[i];
			}
		}
	}
	
	if(relative_id.value == ''){
		scroll(0, 300);
		switchTab('add_product_container', 'product_description');
		validate.message(null, 'You must enter a Product Title before uploading an image!');
		return false;
	}
	
	var divs = form.getElementsByTagName('div');
	
	for(var d=0; d < divs.length; d++){
		if(typeof(divs[d].id) !='undefined' || divs[d].id != null){
			if(/image_container_wrapper*/.test(divs[d].id)){
				var image_container_wrapper = divs[d];
			}
			if(/image_container*/.test(divs[d].id)){
				var image_container = divs[d];
			}
			if(/image_loader*/.test(divs[d].id)){
				var image_loader = divs[d];
			}
		}
	}
	
	var valid_image = false;
	var file_name = image_file.value.toLowerCase();
	
	for(var i=0;i<allowed_ext.length;i++){
		if(file_name.lastIndexOf(allowed_ext[i]) > 0){
			valid_image = true;
			break;
		}
	}
	
	if(valid_image == false){
		validate.message(image_file, 'Invalid image type. Please upload a JPG or GIF file.');
		return false;
	}

    if (image_container === undefined) {

        image_container = document.getElementById('image_container');
    }
	
	var img_ul = image_container.getElementsByTagName('ul');
		img_count = img_ul.length;
		
	for(var j=0; j<img_count ; j++){
		var input = img_ul[j].getElementsByTagName('input');
		existing_images[j] = input[0].value;
	}
	
	if(img_count==4){
		validate.message(null, 'You can only upload 4 images.');
		return false;
	}
	
	form.submit();

    if (image_loader === undefined) {

        image_loader = document.getElementById('image_loader');
    }

	image_loader.style.display='block';
	
	var counter = 0;
	
	timer = setInterval (function(){

		navigate(SOCIAL_WEB_PATH  + '/image/get-images-json/image_type/'+image_type.value+'/relative_id/'+ relative_id.value, CONTENT_TYPE_JSON,
			
			function(obj){
				
				var max_times = 40; // (max_times * interval) = maximum seconds allowed for upload
				if(obj.data.images != null) {
					var images = obj.data.images;
					
					if(images.length > img_count){
						
						clearInterval(timer);
						image_container.innerHTML='';
						
						for(i in images){
							
							var images_ul = document.createElement('ul');
							var dft_li = document.createElement('li');
							var img_li = document.createElement('li');
							var name_li = document.createElement('li');
							var del_li = document.createElement('li');
							
							dft_li.setAttribute('class', 'img-default-col');
							img_li.setAttribute('class', 'img-col');
							name_li.setAttribute('class', 'img-title-col');
							del_li.setAttribute('class', 'img-delete-col');
							
							dft_li.innerHTML = '<input type="radio" name="default_image" value="' + images[i].image_id + '" onclick="setDefaultImage(this, ' + images[i].image_relative_id + ', ' + images[i].image_type + ');" />'
							img_li.innerHTML = '<img src="' + images[i].image_src + '" title="' + images[i].image_label + '" alt="' + images[i].image_src + '" />';
							name_li.innerHTML = images[i].image_label;
							del_li.innerHTML = '<img src="' + IMAGE_PATH + '/xicon.gif" id="' + images[i].image_id + '" onclick="deleteImageRow(this, '+ images[i].image_id + ');" alt="[X]" style="cursor:pointer;" />';
							
							images_ul.appendChild(dft_li);
							images_ul.appendChild(img_li);
							images_ul.appendChild(name_li);
							images_ul.appendChild(del_li);
							
							image_container.appendChild(images_ul);
							image_loader.style.display='none';

                            if (image_container_wrapper === undefined) {

                                image_container_wrapper = document.getElementById('image_container_wrapper');
                            }

							image_container_wrapper.style.display='block';
						}
						
						dojo.byId('next-step').style.display = 'block';
					}
				}	
				if(counter == max_times){
					validate.message(null, 'Error uploading image. Try uploading a smaller file.');
					image_loader.style.display='none';
					clearInterval(timer);
					return false;
				}
			}
        );
		
		counter++;
	},
	
	interval);
	
}

function setDefaultImage(dft_radio_btn, relative_id, image_type){
	
	var image_id = dft_radio_btn.value;
		
		navigate(SOCIAL_WEB_PATH  + '/image/save-default-image/image_id=' + image_id + '/image_type/' + image_type + '/relative_id/' + relative_id, CONTENT_TYPE_JSON,
		
    		function (obj) {
    			if(obj.data > 0){
    				//let user know default was set
    			}
    		}
        );
}

function deleteImageRow(elem, image_id){
	
	var row = elem.parentNode.parentNode;
	var image_container = row.parentNode; // del_img > li > ul > img_container
	
	if(confirm('Are you sure? You cannot undo this!')){

		navigate(SOCIAL_WEB_PATH  + '/image/delete/image_id/' + image_id, CONTENT_TYPE_JSON,
		
    		function (data) {
    			image_container.removeChild(row);
    		}
		);
	}
	
	
	var number_of_images = dojo.query('UL', image_container);
	
	if(number_of_images.length == 1){
		dojo.byId('image_container_wrapper').style.display = 'none';
		dojo.byId('next-step').style.display = 'none';
	}
}