// $Id: editor.js,v 1.5 2007/11/01 14:28:36 xach Exp $

var frameloader;
var LastState = {color: '#FC3',
		 title: '',
		 text: '',
		 titlestyle: ''};

var MaxWidth = 550;

var FinalImageUrl = null;
var LoadFailureCallback = null;

var DefaultColor = '#FC3';

var SaveMonitor = null;

var BlackImage = 'http://static.automotivator.wigflip.com/img/black.gif';
var ClearImage = 'http://static.automotivator.wigflip.com/img/spacer.gif';
var SpinImage = 'http://static.automotivator.wigflip.com/img/spin.gif';

function stateEqual (s1, s2) {
    return (s1.color == s2.color &&
	    s1.title == s2.title &&
	    s1.text == s2.text &&
	    s1.titlestyle == s2.titlestyle);
}

function hide (div) {
    div.style.display = 'none';
}

function show (div) {
    div.style.display = 'block';
}
    

function monitorSaveButton () {
    if (stateEqual(newState(), LastState)) {
	enableSave();
    } else {
	disableSave();
    }
    SaveMonitor = setTimeout('monitorSaveButton()', 250);
}

function withImageLoaded (fun, src) {
    var loader = new Image();
    loader.onload = function () {
	fun(src);
    };

    loader.src = src;
}

function dirty () {
    FinalImageUrl = null;
    hide(id$('downloaders'));
    hide(id$('subdownloaders'));
}

function id$ (name) {
   return document.getElementById(name);
}

function id$v (name) {
    return id$(name).value;
}


function updateTitle () {
    dirty();
    var args = {width: MaxWidth,
		title: id$v('title'),
		titlestyle: id$v('titlestyle')};
    var div = id$('titlediv');
    var color = id$v('color');
    var img = id$('titleimg');

    var callback = function (data) { 
	withImageLoaded(function () {
		browser.updatePNG(img, data.url, data.width, data.height);
		div.style.width = data.width + 'px';
		div.style.height = data.height + 'px';
		div.style.background = color;
	    },
	    data.url);
    };

    ajaxCall("/automotivator/make-title", args, callback);
}

function updateText () {
    dirty();
    var args = {width: MaxWidth,
		text: id$v('text')};
    var callback = function (data) {
	withImageLoaded(function () {
		browser.updatePNG(id$('textimg'), data.url, data.width, data.height);
	    },
	    data.url);
    };


    ajaxCall("/automotivator/make-text", args, callback);
}

function switchStyles (elt) {
    dirty();
    if (id$('titlestyle')) {
	id$(id$v('titlestyle')).style.border = 'solid 1px black';
    }

    id$('titlestyle').value = elt.id;

    elt.style.border = 'solid 1px #fc0';
    if (id$v('title')) {
	updateTitle();
    }

    updateState();
}


function updateColor () {
    dirty();
    var color = id$v('color');
    var pic = id$('picture');
    LastState.color = color;
    pic.style.border = 'solid 2px ' + color;
    id$('titlediv').style.background = color;
}


function newState () {
    var state = {color: id$v('color'),
		 title: id$v('title'),
		 text: id$v('text'),
		 titlestyle: id$v('titlestyle')};

    return state;
}

function setColor (color) {
    id$('color').value = color;
    updateColor();
}


function updateState () {
    var state = newState();
    if (state.color != LastState.color) {
	updateColor();
    }

    if (state.text != LastState.text) {
	updateText();
    }

    if (state.title != LastState.title) {
	updateTitle();
    }

    enableSave();
    LastState = state;
}

function submitUpload () {
    uploadHook();
    hide(id$('uploadInputs'));
    show(id$('uploadInProgress'));

    id$('uploadForm').submit();
    id$('uploadFile').value = '';
}


function submitTransload () {
    transloadHook();
    hide(id$('transloadInputs'));
    show(id$('transloadInProgress'));

    id$('transloadForm').submit();
    id$('transloadUrl').value = '';
}

function finishUpload () {
    hide(id$('uploadInProgress'));
    show(id$('uploadInputs'));
}

function finishTransload () {
    hide(id$('transloadInProgress'));
    show(id$('transloadInputs'));
}

function handleIncomingFile (url, fragment, width) {
    var callback = function () {
	id$('loaders').style.display = 'none';
	id$('examples').style.display = 'none';
	id$('editor').style.display = 'block';
	id$('picture').src = url;
	resetFields();

	if (width < 400) {
	    width = 400;
	}

	id$('fragment').value = fragment;
	id$('poster').style.width = (width + 100) + 'px';
	id$('updates').style.display = 'block';
	id$('poster').style.display = 'block';
	id$('title').focus();

	MaxWidth = width + 50;
    };

    withImageLoaded(callback, url);
}

