//globals
var objects = [];
var selected;

var canvasWidth = 500;
var canvasHeight = 350;
var canvasBackground = '#fff';
var canvasBackgroundImage = '';
var canvasBackgroundRepeat = '';

function redrawCanvas() {
//	saveKiwi();
}

function CanvasObject() {
	this.top = 15;
	this.left = 20;
	this.width = 100;
	this.height = 2;
	this.divId = '';
}

CanvasObject.prototype.redraw = function() {
//	saveKiwi();
}

function TextObject(text, pos, props) {
	
	this.properties = {
		text: text,
		fontFamily: 'Arial',
		fontSize: 14,
		color: '#000000',
		bold: 0,
		italic: 0,
		underline: 0
	};
		
	if(!text) text = prompt('Enter the text:');
	if(!text) return;
	this.properties.text = text;
		
	this.divId = assignID();
	var div = new Element('div', { 'class': 'textobject', 'id': this.divId })
					.observe('click', function() {selectObject(this, 'txt')});
	$('kiwicanvas').insert(div);
	
	if(pos) setPosition(div, pos);
	
	div.observe('click', function() {selectObject(this)});

	//make draggable
	Draggable.init(div);
	div.onDragEnd = function(x,y) {
		getObject(div.id).top = y;
		getObject(div.id).left = x;
	}
	
	objects.push(this);
	this.redraw();
	selectObject(div, 'txt');
}
TextObject.prototype = new CanvasObject();

TextObject.prototype.redraw = function() {
	var div = $(this.divId);
	div.update(this.properties.text);
	
	this.properties.bold == 1 ? bold = 'bold': bold = 'normal';
	this.properties.italic == 1 ? ital = 'italic' : ital = 'normal';
	this.properties.underline == 1 ? und = 'underline' : und = 'none';
	
	div.setStyle({
		fontFamily: this.properties.fontFamily, 
		fontSize: this.properties.fontSize+'px',
		color: this.properties.color,
		fontWeight: bold,
		fontStyle: ital,
		textDecoration: und
	});
//	saveKiwi();
}

function ImageObject(url, pos) {

	this.properties = {
		from: 'ext',
		pid: '',
		src: url,
		width: 0,
		height: 0
	}

	this.divId = assignID();
	var div = new Element('div', { 'class': 'imageobject', 'id': this.divId }).observe('click', function() {selectObject(this, 'img')});
	$('kiwicanvas').insert(div);
	if(pos) setPosition(div, pos);

	var num = Math.floor(Math.random()*2+1);
	img = new Image();
	img.id = this.divId + '_img';
	img.src = imgsURL + "f"+ num +".jpg";

	//programatically set dimensions
	var ratio = img.height/img.width;

	if(img.width > canvasWidth || img.height > canvasHeight) {
		if(ratio > 1) {
		//portrait
			ratio = img.width/img.height;
			img.height  = Math.round(0.9*canvasHeight);
			img.width   = Math.round(img.height*ratio);
		} else {
			//landscape 	
			img.width  = Math.round(0.9*canvasWidth);
			img.height = Math.round(img.width*ratio);
		}
	} 
	div.setStyle({width: img.width+'px', height: img.height+'px'});

	this.properties.width = img.width;
	this.properties.height = img.height;
	
	div.insert(img);
	
	//make draggable
	Draggable.init(div);
	div.onDragEnd = function(x,y) {
		getObject(div.id).top = y;
		getObject(div.id).left = x;
	}
	
	objects.push(this);
	this.redraw();
	selectObject(div);
}
ImageObject.prototype = new CanvasObject();

ImageObject.prototype.redraw = function() {
	var div = $(this.divId);
	
	div.firstChild.src = this.properties.src;
	div.firstChild.width = this.properties.width;
	div.firstChild.height = this.properties.height;

//	saveKiwi();
}

function VideoObject(url, thumb, tWidth, tHeight) {

	this.properties = {
		swfsrc: url,
		thumb: thumb,
		width: tWidth,
		height: tHeight
	}

	this.divId = assignID();
	var div = new Element('div', { 'class': 'videoobject', 'id': this.divId })
					.observe('click', function() {selectObject(this, 'img')});
	
	var overlay = new Element('img',
					{
						'src': thumb,
						'width': tWidth,
						'height': tHeight
					}
				)
	div.insert(overlay);
	$('kiwicanvas').insert(div);
	
	Draggable.init(div);
	div.onDragEnd = function(x,y) {
		getObject(div.id).top = y;
		getObject(div.id).left = x;
	}
	
	objects.push(this);
	this.redraw();
	selectObject(div);
}
VideoObject.prototype = new CanvasObject();

