$(function(){
	// Accordion
	$("#accordion").accordion({ header: "h3" });
	// Tabs
	$('#tabs').tabs();
	// Dialog			
	$('#dialog').dialog({
		autoOpen: false,
		width: 600,
		buttons: {
			"Cancel": function() { 
				$(this).dialog("close"); 
			} 
		},
		draggable: false,
		resizable: false
	});
	// Dialog Link
	$('#dialog_link').click(function(){
		$('#dialog').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, ul#icons li').hover(
		function() { $(this).addClass('ui-state-hover'); }, 
		function() { $(this).removeClass('ui-state-hover'); }
	);
});
$(function(){
	
	$('select#speedA').selectmenu();
	
	$('select#speedAa').selectmenu({maxHeight: 150});
	
	$('select#speedB').selectmenu({
		width: 300,
		format: addressFormatting
	});
	
	$('select#speedC').selectmenu({style:'dropdown'});
	
	
	$('select#worldzone').selectmenu({style:'dropdown'});
	$('select#country').selectmenu({style:'dropdown'});	
	$('select#city').selectmenu({
	    style:'dropdown',
	    maxHeight: 400
	});	
	
	$('select#country').bind('change', function(){
        $('select#country').selectmenu('destroy');
        $('select#country').selectmenu({style: 'dropdown'});        
	});

	$('select#city').bind('change', function(){
        $('select#city').selectmenu('destroy');
        $('select#city').selectmenu({style: 'dropdown',
	    maxHeight: 400});        
	});	
	
	/*$('#sel1 a.ui-selectmenu').bind('click', function(){ 
	    $('select#country').css({display: 'block'});
	    $('#sel2').not($("a.ui-selectmenu")[0]);
	    $('select#country').selectmenu({style:'dropdown'});
	});*/
	
	/*
	$('select#worldzone').selectmenu({style:'dropdown', format: addressFormatting});
	$('select#country').selectmenu({style:'dropdown', format: addressFormatting});
	$('select#city').selectmenu({style:'dropdown', format: addressFormatting});
    */
	
	$('select#speedD').selectmenu({
		style:'dropdown', 
		menuWidth: 400,
		format: addressFormatting
	});
	
	$('select#files, select#filesC').selectmenu({
		icons: [
			{find: '.script', icon: 'ui-icon-script'},
			{find: '.image', icon: 'ui-icon-image'}
		]
	});
	
	$('select#filesB').selectmenu({
		icons: [
			{find: '.video'},
			{find: '.podcast'},
			{find: '.rss'}
		]
	});
	
	
});


	//a custom format option callback
	var addressFormatting = function(text){
		var newText = text;
		//array of find replaces
		var findreps = [
			{find:/^([^\-]+) \- /g, rep: '<span class="ui-selectmenu-item-header">$1</span>'},
			{find:/([^\|><]+) \| /g, rep: '<span class="ui-selectmenu-item-content">$1</span>'},
			{find:/([^\|><\(\)]+) (\()/g, rep: '<span class="ui-selectmenu-item-content">$1</span>$2'},
			{find:/([^\|><\(\)]+)$/g, rep: '<span class="ui-selectmenu-item-content">$1</span>'},
			{find:/(\([^\|><]+\))$/g, rep: '<span class="ui-selectmenu-item-footer">$1</span>'}
		];
		
		for(var i in findreps){
			newText = newText.replace(findreps[i].find, findreps[i].rep);
		}
		return newText;
	}
		
		