function setFunny (url) {
    var link = id$('funny');
    if (link) {
	link.href = url;
    }
}

function withFinalImageUrl (fn) {
    if (FinalImageUrl) {
	fn(FinalImageUrl);
    } else {
	var args = {title: id$v('title'),
		    titlestyle: id$v('titlestyle'),
		    text: id$v('text'),
		    fragment: id$v('fragment'),
		    color: id$v('color')};

	var callback = function (data) {
	    FinalImageUrl = data.url;
	    setFunny(data.funny);
	    fn(data.url);
	};

	ajaxCall('/automotivator/compose-image', args, callback);
    }
}

function saveToImageShack () {
    var form = id$('imageShackForm');
    var field = id$('imageshack');
    window.open('/automotivator/saving-please-wait?dest=imageshack', 'wigflipImageShack');

    withFinalImageUrl(function (url) {
	    field.value = url;
	    form.submit();
	});
}



function saveToImgur () {
    var form = id$('imgurForm');
    var field = id$('imgur');
    window.open('/automotivator/saving-please-wait?dest=imgur', 'wigflipImgur');

    withFinalImageUrl(function (url) {
	    field.value = url;
	    form.submit();
	});
}


function saveToFlickr () {
    var form = id$('flickrForm');
    var field = id$('flickr');
    window.open('/automotivator/saving-please-wait?dest=flickr', 'wigflipFlickr');
    
    withFinalImageUrl(function (url) {
	    field.value = url;
	    form.submit();
	});
}

    
function resetPicture () {
    id$('picture').src = ClearImage;
}

function resetText () {
    id$('text').value = '';
    browser.clearPNG(id$('textimg'));
    LastState.text = '';
}


function resetTitle () {
    var img = id$('titleimg');
    var div = id$('titlediv');
    var input = id$('title');

    LastState.title = '';
    input.value = '';
    div.style.background = 'black';
    div.style.width = '0px';
    div.style.height = '0px';
    browser.clearPNG(img);
}

function resetErrors () {
    hide(id$('transloadError'));
    hide(id$('uploadError'));
    LoadFailureCallback = null;
}

function resetFields () {
    id$('uploadFile').value = '';
    id$('transloadUrl').value = '';
    hide(id$('transloadInProgress'));
    hide(id$('uploadInProgress'));
    show(id$('transloadInputs'));
    show(id$('uploadInputs'));
    
}




function resetInterface () {
    if (id$('poster')) {
	id$('poster').style.display = 'none';
	id$('poster').style.width = '10px';
	id$('updates').style.display = 'none';
	setColor(DefaultColor);
	disableSave();
	resetPicture();
	resetTitle();
	resetText();
    }

    resetFields();
    resetErrors();

    id$('loaders').style.display = 'block';
    id$('examples').style.display = 'block';
}


function attachUrl (url) {
    return url.replace(/posters/, "attach");
}
    
function readySave () {
    var link = id$('download');

    show(id$('downloaders'));
    show(id$('saveSpinner'));

    id$('saveButton').disabled = true;

    withFinalImageUrl(function (url) {
	    id$('saveButton').disabled = false;
	    hide(id$('saveSpinner'));
	    show(id$('subdownloaders'));
	    link.href = attachUrl(url);
	});
}
    
function displayFun (nodename, style) {
    var node = id$(nodename);
    return function () {
	node.style.display = style;
    };
}


function failureHook (errordiv) {
    resetErrors();
    LoadFailureCallback = displayFun(errordiv, 'block');
}

function transloadHook () {
    resetErrors();
    LoadFailureCallback = function () {
	finishTransload();
	show(id$('transloadError'));
    };
}

function uploadHook () {
    resetErrors();
    LoadFailureCallback = function () {
	finishUpload();
	show(id$('uploadError'));
    };
}

function loadFailure () {
    if (LoadFailureCallback) {
	LoadFailureCallback();
    }
}


function enableSave () {
    id$('saveButton').disabled = false;
}

function disableSave () {
    id$('saveButton').disabled = true;
}

function orderPrints () {
   window.open('http://wigflip.com/zazzle/connecting', 'zazzle');
   id$('zcolor').value = id$v('color');
   id$('ztitle').value = id$v('title');
   id$('ztext').value = id$v('text');
   id$('ztitlestyle').value = id$v('titlestyle');
   id$('zform').submit();
}

window.onload = function () { 
    resetInterface();
    SaveMonitor = setTimeout('monitorSaveButton()', 250);
};