gistfile1.txt

/**
 *
 *  Albumprinter Copyright 2014
 *  Samuel Ondrek, @ondrek
 *




/* constructor */


var calendariumPreview = function() {

	// add event listeners for all inputs
	this.listenOnChange( document.getElementsByTagName( "textarea" ) );
	this.listenOnChange( document.getElementsByTagName( "input" ) );
	this.listenOnChange( document.getElementsByTagName( "select" ) );

	// fill an image SRC attribute with a default value
	this.refreshImagePreview();

};


/* local variables */


calendariumPreview.prototype.previewImage = document.getElementsByTagName( "img" )[ 0 ];
calendariumPreview.prototype.domNodeValues = {};
calendariumPreview.prototype.imageSourceURL = {};


/* public methods */


calendariumPreview.prototype.listenOnChange = function( collection ) {

	for ( var i = 0; i<collection.length; i++ ) {
		collection.item( i ).addEventListener( "change", this.refreshImagePreview.bind( this ) );
		collection.item( i ).addEventListener( "keyup", this.refreshImagePreview.bind( this ) );
	}

};


calendariumPreview.prototype.refreshImagePreview = function() {

	// get the newest values from inputs
	this.updateDOMNodeValues();

	// update the newest url for image
	this.updateImageURL();

	// set SRC of image
	this.previewImage.src = this.imageSourceURL;

};


calendariumPreview.prototype.updateDOMNodeValues = function() {

	this.domNodeValues = {};

	this.domNodeValues.languageId = document.getElementById( "languageId" ).value;
	this.domNodeValues.width = document.getElementById( "width" ).value;
	this.domNodeValues.height = document.getElementById( "height" ).value;
	this.domNodeValues.style = document.getElementById( "style" ).value;
	this.domNodeValues.grayscale = document.getElementById( "grayscale" ).checked;
	this.domNodeValues.month =  parseInt( document.getElementById( "monthyear" ).value.substr(5, 2), 10);
	this.domNodeValues.year = document.getElementById( "monthyear" ).value.substr(0, 4);
	this.domNodeValues.monthNameFont = document.getElementById( "monthNameFont" ).value;
	this.domNodeValues.eventFont = document.getElementById( "eventFont" ).value;
	this.domNodeValues.gridAllMonths = document.getElementById( "gridAllMonths" ).checked;
	this.domNodeValues.gridBackgroundColor = document.getElementById( "gridBackgroundColor" ).value;
	this.domNodeValues.gridForegroundColor = document.getElementById( "gridForegroundColor" ).value;
	this.domNodeValues.gridCellColor = document.getElementById( "gridCellColor" ).value;
	this.domNodeValues.gridMonthNameColor = document.getElementById( "gridMonthNameColor" ).value;
	this.domNodeValues.gridCellOpacity = document.getElementById( "gridCellOpacity" ).value;
	this.domNodeValues.events = document.getElementById( "events" ).value;
	this.domNodeValues.icons = document.getElementById( "icons" ).value;

};


calendariumPreview.prototype.updateImageURL = function() {

	var url = "";

	// set defaults
	url += "http://www.vptest.com/any/preview/calgrid.aspx";
	url += "?trypng=0";
	url += "&render_tech=HybridGdipWpf";
	url += "&gs=false";

	url += "&language_id="+this.domNodeValues.languageId;
	url += "&style="+this.domNodeValues.style;
	url += "&month="+this.domNodeValues.month;
	url += "&year="+this.domNodeValues.year;
	url += "&month_name_font="+this.domNodeValues.monthNameFont;
	url += "&event_font="+this.domNodeValues.eventFont;
	url += "&grid_all_months="+this.domNodeValues.gridAllMonths;
	url += "&grid_background_color="+this.domNodeValues.gridBackgroundColor;
	url += "&grid_foreground_color="+this.domNodeValues.gridForegroundColor;
	url += "&grid_cell_color=red";
	url += "&grid_cell_opacity=1";
	url += "&grid_month_name_color=0%2C0%2C0%2C100%3A32%2C32%2C32";
	url += "&width=580";
	url += "&height=600";

	url += "&events=%5B%7B%22Date%22%3A%221%2F1%2F2014%22%2C%22Text%22%3A%22New%20Year%26%2339%3Bs%20Day%22%2C%22Type%22%3A0%7D%2C%7B%22Date%22%3A%221%2F20%2F2014%22%2C%22Text%22%3A%22Martin%20Luther%20King%20Day%22%2C%22Type%22%3A0%7D%2C%7B%22Date%22%3A%221%2F2%2F2014%22%2C%22Text%22%3A%22Test%201%22%2C%22Type%22%3A1%7D%2C%7B%22Date%22%3A%221%2F3%2F2014%22%2C%22Text%22%3A%22Test%202%22%2C%22Type%22%3A1%7D%5D";
	url += "&icons=%5B%7B%22Date%22%3A%221%2F2%2F2014%22%2C%22Type%22%3A0%2C%22ImageId%22%3A427327%7D%2C%7B%22Date%22%3A%221%2F3%2F2014%22%2C%22Type%22%3A0%2C%22ImageId%22%3A414459%7D%5D";

	this.imageSourceURL = url;

};


/* run it! */


new calendariumPreview();