YAHOO.namespace('cs');

YAHOO.cs.ImageChooser = function(el){
	var dataUrl = '/news/getImages/';
	var amazonURL = 'http://cstest.s3.amazonaws.com';
	var categories = new Array('profile','conference','hs','college','misc');
	var gal_link = '';
	
	//create new dialog
	var container = new YAHOO.widget.Panel("imgContainer", { width:"600px", visible:false, draggable:false, close:true, fixedcenter:true } );
	
	function init(){
		addGalleryLink();
		container.setHeader('Image Chooser');
		var containerMkp = buildMkp();
		container.setBody(containerMkp);
		container.render(document.body);				
		getTabs(categories);				
		//attach uploadBtn listener
		var uploadBtn = YAHOO.util.Dom.get('upload-btn');		
		YAHOO.util.Event.on(uploadBtn, 'click', function(e){
			if (e) YAHOO.util.Event.preventDefault(e);
			//submit form async
			YAHOO.util.Connect.setForm('uploadForm',true);
			var cObj = YAHOO.util.Connect.asyncRequest('POST', '/ws/s3Upload/',
						{
                             upload: function (o) {
									el.value = o.responseText;
									container.hide();
                             },
                             failure: function(o) {
                                 console.log(o);
                             }
                         });

		});
		
	}
	
	
	
	function handleFailure(o){
		console.log('failed!');
	}
	
	
	
	
	function buildMkp(){
		var mkp ='';
		mkp = mkp + getUploadMkp(categories);
		mkp = mkp + '<div id="tabContainer"></div>';
		return mkp;
	}
	
	
	
	function getImage(path){
		return '<img class="s3image" src="'+amazonURL+'/'+path+'" style="width:50px; height:50px;margin:5px;border:1px solid #ccc;" />';
	}
	
	
	
	function getUploadMkp (categories) {
		var mkp = '<form id="uploadForm" enctype="multipart/form-data" method="POST">	\
						<div style="width:100%;height:80px;border-bottom:1px solid #ccc;margin-bottom:5px;padding-bottom:5px;">Upload Image \
							<input name="photo" type="file" class="input" /><br /><br>* please, use meaningful names when uploading pictures<br>';
							
							for (var i=0; i < categories.length; i++){
								var checked = (i == 0)?'checked':'';
								mkp = mkp + '<span style="margin:5px;"><input type="radio" name="category" value="'+categories[i]+'" '+checked+'/>'+categories[i]+'</span>';
							};
							
							
		mkp = mkp + '<input name="uploadBtn" class="button" type="button" id="upload-btn" value="Upload"></div></form>';
		return mkp;
	}
	

	function getTabs (categories) {
		(function() {
			
			function handler () {
				//attach img click listeners
				var images = YAHOO.util.Dom.getElementsByClassName('s3ImageTag', 'img', 'imgContainer');
				YAHOO.util.Event.on(images, 'click', function(){
					el.value = this.src;
					container.hide();
				});
			}
			
		    var tabView = new YAHOO.widget.TabView();
			for (var i=0; i < categories.length; i++){
				status = (i == 0)? true : false;
				tabView.addTab( new YAHOO.widget.Tab({
			        label: categories[i],
			        dataSrc: dataUrl + categories[i] + '/',
				cacheData: true,
				active: status
			    }));
			};

		    tabView.appendTo('tabContainer');
			
			//attach click listeners on contentChange
			var tabs = tabView._configs.tabs.value;	
			for (var i=0; i < tabs.length; i++) {
				var tab = tabs[i];
				tab.on('contentChange', handler);
			};
		
		})();		
		return true;
	}
	
	function addGalleryLink (){	
		//add a gallery link
	
		gal_link = document.createElement('a');
		gal_link.setAttribute('id','image-chooser');
		gal_link.setAttribute('href','#');
		gal_link.innerHTML = 'Open Gallery';
		gal_link.setAttribute('style','margin-left:5px');
		
		if (el.nextSibling){
			el.parentNode.insertBefore(gal_link, el.nextSibling);
		}else{
			el.parentNode.appendChild(gal_link);
		}		
	}
	
	init();
	
	YAHOO.util.Event.on(gal_link, 'click',function(e){
		if (e) YAHOO.util.Event.preventDefault(e);		
		container.show();
	});
}



YAHOO.cs.ImageUploader = function(link_id,image_id,swimmer_id){	
	var link_el = YAHOO.util.Dom.get(link_id);
	var image_el = YAHOO.util.Dom.get(image_id);
		
	var container = new YAHOO.widget.Panel("imgContainer", { width:"400px", visible:false, draggable:false, close:true, fixedcenter:true } );
	
	var buildMkp = function() {
		var mkp = '<form id="uploadForm" enctype="multipart/form-data" method="POST" action="/ws/s3Upload">	\
						<div style="width:100%;height:50px;border-bottom:1px solid #ccc;margin-bottom:5px;padding-bottom:5px;">Upload Image \
							<input name="category" type="hidden" value="profile" /> \
							<input name="photo" type="file" class="input" />';		
		mkp = mkp + '<input class="button" name="uploadBtn" type="button" id="upload-btn" value="Upload"</div></form>';
		return mkp;
	}
	
	var onComplete = function(url) {
		var cObj = YAHOO.util.Connect.asyncRequest('POST', '/swimmer/'+swimmer_id+'/save/picmodule/',{
			success: function (o) {
				
			},
			failure: function(o) {
				alert(o);
			}
		},	YAHOO.lang.JSON.stringify({'url':url}));
	};
	
	var init = function(container){
		
		//init container
		container.setHeader('Image Uploader');
		var containerMkp = buildMkp();
		container.setBody(containerMkp);
		container.render(document.body);

		//attach uploadBtn listener
		var uploadBtn = YAHOO.util.Dom.get('upload-btn');
		YAHOO.util.Event.on(uploadBtn, 'click', function(e){
			uploadBtn.value = 'Uploading...';
			if (e) YAHOO.util.Event.preventDefault(e);
			//submit form async
			YAHOO.util.Connect.setForm('uploadForm',true);
			var cObj = YAHOO.util.Connect.asyncRequest('POST', '/ws/s3Upload/',{
				upload: function (o) {
					image_el.src = o.responseText;
					container.hide();
					//update swimmer
					onComplete(image_el.src);
				},
				failure: function(o) {
					alert(o);
				}
			});
			

		});		
	}(container);
	

	YAHOO.util.Event.on(link_el, 'click',function(e){
		if (e) YAHOO.util.Event.preventDefault(e);
		container.show();
	});
	
}