VideoObject.prototype.redraw = function() {
	var div = $(this.divId);
	
	div.firstChild.src = this.properties.thumb;
	div.firstChild.width = this.properties.width;
	div.firstChild.height = this.properties.height;
	
//	saveKiwi();
}

function selectObject(obj, type) {	

	//unselect selected
	unselect();
	//add obj to selected
	selected = getObject(obj.id);

	//show object properties
//	var prop = $('object-properties');

	var prop = new Element('div');

	if(selected instanceof TextObject) {
			showTxtProperties(prop, obj);
	} else if(selected instanceof ImageObject) {
			showImgProperties(prop, obj);
	} else if(selected instanceof VideoObject) {
			showVidProperties(prop, obj);
	}	
	
	var win = new Window(
				{
					title: "Object Properties", 
					className: "alphacube", 
					width:350, height:150,
					zIndex: 100, 
					resizable: true, 
					maximizable: false,
					draggable:true,
					wiredDrag: true
				})
	win.getContent().insert(prop);
	win.showCenter();
}

function unselect() {
	//empty selected[]
	selected = null;
	//empty properties
//	removeChildren($('object-properties'));
	Windows.closeAll();
}

function removeChildren(obj) {
	var children = obj.childElements();
	for(var i=0; i<children.length; i++) {
		children[i].remove();
	}
}

function setTextDialog(id) {
	var dialog = new Dialog(Dialog.DIALOG_POP)
	dialog.showChoice('Change Text', text_choice, 'Change', 'Nevermind');

	dialog.onconfirm = function() {
		setText(id, $('change_text_input').getValue());
	};
}

function showTxtProperties(prop, obj) {

	showChangeTextOption(prop, obj);

	var fontP = new Element('p')
	showFontFamilyOptions(fontP, obj);
	showFontSizeOptions(fontP, obj);
	prop.insert(fontP);

	var optsP = new Element('p');
	showTextColourOption(optsP, obj);
	showStyleOption(optsP, '<img src="images/bold.png" alt="Bold" />', 'Bold', 'font-weight:bold', toggleBold);
	showStyleOption(optsP, '<img src="images/italic.png" alt="Italic" />', 'Italic', 'font-style:italic', toggleItalic);
	showStyleOption(optsP, '<img src="images/underline.png" alt="Underline" />', 'Underline', 'text-decoration:underline', toggleUnderline);
	prop.insert(optsP);
	
	showDeleteObjectOption(prop, obj);
}

function showChangeTextOption(prop, obj) {
	var inp = new Element('input', 
					{ 'value': obj.innerHTML })
					.observe('blur',function(){setText(this.value);});
	prop.insert(new Element('p').update('Change Text: ').insert(inp));
}

function showTextColourOption(prop, obj) {
	var colourTool = new Element('span', { 'class': 'to-tool-style', 'title': 'Change text color' })
						.update('<img src="images/text_color.png" alt="Change text color" />')
						.observe('click',selectFontColour);
	prop.insert(colourTool);
}

function showStyleOption(prop, text, title, style, func) {
	var opt = new Element('span',
					{ 
						'class': 'to-tool-style',
						'style': style,
						'title': title
					})
					.update(text)
					.observe('click', func);
	prop.insert(opt);
}

function showDeleteObjectOption(prop, obj) {
	//delete
	var delTool = new Element('span',
						{ 
							'class': 'to-tool-delete'
						})
						.update('Delete')
						.observe('click',deleteObject);
	prop.insert(new Element('p').insert(delTool));
}

function showFontFamilyOptions(prop, obj) {

	var fonts = ['Arial', 'Comic Sans MS', 'Courier New', 'Georgia', 'Impact', 'Times'];
	
	var selLbl = new Element('label', {'for':'fontFamily'}).update('Font')
	var sel = new Element('select',
			{
				'name': 'fontFamily'
			})
			.observe('change', function() { setFontFamily(this.value) })
	
	for(var i=0; i<fonts.length; i++) {
		var font = fonts[i];
		var f = new Element('option', 
						{ 
							'title': font,
							'value': font
						})
						.setStyle({fontFamily: font})
						.update(font)
		sel.insert(f);
	}
	prop.insert(selLbl)
		.insert(sel);
}

