$(function(){

				// Accordion
				$( "#artikeloptionen_accordion" ).accordion({
					collapsible: true,
					autoHeight: false,
					fillSpace: true,
					active: false
				});
	
				// Tabs
				$('#tabs').tabs();
	

				// Dialog			
				$('#dialog').dialog({
					autoOpen: false,
					buttons: {
						"Ok": function() { 
							$(this).dialog("close"); 
						}, 
						"Cancel": function() { 
							$(this).dialog("close"); 
						} 
					}
				});
				
				$( "#dialog-modal" ).dialog({
					autoOpen: false,
					position: ['center',50],
					resizable: false,
					width: 600,
					height: 500,
					modal: true /*,
					buttons: {
						"Abbrechen": function() { 
							$(this).dialog("close"); 
						} 
					}*/
				});
/*
				// Dialog Link
				$('#dialog_link').click(function(){
					$('#dialog-modal').dialog('open');
					return false;
				});
*/
				// Datepicker
				$('#datepicker').datepicker({
					inline: true
				});
				
				// Slider
				$('#slider').slider({
					range: true,
					values: [17, 67]
				});
				
				// Progressbar
				$("#progressbar").progressbar({
					value: 20 
				});

				//hover states on the static widgets
				$('#dialog_link, #bestellen_link, #menu_link, #menu-item').hover(
					function() { $(this).addClass('ui-state-hover'); }, 
					function() { $(this).removeClass('ui-state-hover'); }
				);

				/*$( "#bestellen_link").button();*/
				/*$( "input:submit, button", ".dinosbutton").button();*/
				
				try { $('#flashMessage').addClass('ui-state-highlight'); } catch(e) {}
				try { $('#flashMessage').addClass('ui-corner-all'); } catch(e) {}
				
				try { $('#authMessage').addClass('ui-state-error'); } catch(e) {}
				try { $('#authMessage').addClass('ui-corner-all'); } catch(e) {}
				
				try { $('#errorMessage').addClass('ui-state-error'); } catch(e) {}
				try { $('#errorMessage').addClass('ui-corner-all'); } catch(e) {}
				
				try { $( ".disabled-button" ).button({ disabled: true }); } catch(e) {}
				try { $( ".enabled-button" ).button(); } catch(e) {}
				
				try { $( ".disabled-icon-plus" ).button({ icons: { primary: "ui-icon-plus" }, text: false, disabled: true }); } catch(e) {}
				try { $( ".enabled-icon-plus" ).button({ icons: { primary: "ui-icon-plus" }, text: false }); } catch(e) {}
				
				try { $( ".disabled-icon-minus" ).button({ icons: { primary: "ui-icon-minus" }, text: false, disabled: true }); } catch(e) {}
				try { $( ".enabled-icon-minus" ).button({ icons: { primary: "ui-icon-minus" }, text: false }); } catch(e) {}
				
				try { $( ".disabled-icon-required" ).button({ icons: { primary: "ui-icon-bullet" }, text: false, disabled: true }); } catch(e) {}
				try { $( ".enabled-icon-required" ).button({ icons: { primary: "ui-icon-bullet" }, text: false }); } catch(e) {}
				
				try { $( ".disabled-icon-optional" ).button({ icons: { primary: "ui-icon-radio-on" }, text: false, disabled: true }); } catch(e) {}
				try { $( ".enabled-icon-optional" ).button({ icons: { primary: "ui-icon-radio-on" }, text: false }); } catch(e) {}
				
				try { $( ".disabled-icon-home" ).button({ icons: { primary: "ui-icon-home" }, text: false, disabled: true }); } catch(e) {}
				try { $( ".enabled-icon-home" ).button({ icons: { primary: "ui-icon-home" }, text: false }); } catch(e) {}
				
				try { $( ".disabled-icon-favorites" ).button({ icons: { primary: "ui-icon-star" }, text: false, disabled: true }); } catch(e) {}
				try { $( ".enabled-icon-favorites" ).button({ icons: { primary: "ui-icon-star" }, text: false }); } catch(e) {}
				
				try { $( ".disabled-icon-account" ).button({ icons: { primary: "ui-icon-person" }, text: false, disabled: true }); } catch(e) {}
				try { $( ".enabled-icon-account" ).button({ icons: { primary: "ui-icon-person" }, text: false }); } catch(e) {}
				
				try { $( ".disabled-icon-secure" ).button({ icons: { primary: "ui-icon-key" }, text: false, disabled: true }); } catch(e) {}
				try { $( ".enabled-icon-secure" ).button({ icons: { primary: "ui-icon-key" }, text: false }); } catch(e) {}
				
				try { $( ".disabled-icon-info" ).button({ icons: { primary: "ui-icon-info" }, text: false, disabled: true }); } catch(e) {}
				try { $( ".enabled-icon-info" ).button({ icons: { primary: "ui-icon-info" }, text: false }); } catch(e) {}
				
				try { $( ".disabled-icon-trash" ).button({ icons: { primary: "ui-icon-trash" }, text: false, disabled: true }); } catch(e) {}
				try { $( ".enabled-icon-trash" ).button({ icons: { primary: "ui-icon-trash" }, text: false }); } catch(e) {}
				
				try { $( ".disabled-icon-locked" ).button({ icons: { primary: "ui-icon-locked" }, text: false, disabled: true }); } catch(e) {}
				try { $( ".enabled-icon-locked" ).button({ icons: { primary: "ui-icon-locked" }, text: false }); } catch(e) {}
				
				try { $( ".disabled-icon-unlocked" ).button({ icons: { primary: "ui-icon-unlocked" }, text: false, disabled: true }); } catch(e) {}
				try { $( ".enabled-icon-unlocked" ).button({ icons: { primary: "ui-icon-unlocked" }, text: false }); } catch(e) {}
				
				try { $( ".disabled-icon-cart" ).button({ icons: { primary: "ui-icon-cart" }, text: false, disabled: true }); } catch(e) {}
				try { $( ".enabled-icon-cart" ).button({ icons: { primary: "ui-icon-cart" }, text: false }); } catch(e) {}

				
	// $() is a css selector. First I choose what triggers the event. In this case when 
	// you CLICK on a LINK with the js-ajax CLASS. I changed the example to use the live()
	// function so that any javascript-generated html will be binded too instead of click().
	$('#artikeloptionen_link').live('click', function() {
		document.body.style.cursor = 'wait';
    	$('#dialog-modal').dialog( "option", "title", $(this).attr('title') );
    	document.getElementById("dialog-modal").innerHTML = '<div id="dialog-modal-loading">Lade...<br /><img src="/img/ajax-loader-bar.gif" width="220" height="19" /></div>';
    	$('#dialog-modal').dialog('open');
    	$('#dialog-modal').load($(this).attr('href'), function () {
			//$('#dialog-modal').dialog('open');
        	try { $('#artikeloptionen_accordion').accordion({ collapsible: true, autoHeight: false, fillSpace: true, active: false }); } catch(e) {}
			try { $( ".disabled-button" ).button({ disabled: true }); } catch(e) {}
			try { $( ".enabled-button" ).button(); } catch(e) {}
			try { $( ".disabled-icon-plus" ).button({ icons: { primary: "ui-icon-plus" }, text: false, disabled: true }); } catch(e) {}
			try { $( ".enabled-icon-plus" ).button({ icons: { primary: "ui-icon-plus" }, text: false }); } catch(e) {}
			try { $( ".disabled-icon-minus" ).button({ icons: { primary: "ui-icon-minus" }, text: false, disabled: true }); } catch(e) {}
			try { $( ".enabled-icon-minus" ).button({ icons: { primary: "ui-icon-minus" }, text: false }); } catch(e) {}
			try { $( ".disabled-icon-required" ).button({ icons: { primary: "ui-icon-bullet" }, text: false, disabled: true }); } catch(e) {}
			try { $( ".enabled-icon-required" ).button({ icons: { primary: "ui-icon-bullet" }, text: false }); } catch(e) {}
			try { $( ".disabled-icon-optional" ).button({ icons: { primary: "ui-icon-radio-on" }, text: false, disabled: true }); } catch(e) {}
			try { $( ".enabled-icon-optional" ).button({ icons: { primary: "ui-icon-radio-on" }, text: false }); } catch(e) {}
			try { $( ".disabled-icon-trash" ).button({ icons: { primary: "ui-icon-trash" }, text: false, disabled: true }); } catch(e) {}
			try { $( ".enabled-icon-trash" ).button({ icons: { primary: "ui-icon-trash" }, text: false }); } catch(e) {}
			try { $( ".disabled-icon-favorites" ).button({ icons: { primary: "ui-icon-star" }, text: false, disabled: true }); } catch(e) {}
			try { $( ".enabled-icon-favorites" ).button({ icons: { primary: "ui-icon-star" }, text: false }); } catch(e) {}
        	//$('#tabs').tabs({height: 600});
    		document.body.style.cursor = 'default';
    	});
	    return false;
	}); 
});

