/*
by Brannon W
- Link the following in the siteSkin file before site.js:
<script src="http://tools.televoxsites.com/js/jquery/plugins/toolbox.flashembed.min.js" type="text/javascript"></script>
<script src="http://tools.televoxsites.com/features/as3/features.js" type="text/javascript"></script>
*/
jQuery(document).ready(function($) {
	//flash features options
	var opts = {
		beforeafter: {
			element: '.beforeafter',
			width: '500px',
			height: '315px'
		},
		emergencies: {
			element: '.emergencies',
			width:'500px',
			height:'273px'
		},
		parts: {
			element: '.parts',
			width: '500px',
			height: '315px'
		},
		problems: {
			element: '.problems',
			width:'500px',
			height:'273px'
		},
		types: {
			feature: '/features/types.xml',
			element: '.types',
			width:'500px',
			height:'273px'
		},
		hygiene: {
			element: '.hygiene',
			width:'500px',
			height:'325px'
		},
		dental: {
			feature: 'hygiene-dental',
			element: '.hygiene-dental',
			width:'500px',
			height:'325px'
		},
		planner: {
			element: '.planner',
			width:'500px',
			height:'325px'
		},
		"planner-classic": {
			element: '.planner-classic',
			width:'500px',
			height:'325px'
		},
		retainer: {
			element: '.retainer',
			width:'500px',
			height:'375px'
		}
	}
	
	//automatically set embed options
	for (var i in opts) {
		
		var elem = opts[i].element,
			defaultWidth = opts[i].width,
			defaultHeight = opts[i].height,
			feature = (i == "dental") ? "hygiene-dental" : i,
			config = (elem == ".types") ? {
					config: "/features/config.xml",
					xmlfile: "/features/types.xml"
				} : {
					config: "/features/config.xml",
					feature: feature
				};
				
		if ($(elem).length) { // if the element exists on the page...
			//if no css styles are found will use default width/height	
			//width = ($(elem).css('width') > "500px") ? $(elem).css('width',defaultWidth) : $(elem).css('width');
			//height = ($(elem).css('height') < "273px") ? $(elem).css('height',defaultHeight) : $(elem).css('height');
			
			var width = $(elem).css('width'), height = $(elem).css('height');
			width = (width > "500px") ? $(elem).css('width',defaultWidth) : width;
			height = (height < "273px" || height === "auto") ? $(elem).css('height',defaultHeight) : height;
			// added check for "auto", because IE sucks.
			
			//embed the feature
			$(elem).flashembed({src: '/features/loader.swf?id='+randomString(),	wmode: 'transparent'	},	config);	
			
			if ($(elem).hasClass('beforeafter')) {
				$(elem).after('<p style="text-align:center"><em>The photos in this animation are not actual patients of this practice. Results may vary in individual cases.</em></p>');	
			}
			else if ($(elem).hasClass('planner') || $(elem).hasClass('planner-classic')) {
				$(elem).after('<p>To pick your colors, simply click on the color you wish and then select Color All on the left. You can also select an individual bracket if you want to do multiple colors.</p><p>If you would like to change the bracket from silver to gold, choose Brackets on the right.</p><p>To reset and pick other colors, click Reset on the upper left.</p><p>Have fun picking your colors!</p>');
			}
		}
	}
});

function randomString() {
	var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
	var string_length = 12;
	var randomstring = '';
	for (var i=0; i<string_length; i++) {
		var rnum = Math.floor(Math.random() * chars.length);
		randomstring += chars.substring(rnum,rnum+1);
	}
	return randomstring
}