function showFontSizeOptions(prop,obj) {

	var sizes = [10, 14, 20, 30, 40];

	var selLbl = new Element('label', {'for':'fontFamily'}).update('Size')
	var sel = new Element('select',
			{
				'name': 'fontSize'
			})
			.observe('change', function() { setFontSize(this.value) })
	
	for(var i=0; i<sizes.length; i++) {
		var size = sizes[i];
		var opt = new Element('option',
						{ 
							'title': size,
							'value': size
						})
						.update(size+'px')
		sel.insert(opt);
	}
	prop.insert(selLbl)
		.insert(sel);
}

function deleteObject( ) {
	if(confirm('Are you sure you want to delete this object?')) {
		if(confirm('Seriously? You want to get rid of this thing forever?')) {
			$(selected.divId).remove();
			unselect();
		}
	}
}

function showImgProperties(prop, obj) {

	var chgImg = new Element('p',
					{
						'class': 'to-tool-style',
						'title': 'Change Image'
					})
					.update('Change Image')
					.observe('click', selectImageDialog);
	prop.insert(chgImg);

	showStyleOption(prop, ' o ', 'Make Smaller', 'font-size:14px', makeSmaller);
	showStyleOption(prop, ' O ', 'Make Bigger', 'font-size:20px', makeBigger);
	showDeleteObjectOption(prop, obj);
}

function insertVideo(id) {
	var thumb = $('yt_video_thumb').value;
	var url = $('yt_video_url').value;
	Windows.closeAll();
	if(id) {
		var obj = getObject(id);
		obj.properties.swfsrc = url;
		obj.properties.thumb = thumb;
		obj.redraw();
	} else {
		new VideoObject(url, thumb, 425, 350)
	}
}

function selectVideoDialog(id) {

Dialog.info(
	{
		url: "YouTube/youtube.php", 
		options: 
			{
				method: 'get'
			}
	}, 
	{
		closable: true,
		destroyOnClose: true,
		title: "Select Video",
		className: "alphacube",
		width:600,
		height:500
	});
}

function selectImageDialog(id) {
	alert("Sorry! Images currently aren't supported. Sad isn't it? We know, we know. We cry about it every night :'(");
/*
	Dialog.info(
	{
		url: "Photos/photos.php", 
		options: 
			{
				method: 'get'
			}
	}, 
	{
		closable: true,
		destroyOnClose: true,
		title: "Select Image",
		className: "alphacube",
		width:600,
		height:500
	});
*/
}

function setImage(id, url) {
	var div = $(id);
	var img = div.getFirstChild();
	img.src = url;
}

function showVidProperties(prop, obj) {

	var chgVid = new Element('p',
					{
						'title': 'Change Video'
					})
					.update('Change Video')
					.observe('click', selectVideoDialog);
	prop.insert(chgVid);

	showStyleOption(prop, 'Decrease size', 'Make Smaller', 'background:url(/images/smaller.png) center left no-repeat #fff; padding-left:25px;', makeSmaller);
	showStyleOption(prop, 'Increase size', 'Make Bigger', 'background:url(/images/bigger.png) center left no-repeat #fff; padding-left:25px;', makeBigger);
	showDeleteObjectOption(prop, obj);
}

function setPosition(obj, pos) {
	pos.top ? obj.setStyle({top: pos.top}) : obj.setStyle({top: '0'});
	pos.left ? obj.setStyle({left: pos.left}) : setStyle({left: '0'});
}

/* --Text style options-- */
function setFontFamily(family) {
	selected.properties.fontFamily = family;
	selected.redraw();
}

function setText(text) {
	selected.properties.text = text;
	selected.redraw();
}

function setObjectProperty(prop, value) {
	selected.properties[prop]=value;
	selected.redraw();
}
function toggleObjectProperty(prop, a, b) {
	selected.properties[prop]==a ? selected.properties[prop]=b : selected.properties[prop]=a;
	selected.redraw();
}

function setFontSize(size) {
	selected.properties.fontSize = size;
	selected.redraw();
}

function selectFontColour() {
	$('mini').setStyle({display: 'inline'});
	$('mCur').observe('mouseup', setFontColour);	
}
function setFontColour( ) {
	selected.properties.color = '#'+$('mHEX').innerHTML;
	selected.redraw();
}

function toggleBold( ) {
	selected.properties.bold == 1 ? selected.properties.bold = 0 : selected.properties.bold = 1;
	selected.redraw();
}

function toggleItalic( ) {
	selected.properties.italic == 1 ? selected.properties.italic = 0: selected.properties.italic = 1;
	selected.redraw();
}

