function utf8_encode ( string ) {
    // Encodes an ISO-8859-1 string to UTF-8
    // 
    // +    discuss at: http://kevin.vanzonneveld.net/techblog/article/javascript_equivalent_for_phps_utf8_encode/
    // +       version: 811.1414
    // +   original by: Webtoolkit.info (http://www.webtoolkit.info/)
    // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +   improved by: sowberry
    // +    tweaked by: Jack
    // +   bugfixed by: Onno Marsman
    // +   improved by: Yves Sucaet
    // +   bugfixed by: Onno Marsman
    // *     example 1: utf8_encode('Kevin van Zonneveld');
    // *     returns 1: 'Kevin van Zonneveld'

	string = (string+'').replace(/\r\n/g, "\n").replace(/\r/g, "\n");

	var utftext = "";
	var start, end;
	var stringl = 0;

	start = end = 0;
	stringl = string.length;
	for (var n = 0; n < stringl; n++) {
		var c1 = string.charCodeAt(n);
		var enc = null;

		if (c1 < 128) {
			end++;
		}
		else if((c1 > 127) && (c1 < 2048)) {
			enc = String.fromCharCode((c1 >> 6) | 192) + String.fromCharCode((c1 & 63) | 128);
		}
		else {
			enc = String.fromCharCode((c1 >> 12) | 224) + String.fromCharCode(((c1 >> 6) & 63) | 128) + String.fromCharCode((c1 & 63) | 128);
		}
		if (enc != null) {
			if (end > start) {
				utftext += string.substring(start, end);
			}
			utftext += enc;
			start = end = n+1;
		}
	}

	if (end > start) {
		utftext += string.substring(start, string.length);
	}

	return utftext;
};

function base64_encode( data ) {
    // Encodes data with MIME base64
    // 
    // +    discuss at: http://kevin.vanzonneveld.net/techblog/article/javascript_equivalent_for_phps_base64_encode/
    // +       version: 809.522
    // +   original by: Tyler Akins (http://rumkin.com)
    // +   improved by: Bayron Guevara
    // +   improved by: Thunder.m
    // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)        
    // -    depends on: utf8_encode
    // *     example 1: base64_encode('Kevin van Zonneveld');
    // *     returns 1: 'S2V2aW4gdmFuIFpvbm5ldmVsZA=='

    // mozilla has this native
    // - but breaks in 2.0.0.12!
    //if (typeof window['atob'] == 'function') {
    //    return atob(data);
    //}

	var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
	var o1, o2, o3, h1, h2, h3, h4, bits, i = ac = 0, enc="", tmp_arr = [];
	data = utf8_encode(data);

	do { // pack three octets into four hexets
		o1 = data.charCodeAt(i++);
		o2 = data.charCodeAt(i++);
		o3 = data.charCodeAt(i++);

		bits = o1<<16 | o2<<8 | o3;

		h1 = bits>>18 & 0x3f;
		h2 = bits>>12 & 0x3f;
		h3 = bits>>6 & 0x3f;
		h4 = bits & 0x3f;

		// use hexets to index into b64, and append result to encoded string
		tmp_arr[ac++] = b64.charAt(h1) + b64.charAt(h2) + b64.charAt(h3) + b64.charAt(h4);
	} while (i < data.length);

	enc = tmp_arr.join('');

	switch( data.length % 3 ){
		case 1:
			enc = enc.slice(0, -2) + '==';
			break;
		case 2:
			enc = enc.slice(0, -1) + '=';
			break;
	}

	return enc;
};

var jj = new Jujups();

function Jujups() {};

Jujups.prototype.expand = function(elem, root, studioId) {
	hs.objectType = "iframe";
	hs.allowMultipleInstances = false;
	hs.width = 930;
	hs.height = 650;
	hs.graphicsDir = root+'js/highslide/graphics/';
	hs.outlineType = "rounded-white";
	hs.objectLoadTime = "before";
	hs.allowWidthReduction = true;
	hs.allowHeightReduction = true;
	hs.htmlExpand(elem, {contentId: 'highslide-html-'+studioId});
	return false;
};

