/**
 * jQuery form validation plugin
 */
 (function($) {


/**
 * gmcUiBoxRadio
 *
 * Use complete divs as radio buttons. The container div gets a css class set when active.
 *
 * HTML sample:
 * 	<div>
 * 		<label>Sample Radio Group</label>
 * 		<div class="active">
 * 			<input type="radio" name="mysampleradio" selected="selected" />
 * 			<label>My Sample Radio 1</label>
 * 		</div>
 * 		<div>
 * 			<input type="radio" name="mysampleradio" />
 * 			<label>My Sample Radio 2</label>
 * 		</div>
 * 	</div>
 *
 * @return jQuery
 */
$.fn.gmcUiBoxRadio = function(options) {

	var selected_box_container = new Array();

    options = $.extend({
        activeClass: this.attr('activeClass') || 'active',
		submitForm: this.attr('submitForm') || ''
    }, options || {});

	jqueryReturn = $(this).each(function() {

		$('.box', this).each(function() {

			$(this).click(function() {
				i = $(this).parent().attr('id');
				if (selected_box_container[i] == undefined) {
					i = $(this).parent().parent().attr('id');
				}
				if (selected_box_container[i] != undefined) {
					selected_box_container[i].removeClass(options.activeClass);
				}
				$('input[@type=radio]', this).attr('checked', true);
				$('input[@type=radio]', this).change();	// trigger change event
				selected_box_container[i] = $(this);
				selected_box_container[i].addClass(options.activeClass);
				if (options.submitForm != "") {
					$(options.submitForm).submit();
				}
			});

			// highlight the checked input fields
			if ($('input[@type=radio]', this).attr('checked') == true) {
				oldSubmitForm = options.submitForm;
				options.submitForm = '';
				$(this).click();
				options.submitForm = oldSubmitForm;
			}

		});
	
	});

	return jqueryReturn;

};



/**
 * Feature elements (interactive box)
 *
 * HTML sample:
 *	 <div class="feature">
 *	 	<ul class="feature-nav">
 *	 		<li class="active"><a href="#fb_1">Link 1</a></li>
 *	 		<li><a href="#fb_2">Link 2</a></li>
 *	 		<li><a href="#fb_3">Link 3</a></li>
 *	 	</ul>
 *	 	<div class="feature-block" id="fb1">
 *	 		<h3>Headline 1</h3>
 *	 	</div>
 *	 	<div class="feature-block" id="fb2" style="display:none">
 *	 		<h3>Headline 2</h3>
 *	 	</div>
 *	 	<div class="feature-block" id="fb3" style="display:none">
 *	 		<h3>Headline 3</h3>
 *	 	</div>
 *	 </div>
 */
$.fn.gmcFeatureBox = function(options) {

    options = $.extend({
        activeClass: this.attr('activeClass') || 'active',
		navClass: this.attr('navClass') || 'nav'
    }, options || {});

	jqueryReturn = $(this).each(function() {
		var $$ = $(this);
		$('.' + options.navClass + ' a', $$).click(function() {
			currentActiveId = $('li.' + options.activeClass + ' a', $$).attr('href');
			newActiveId = $(this).attr('href');
			if (currentActiveId == newActiveId) {
				return false;
			}
			$(currentActiveId).fadeOut('slow');
			$(newActiveId).fadeIn('slow');
			$('li.' + options.activeClass, $$).removeClass(options.activeClass);
			$(this).parent('li').addClass(options.activeClass);
			return false;
		});
	});

	return jqueryReturn;
}


})(jQuery);