function toggleUnderline( ) {
	selected.properties.underline == 1 ? selected.properties.underline = 0: selected.properties.underline = 1;
	selected.redraw();
}

/* --Image style options-- */
function makeBigger( ) {
	selected.properties.width = selected.properties.width+10;
	selected.properties.height = selected.properties.height+10;
	selected.redraw();
}

function makeSmaller( ) {
	selected.properties.width = selected.properties.width-10;
	selected.properties.height = selected.properties.height-10;
	selected.redraw();
}

/* background */
function setBackgroundColour() {
	var clr = $('mHEX').innerHTML
	$('kiwicanvas').setStyle({background: '#'+clr});
	canvasBackground = clr;
	redrawCanvas();
}

function selectBackgroundColour() {
	$('mini').setStyle({display: 'inline'});
	$('mCur').observe('mouseup', setBackgroundColour);
}

function setBackgroundImage(img, clr, tile, obj) {
	var o = $(obj);
	tile==true? repeat = 'repeat' : repeat = "no-repeat";
	o.setStyle({backgroundImage: 'url(' + imgsURL + img +')', backgroundRepeat: repeat})
	canvasBackgroundImage = img;
	canvasBackgroundRepeat = tile;
	redrawCanvas();
}

/* utils */
function assignID() {
	return "object" + objects.length;
}

function getObject(id) {
	for(var i=0; i<objects.length; i++) {
		if(objects[i].divId == id) {
			return objects[i];
		}
	}	
}

function switchObjectOrder(objA, objB) {
	
}

function saveKiwi() {
/*
//    alert('hi');

	var str = '';
	var params = '';

	str += '{';
	str += '"type": "Canvas",';
	str += '"width": "' + canvasWidth +'",';
	str += '"height": "' + canvasHeight +'",';
	str += '"background-color": "' + canvasBackground +'",';
	str += '"background-image": "' + canvasBackgroundImage +'",';
	str += '"background-repeat": "' + canvasBackgroundRepeat +'",';

    str += '"objects": [';
    var objs = new Array(0);
	for(var i=0; i<objects.length; i++) {
		var obj = objects[i];
		var objstr = '{';
		
		if(obj instanceof TextObject) {
			objstr += '"type": "TextObject",';
			objstr += '"text": "' + obj.properties.text +'",';
			objstr += '"fontSize": "' + obj.properties.fontSize +'",';
			objstr += '"fontFamily": "' + obj.properties.fontFamily +'",';
			objstr += '"color": "' + obj.properties.color +'",';
			objstr += '"bold": "' + obj.properties.bold +'",';
			objstr += '"italic": "' + obj.properties.italic +'",';
			objstr += '"underline": "' + obj.properties.underline +'",';
		} else if(obj instanceof ImageObject) {
			objstr += '"type": "ImageObject",';
			objstr += '"from": "'+ obj.properties.from +'",';
			objstr += '"pid": "'+ obj.properties.pid +'",';
			objstr += '"src": "'+ obj.properties.src +'",';
			objstr += '"width": "' + obj.properties.width +'",';
			objstr += '"height": "' + obj.properties.height +'",';
		} else if(obj instanceof VideoObject) {
			objstr += '"type": "VideoObject",';
			objstr += '"swfsrc": "' + obj.properties.swfsrc +'",';
			objstr += '"width": "' + obj.properties.width +'",';
			objstr += '"height": "' + obj.properties.height +'",';
		}
		
		objstr += '"top": "' + obj.top +'",';
		objstr += '"left": "' + obj.left +'"';
		objstr += '}';
        objs.push(objstr);
	}
	str += objs.join(',') + ']}';
//    alert(str);
    params = escape(str);

//kiwi.php/create_temp_save/[id]/[challenge]/[json]
	var filePath = '/kiwi.php/create_temp_save/' + kiwiId + "/" + kiwiChallenge + "/" + params
	
	new Ajax.Request(filePath,
  	{
//		parameters: params,
		method:'post',
		
		onCreate: function() {
//			Saving notification goes here
		},
		onSuccess: function(transport){
			var response = transport.responseText || "no response";
			alert(response);
		},
		onFailure: function(){ 
			alert('Something went wrong while we were saving this kiwi...') 
		}
  	});
*/
}

function selectThisImage(obj) {
	var si = $('selectedImage');
	si.setValue(obj.getSrc());
}
function getSelectedImage() {
	return $('selectedImage').getValue();
}