//preserve = preserve the content or not? True or False.
Jujups.prototype.close = function(elem, preserve) {
	var hd = elem.parentNode.parentNode.parentNode.parentNode.parentNode;
	var id = hd.id.toString().substring(18);
	hs.expanders[id].preserveContent = preserve;
	hs.expanders[id].close();
	return false;
};

Jujups.prototype.getScript = function(root, studioId, vendorId, currencyId, link_title, user_picture, loadxml, custom_param, product_id, design_id) {
	if(user_picture != '')
		user_picture = base64_encode(user_picture);
	if(custom_param != '')
		custom_param = base64_encode(custom_param);
	
	if(design_id == 0 && loadxml == '')
		getxml = "";
	else if(design_id == 0 && loadxml != '')
		getxml = loadxml;
	else
		getxml = root+'designs/getXml/'+design_id+'.xml';
	
	script = '<div class="highslide-html-content" id="highslide-html-'+studioId+'"><div class="highslide-move html-header" style="border:0;text-align:right;padding:3px 3px 10px 0px;height:20px;width:100%;cursor:move"><a href="#" onclick="return jj.close(this, true)" class="control" style="font-weight:bold;text-decoration:none;cursor:pointer;" title="Minimize">_</a>&nbsp;&nbsp;<a href="#" onclick="return jj.close(this, false)" class="control" style="font-weight:bold;text-decoration:none;cursor:pointer;" title="Close">X</a></div><div class="highslide-body"></div></div>';
	script += '<a href="'+root+'creator/?config='+root+'studios/config/custom:'+custom_param+'/currency_id:'+currencyId+'/start_image_url:'+user_picture+'/'+studioId+'/0/0/'+design_id+'/0/'+vendorId+'/'+product_id+'.xml&loadxml='+getxml+'&studio_id='+studioId+'&link_logo=false" onclick="return jj.expand(this, \''+root+'\', '+studioId+')">'+link_title+'</a>';
	
	return script;
};


Jujups.prototype.render = function(root, studioId, vendorId, currencyId, link_title, user_picture, loadxml, custom_param, product_id, design_id) {
	if(loadxml === undefined)
		loadxml = "";
	if(custom_param === undefined)
		custom_param = "";
	if(design_id === undefined)
		design_id = 0;
	document.write(this.getScript(root, studioId, vendorId, currencyId, link_title, user_picture, loadxml, custom_param, product_id, design_id));
};

Jujups.prototype.getBuyScript = function(root, designId, vendorId, currencyId, link_title, tn, skinid) {
	script = '<div class="highslide-html-content" id="highslide-html-'+designId+'"><div class="highslide-move html-header" style="border:0;text-align:right;padding:3px 3px 10px 0px;height:20px;width:100%;cursor:move"><a href="#" onclick="return jj.close(this, true)" class="control" style="font-weight:bold;text-decoration:none;cursor:pointer;" title="Minimize">_</a>&nbsp;&nbsp;<a href="#" onclick="return jj.close(this, false)" class="control" style="font-weight:bold;text-decoration:none;cursor:pointer;" title="Close">X</a></div><div class="highslide-body"></div></div>';
	script += '<a href="'+root+'transactions/kiosk_buy/id:'+designId+'/vendor_id:'+vendorId+'/currency_id:'+currencyId+'/?tn='+tn+'&skinid='+skinid+'" onclick="return jj.expand(this, \''+root+'\', '+designId+')">'+link_title+'</a>';

	return script;
};