$(document).ready(function() {
  // fade out flash 'success' messages
  $('.flash-message-success').delay(1000).hide('highlight', {color: '#66cc66'}, 1500);
});

/*
// $() is a css selector. First I choose what triggers the event. In this case when 
// you CLICK on a LINK with the js-ajax CLASS. I changed the example to use the live()
// function so that any javascript-generated html will be binded too instead of click().
$('a.js-ajax').live('click', function() {
    // Now we simply make the ajax call. load($url) will pull the url's VIEW and put it 
    // into ther innerhtml of whatever tag you called load on. In this case, I want to fill 
    // up my #overlayer div with the results of the ajax.
    $('#overlayer').load(
        // Here is the tricky part. Instead of hard-coding a url to pass, I just had jquery 
        // go look at what the link (from the outside scope, .click() part) was already going 
        // to (href) and used that as the argument.
        $(this).attr('href')
    , function () {
        // This is a callback, after the ajax gets loaded, the #overlayer div gets faded in at 300 miliseconds.
        $(this).fadeIn(300);
    });
    // And finally to prevent actually making the link go anywhere
    return false;
}); 
*/
/*    $ajax({
      url: $('base').attr('href')+'shop/artikeloptionen/export:'+$('#ExportEditForm').attr('rel'),
      dataType: 'html',
      success: function(form) {
          $('#new').html(form);
      }
    }; */

function checkArtikelOptionen(form, maxOptions)
{
	if (maxOptions > 0)
	{
		var checkedOptions = 0;
		for (var i=0; i<form.elements.length; i++) {
			if (form.elements[i].checked == true) {
				checkedOptions = checkedOptions + 1;
			}
		}
	
		if (checkedOptions >= maxOptions)
		{
			for (var i=0; i<form.elements.length; i++) {
				if (form.elements[i].type == "checkbox") {
					if (form.elements[i].checked == false) {
						form.elements[i].disabled = true;
					} else {
						form.elements[i].disabled = false;
					}
				}
			}
		}
		else
		{
			for (var i=0; i<form.elements.length; i++) {
				if (form.elements[i].type == "checkbox") {
					form.elements[i].disabled = false;
				}
			}
		}
	}
	return;
};