/* jQuery vimeo widget application that extracts user defined variables from user form to generate code and build widget. Scripts for generating code and previewing for the vimeo widget page.  It assumes that the page has only one vimeo widget form and preview, but is differentiated from the blog widget object.  There also these assumptions: that the page has a div with id of id+"VWidgetDiv", and it has two text areas, one for the code that goes into the head section (#v_code) and the other for the target div (#v_targetDiv).


Anne Breckbill November 2008
Dependency: jquery 1.2.6
*/

var coreVCode = '<script type=\"text/javascript\" src=\"http://americanpublicmedia.publicradio.org/standard/js/all_domains/jquery/custom/vimeo_widget/core_include.js\"><\/script>';
var instanceVCode = '<script type=\"text/javascript\" src=\"http://americanpublicmedia.publicradio.org/standard/js/all_domains/jquery/custom/vimeo_widget/wb_vimeo_widget.js\"><\/script>';


/* ------- Utility Functions ---------*/
function radio(id) {
	var value;
	var checked = $('#'+id).attr('checked');
	if (checked == true) {
		value = 1;
	} else {
		value = 0;
	}
	return value;
}

//Selects text within a textarea 
function selectIt(fieldId) {
	var tempval=$('#'+fieldId);
	tempval.focus();
	tempval.select();
}

//Extend the VWidget object found in the vimeo_widget_class.js.  obj is the name of the object defined.  Be sure that all the field names match those on the page. 
VWidget.prototype.generateVCode = function() {
	//Collect all the values from the form. 
	this.width = $("#v_width").val();
	this.height = $("#v_height").val();
	this.autoSlide = radio('v_autoSlide');
	this.showGetButton = radio('v_showGetButton');
	this.backColor = $('#v_backColor').val().slice(1);
	this.txtColor = $('#v_txtColor').val().slice(1);
	this.borderColor = $('#v_backColor').val();
	
	//Assemble and output the codes
	var headCodes = coreVCode + '\n';
	headCodes = headCodes + instanceVCode + '\n';
	headCodes = headCodes + '<script type="text/javascript"> \n';
	headCodes = headCodes + this.widgetId+'.width = ' + this.width + '; \n';	
	headCodes = headCodes + this.widgetId+'.height = ' + this.height + '; \n';
	headCodes = headCodes + this.widgetId+'.autoSlide = ' + this.autoSlide + '; \n';	
	headCodes = headCodes + this.widgetId+'.showGetButton = ' + this.showGetButton + '; \n';
	headCodes = headCodes + this.widgetId+'.backColor = "' + this.backColor + '"; \n';
	headCodes = headCodes + this.widgetId+'.txtColor = "' + this.txtColor + '"; \n';
	headCodes = headCodes + this.widgetId+'.borderColor = "' + this.borderColor + '" ;\n';
	headCodes = headCodes + '$(document).ready(function(){';
	headCodes = headCodes + this.widgetId+'.buildVWidget();';
	headCodes = headCodes + '});' + '\n';
	headCodes = headCodes + '<\/script>';
	$('#v_code').text(headCodes);
	
	var targetCodes = '<div id="'+this.targetId+'"></div><script type="text/javascript" src="http://secure-us.imrworldwide.com/v53.js"><\/script>';
	$('#v_targetDiv').text(targetCodes);
}


//execution function
function runVForm(widget) { //assuming that widget is the VWidget object
	widget.generateVCode();
	widget.buildVWidget();
	
	//Every time the generate button is clicked, it reinitializes the widget and shows new preview.  I'm assuming that the button to generate code has this ID
	$('#v_generate').click(function(){
			widget = wbVExecute(); //whatever the construction function(s) is
			
			$('#'+widget.targetId).hide().empty();
			widget.generateVCode();
			widget.buildVWidget();
			$('#'+widget.targetId).fadeIn('medium');
			$('#error_width').css('visibility', 'hidden');
			$('#error_height').css('visibility', 'hidden');
	});
}


//execute
$(document).ready(function(){
	runVForm(wbVWidget);
	$('#v_backColor').colorPicker();
    $('#v_txtColor').colorPicker();
	
//Custom form behaviors
	var errWidth = $('<span style="font-weight:bold; color:#CC0000;">Your widget must be at least 260px wide.</span>');
	var errHeight = $('<span style="font-weight:bold; color:#CC0000;">Your widget must be at least 200px tall.</span>');
	var errNaN = $('<span style="font-weight:bold; color:#CC0000;">You must enter a number.</span>');
	
//Custom form behaviors
	$('#v_width').change(function(){
		var entry = $(this).val();
		entry = parseFloat(entry);
		if (isNaN(entry)){
			$('#error_width').empty();	
			$('#error_width').append(errNaN);
			$(this).val(260);
		} else if (entry < 260){
			$('#error_width').empty();	
			$('#error_width').append(errWidth);
			$(this).val(260);
		} else {	
			$('#error_width').empty();	
			entry = entry.toFixed(0);	
			$(this).val(entry);
		}
	});
	$('#v_height').change(function(){
		var entry = $(this).val();
		entry = parseFloat(entry);
		if (isNaN(entry)){
			$('#error_height').empty();	
			$('#error_height').append(errNaN);
			$(this).val(200);
		} else if (entry < 200){
			$('#error_height').empty();	
			$('#error_height').append(errHeight);
			$(this).val(200);
		} else {	
			$('#error_height').empty();	
			entry = entry.toFixed(0);	
			$(this).val(entry);
		}
	});
	

});