Jujups.prototype.expandShare = function(elem, root, designId) {
	hs.objectType = "iframe";
	hs.width = 500;
	hs.height = 400;
	hs.graphicsDir = root+'js/highslide/graphics/';
	hs.outlineType = "rounded-white";
	hs.objectLoadTime = "before";
	hs.allowWidthReduction = true;
	hs.allowHeightReduction = true;
	hs.htmlExpand(elem, {contentId: 'highslide-html-'+designId});
	return false;
};

Jujups.prototype.renderShare = function(root, designId, vendorId, link_title) {
	document.write(this.getShareScript(root, designId, vendorId, link_title));
};

Jujups.prototype.getShareScript = function(root, designId, vendorId, link_title) {
	script = '<div class="highslide-html-content" id="highslide-html-'+designId+'"><div class="highslide-move html-header" style="border:0;text-align:right;padding:3px 3px 10px 0px;height:20px;width:100%;cursor:move"><a href="#" onclick="return jj.close(this, true)" class="control" style="font-weight:bold;text-decoration:none;cursor:pointer;" title="Minimize">_</a>&nbsp;&nbsp;<a href="#" onclick="return jj.close(this, false)" class="control" style="font-weight:bold;text-decoration:none;cursor:pointer;" title="Close">X</a></div><div class="highslide-body"></div></div>';
	script += '<a href="'+root+'share/canvas_form/'+designId+'/'+vendorId+'" onclick="return jj.expandShare(this, \''+root+'\', '+designId+')">'+link_title+'</a>';

	return script;
};

Jujups.prototype.renderBuy = function(root, designId, vendorId, currencyId, link_title, tn, skinid) {
	document.write(this.getBuyScript(root, designId, vendorId, currencyId, link_title, tn, skinid));
};

function enableLinkTitle() {
	document.getElementById('link_title').disabled = false;
	document.getElementById('link_image').disabled = true;
};

function enableLinkImage() {
	document.getElementById('link_title').disabled = true;
	document.getElementById('link_image').disabled = false;
};

function updateCode(root, studio_id, vendor_id, user_picture) {
	if (!document.getElementById('link_title').disabled) {
		var custom_param = document.getElementById('custom_param').value;
		var link_title = document.getElementById('link_title').value;

		if (link_title == '') link_title = 'Design it';

		link_title = link_title.replace(/'/g, "\\'");
		link_title = link_title.replace(/"/g, '\\"');
		link_title = link_title.replace('&', "&amp;");

		if(document.getElementById('load_xml'))
			var loadxml = document.getElementById('load_xml').value;
		else
			var loadxml = "";

		script = '<script type="text/javascript" src="http://'+root+'js/jujups.js"></script>\n<script type="text/javascript">jj.render("http://'+root+'",'+studio_id+','+vendor_id+', "'+link_title+'", "'+user_picture+'","'+loadxml+'", "'+custom_param+'");</script>';

		//parse it before throw into textarea
		script = script.replace(/</g, '&lt;').replace(/>/g, '&gt;');

		document.getElementById('publisher-snippet').innerHTML = script;
	}
	else {
		var custom_param = document.getElementById('custom_param').value;
		var img_url = document.getElementById('link_image').value;

		if (img_url == '') img_url = ''; //some default image here for no input

		img_url = img_url.replace(/'/g, "\\'").replace(/"/g, '\\"').replace('&', "&amp;");

		if(document.getElementById('load_xml'))
			var loadxml = document.getElementById('load_xml').value;
		else
			var loadxml = "";

		script = '<script type="text/javascript" src="http://'+root+'js/jujups.js"></script>\n<script type="text/javascript">jj.render("http://'+root+'",'+studio_id+','+vendor_id+', "<img src=\''+img_url+'\' alt=\'Design it with JuJups.com\' style=\'border:none;\' />", "'+user_picture+'","'+loadxml+'", "'+custom_param+'");</script>';

		//parse it before throw into textarea
		script = script.replace(/</g, '&lt;').replace(/>/g, '&gt;');
		document.getElementById('publisher-snippet').innerHTML = script;
	}
};