// Image Picker 
//create a namespace 
YAHOO.namespace("qw.image")

//create a new object for this module:
YAHOO.qw.image.inDialog = function(){
	
	return {
		
		init: function()
		{
		
			// Instantiate the Dialog
            
            this.dialog = new YAHOO.widget.Dialog("yui-imagepicker-panel", {
                fixedcenter: true,
                visible: false,
                width: "800px",
				height: "517px",
				modal:true,
				close:false
            });
			this.fileSetSize = 20;
			this.currentSet = 0;
			
			this.dialog.render();
			
			// Show the dialog
	
			this.show = function(op,onPick)
			{
				this.onPick = onPick;
				this.selectedFile = null;
				$('yui-imagepicker-panel').style.display="block";
				this.dialog.op = op;
				var imagePaths = "";
				if (op.choices) {
					if (op.choices.image != null) {
						imagePaths = op.choices.image;
					}
					else {
						imagePaths = op.choices.sub("image:", "");
					}
					$('yui-imagepicker-panel_h').update('Choose an Image');
				}
				
				if(op.type == "file"){
					$('yui-imagepicker-panel_h').update('Choose a File');
					imagePaths = "files"
					if (op.choices) {
						if (op.choices.image != null) {
							imagePaths = 'files/' + op.choices.image;
						}
						else {
							imagePaths = 'files/' + op.choices.sub("image:", "");
						}
						$('yui-imagepicker-panel_h').update('Choose an Image')
					}
					
				}
				
				if(op.type == "media"){
					$('yui-imagepicker-panel_h').update('Choose a Media File');
					imagePaths = "media"
					if (op.choices.image != null) {
							imagePaths = 'media/' + op.choices.image;
						}
						else {
							imagePaths = 'media/' + op.choices.sub("image:", "");
						}
					
				}
				
				this.dialog.lastBox = null;
				var imgBox = $("yui-images");
				imgBox.update("");
				this.dialog.show();
				this.fileSetSize = 12;
				this.currentSet = 0;
				$('qw-pickright').hide();
				$('qw-pickleft').hide();
				
				// SHOW BUTTONS
				
				if(imagePaths.indexOf('$t') >= 0)
				{
					$('qw-upload').hide();
					$('qw-sitefiles').show();
					$('qw-templatefiles').hide();
				}
				else{
					$('qw-upload').show();
					$('qw-sitefiles').hide();
					$('qw-templatefiles').hide();
				}
				
				// FETCH
				
				this.imagePath = imagePaths;
				this.dialog.imagePath = imagePaths;
				
				qwFetchImages(imagePaths,this.showFiles.bind(this))
				
			}
			
			this.showSiteImages = function(op)
			{
				this.selectedFile = null;
				if(this.dialog.op == null)
				{
					return;
				}
				
				this.cancel();

				$('yui-imagepicker-panel').style.display="block";
				this.dialog.lastBox = null;
				var imgBox = $("yui-images");
				imgBox.update("");
				this.dialog.show();
				this.fileSetSize = 12;
				this.currentSet = 0;
				$('qw-pickright').hide();
				$('qw-pickleft').hide();
				
				// SHOW BUTTONS
				
				$('qw-upload').show();
				$('qw-sitefiles').hide();
				$('qw-templatefiles').show();
				
				// FETCH
				
				this.imagePath = "images";
				this.dialog.imagePath = "images";
				qwFetchImages("",this.showFiles.bind(this))
				
			}
			
			this.showFiles = function(images)
			{
				
				this.images = images;
				var imgBox = $("yui-images");
				imgBox.update("");
				this.fileIndex = 0;
				var numFiles = this.images.files.length;
				//this.images.sort(function(a,b){return a.ctime - b.ctime})
				this.images.files.each(function(f){
					if(f == null || typeof(f) == "undefined")
					{
						return;
					}
					
					f.index = this.fileIndex;

					if (this.fileIndex >= this.currentSet && this.fileIndex < (this.currentSet + this.fileSetSize)) {
						
						var box = new Element("div", {
							style: "float:left;width:138px;height:138px;border:inset 2px silver;background:#000000;margin:5px;overflow:hidden;text-align:center;cursor:pointer"
						})
						imgBox.insert({
							bottom: box
						})
						
						var mvert = Math.floor((136 - f.thumbHeight)/2);
						var mhorz = Math.floor((136 - f.thumbWidth)/2);
						var w = 138 - (mhorz * 2);
						var h = 138 - (mvert * 2);
						
						if(f.type != 'image')
						{
							w = 138;
							h = 138;
						}
						
						var thumbBox = new Element("div", {
							style: "float:left;width:" + w + "px;height:" + h + "px;border:inset 2px silver;background:#000000;padding-top:" + mvert + "px;padding-bottom:" + mvert + "px;padding-left:" + mhorz + "px;padding-right:" + mhorz + "px;cursor:pointer;margin:0"
						})
						box.insert({
							bottom: thumbBox
						})
						box.url = this.images.baseUrl + f.file;
						if (f.type == 'image') {
							box.thumbUrl = this.images.baseUrl + f.thumb;
						}
						if (f.type == 'pdf') {
							box.thumbUrl = "/media/images/pdficon_large.png";
						}
						if (f.type == 'swf') {
							box.thumbUrl = "/media/images/swficon_large.png";
						}
						box.file = f;
						
						thumbBox.box = box;
						thumbBox.url = this.images.baseUrl + f.file;
						if (f.type == 'image') {
							thumbBox.thumbUrl = this.images.baseUrl + f.thumb;
						}
						if (f.type == 'pdf') {
							thumbBox.thumbUrl = "/media/images/pdficon_large.png";
						}
						if (f.type == 'swf') {
							thumbBox.thumbUrl = "/media/images/swficon_large.png";
						}
						thumbBox.file = f;
						
						thumbBox.op = this.dialog.op;
						var img = new Element("img", {
							src: thumbBox.thumbUrl,
							border: "0",
							title: f.file
						})
						img.box = box;
						img.op = this.dialog.op;
						img.url = this.images.baseUrl + f.file;
						thumbBox.insert({
							bottom: img
						})
						
						var fn = function(e){
							if (this.dialog.lastBox) {
								this.dialog.lastBox.setStyle({
									border: "inset 2px silver"
								});
							}
							box.setStyle({border:"solid 2px yellow"});
							this.dialog.lastBox = box;
							
							if (e.element().op.target != null && typeof(e.element().op.target) != 'undefined') {
								qwSetImage(e.element().op, e.element().url);
							}
							
							pick = this.pickFile.bind(this);
							pick(f);

						}.bind(this);
						
						thumbBox.observe("click", fn);
					}
					
					this.fileIndex++;
					
					if(this.currentSet == 0)
					{
						$('qw-pickleft').hide();
					}
					else{
						$('qw-pickleft').show();
					}
					if((this.currentSet + this.fileSetSize) >= numFiles)
					{
						$('qw-pickright').hide();
					}
					else{
						$('qw-pickright').show();
					}
					
				}.bind(this));
				
				// FOLDERS
				return;
				var folders = $A(this.images.folders)

				if(folders.size() >= 0)
				{
					foldersdiv = $('picker_folders');
					foldersdiv.update('');
					foldersdiv.insert({bottom:"<hr/><div style='text-align:center;font-size:12px;color:#FFFF00'>Folders</div><hr/>"});
					folderlist = new Element("ul",{style:'list-style-type:disc;margin:0;padding:0'});
					foldersdiv.insert({bottom:folderlist});
					
                    folders.each(function(f){
	
                        if (f == null || typeof(f) == "undefined") {
                            return;
                        }
						if(f == "_thumbs")
						{
							return;
						}
						li = new Element("li",{style:'list-style-type:disc;margin:0;padding:0'});
						folderlist.insert({bottom:li});
						link = new Element("a",{href:'#',style:'color:#E79C02;text-decoration:none;text-transform:capitalize;font-size:12px'});
						link.update(f.replace("_"," "));
						li.insert({bottom:link});
						link.observe("click",function(){
							
							var op = Object.clone(this.dialog.op);
							this.cancel();
							if (op.choices.image != null) {
								imagePaths = op.choices.image;
								op.choices.image = f; //this.imagePath + "/" + f;
							}
							else {
								op.choices = f; //this.imagePath + "/" + f;
							}

							this.show(op);
							return false;
						}.bind(this));
						
                    }.bind(this));
				}
			}
			
			this.pickFile = function(file)
			{
				fpinfo = $('picker_fileinfo');
				fpinfo.update("");
				fpinfo.insert({bottom:"<div style='text-align:center'>File Information</div><hr/>"});
				fpinfo.insert({bottom:"<div>Name: <span style='color:#ffffff'>" + file.file + "</span></div>"});
				if(file.type=="image")
				{
					fpinfo.insert({bottom:"<div>Width: <span style='color:#ffffff'>" + file.width + "</span></div>"});
					fpinfo.insert({bottom:"<div>Height: <span style='color:#ffffff'>" + file.height + "</span></div>"});
				}
				if(file.type=="pdf")
				{
					fpinfo.insert({bottom:"<div><a target='_blank' href='" + this.images.baseUrl + file.file + "'>View this PDF.</a></div>"});
				}

				if(file.type=="swf")
				{
					fpinfo.insert({bottom:"<div><a target='_blank' href='" + this.images.baseUrl + file.file + "'>View this SWF.</a></div>"});
				}
				if (this.imagePath.indexOf('$t') < 0) {
					fpinfo.insert({bottom:"<br/><div style='text-align:center'>(<a id='fpDelete' href='#' style='color:#E79C02;text-decoration:none'>Delete this file</a>)</div>"});
					del = $('fpDelete');
					del.observe("click", this.deleteFile.bind(this))
				}
			}
			
			
			this.deleteFile = function()
			{
				if(confirm('Are you sure you wish to delete ' + this.dialog.lastBox.file.file + '?') == false)
				{
					return;
				}
                url = "/remove/" + this.imagePath + "/" + this.dialog.lastBox.file.file + "/";
                new Ajax.Request(url, {
                    method: 'get',
                    onSuccess: function(transport){
						this.images.files.splice(this.dialog.lastBox.file.index,1);
                        this.showFiles(this.images);
                    }.bind(this)
                });
				return false;
			}		
				
			this.next = function(files){
				this.currentSet += this.fileSetSize;
				this.showFiles(this.images);
			}
			
			this.previous = function(files){
				this.currentSet -= this.fileSetSize;
				this.showFiles(this.images);
			}
			
			this.keep = function(){
				if(this.dialog.lastBox == null)
				{
					return;
				}
				value = this.dialog.lastBox.url;
				thumb = this.dialog.lastBox.thumbUrl;
				if (this.dialog.op.target != null && typeof(this.dialog.op.target) != 'undefined') {
					qwCommit(this.dialog.op, value);
				}
				if(this.onPick)
				{
					this.onPick(value,thumb)
				}
				this.dialog.hide();
				$('yui-imagepicker-panel').style.display="none";
			}
			
			this.cancel = function(){
				if (this.dialog.op.target != null && typeof(this.dialog.op.target) != 'undefined') {
					qwSetImage(this.dialog.op, this.dialog.op.value);
				}
				this.dialog.hide();
				$('yui-imagepicker-panel').style.display="none";
			}
			
			this.upload = function(){
				doUpload(this.imagePath,function(file){
					
					this.selectedFile = file;
					this.images.files.push(file)
					this.showFiles(this.images);
				}.bind(this));
			}
			
		}
		
		
	}

}()

YAHOO.util.Event.onDOMReady(YAHOO.qw.image.inDialog.init, YAHOO.qw.image.inDialog, true); 


function doImageDialog(op,onPick)
{				
	YAHOO.qw.image.inDialog.show(op,onPick);
}

function onImageSet(value,op)
{
	qwCommit(op,value);
}

function imagePrevious()
{
	YAHOO.qw.image.inDialog.previous(op);
}

function imageNext()
{
	YAHOO.qw.image.inDialog.next(op);
}

function imageKeep()
{
	YAHOO.qw.image.inDialog.keep();
}

function imageCancel()
{
	YAHOO.qw.image.inDialog.cancel();
}

function siteImages()
{
	YAHOO.qw.image.inDialog.showSiteImages();
}

function templateImages()
{
	YAHOO.qw.image.inDialog.show(YAHOO.qw.image.inDialog.dialog.op);
}

function uploadImage()
{
	YAHOO.qw.image.inDialog.upload();
}