Ext.ns("Ext.ux");
Ext.ux.Findr = function(config) {
	//---------------------------------------------------------------------------------------
	// private
	//---------------------------------------------------------------------------------------
	var that = this;
	var config = config || {};
	var findr, form, label, input, button, info, error, 
		schema = {
			tag: "div",
			cls: "findr",
			children: [{
				tag: "p",
				html: "Be sure to paste in the IMAGE address, not the photo page address. As a hint, the URL should end in .jpg"
			},{
				tag: "form",
				children: [{
					tag: "label",
					html: "Flickr photo URL or image name"
				},{
					tag: "input",
					name: "input",
					value: ""
				},{
					tag: "div",
					cls: "error"
				},{
					tag: "button",
					html: "Find it!"
				}]
			},{
				tag: "div",
				html: " "
			}]
		},
		infoTpl = [
			'<div>Title</div><input value="{0}" />',
			'<div>Description</div><p class="desc">{1}</p>',
			'<div>User Name</div><input value="{2}" />',
			'<div>Real Name</div><input value="{3}" />',
			'<div>Location</div><input value="{4}" />',
			'<div>NSID</div><input value="{5}" />',
			'<div>URL</div><a href="{6}" target="_blank">{6}</a>',
			'<div>Photo Views</div><input value="{7}" />'
		].join(""),
		api = {
			info: "flickr.photos.getInfo"
		},
		apiUrl = "http://www.flickr.com/services/rest/?method={0}&format=json&jsoncallback={1}&api_key={2}",
		photo_id = "&photo_id={0}",
		secret = "&secret={0}";
	//---------------------------------------------------------------------------------------
	// private methods
	//---------------------------------------------------------------------------------------
	function construct(){
		findr = Ext.get(Ext.DomHelper.append(Ext.get(that.ownerCt) || Ext.getBody(), schema));
		form = findr.select("form").item(0);
		label = findr.select("label").item(0);
		input = findr.select("input").item(0);
		button = findr.select("button").item(0);
		info = findr.select("div").item(0);
		error = findr.select("div.error").item(0);
		// events
		form.on("submit", onSubmit);
		// TODO set up label onclick event and event delegation for the info element
	};
	function parseImgUrl(url){
		var imgName = url.split("/").pop();
		return {
			photo_id: imgName.split("_")[0],
			secret: imgName.split("_")[1]
		}
	};
	function onSubmit(evt, el){
		evt.preventDefault();
		that.getInfo();
	};
	//---------------------------------------------------------------------------------------
	// public methods
	//---------------------------------------------------------------------------------------
	this.getInfo = function(){
		var info, url, script;
		if (!input.dom.value.toString().length){
			error.update("Please enter something.");
			if (info){
				info.update("");
			}
			return;
		}
		error.update("");
		info = parseImgUrl(input.dom.value);
		url = String.format(apiUrl, api.info, that.varName + ".infoResponse", that.apiKey) + String.format(photo_id, info.photo_id) + String.format(secret, info.secret);
		if (document.getElementById("FindrScriptTag")){
			document.getElementById("FindrScriptTag").parentNode.removeChild(document.getElementById("FindrScriptTag"));
		}
		script = Ext.get(document.getElementsByTagName("head")[0].appendChild(document.createElement("script")));
		script.dom.id = "FindrScriptTag";
		// console.log(script);
		script.dom.src = url;
	};
	this.infoResponse = function(r){
		if (r.stat == "fail"){
			error.update(r.message);
			return;
		}
		error.update("");
		info.update(String.format(infoTpl,
			r.photo.title._content,
			r.photo.description._content,
			r.photo.owner.username,
			r.photo.owner.realname,
			r.photo.owner.location,
			r.photo.owner.nsid,
			r.photo.urls.url[0]._content,
			r.photo.views
		));
	};
	//---------------------------------------------------------------------------------------
	// public properties
	//---------------------------------------------------------------------------------------
	//---------------------------------------------------------------------------------------
	// constructor work
	//---------------------------------------------------------------------------------------
	Ext.apply(this, config); // apply config to this component
	Ext.ux.Findr.superclass.constructor.call(this, config);
	construct();
};// end object
Ext.extend(Ext.ux.Findr, Ext.Element);