/**
 * Prints out the inline javascript needed for the colorpicker and choosing
 * the tabs in the panel.
 */

jQuery(document).ready(function($) {
	
	// Fade out the save message
	$('#message').delay(1000).fadeOut(1000);
	
	// Color Picker
	$('.colorSelector').each(function(){
		var Othis = this; //cache a copy of the this variable for use inside nested function
		var initialColor = $(Othis).next('input').attr('value');
		$(this).ColorPicker({
		color: initialColor,
		onShow: function (colpkr) {
		$(colpkr).fadeIn(500);
		return false;
		},
		onHide: function (colpkr) {
		$(colpkr).fadeOut(500);
		return false;
		},
		onChange: function (hsb, hex, rgb) {
		$(Othis).children('div').css('backgroundColor', '#' + hex);
		$(Othis).next('input').attr('value','#' + hex);
	}
	});
	}); //end color picker
	
	
	// Switches option sections
	$('.group').hide();
	$('.group:first').fadeIn();
	$('.group .collapsed').each(function(){
		$(this).find('input:checked').parent().parent().parent().nextAll().each( 
			function(){
				if ($(this).hasClass('last')) {
					$(this).removeClass('hidden');
						return false;
					}
				$(this).filter('.hidden').removeClass('hidden');
			});
	});
           					
	$('.group .collapsed input:checkbox').click(unhideHidden);
				
	function unhideHidden(){
		if ($(this).attr('checked')) {
			$(this).parent().parent().parent().nextAll().removeClass('hidden');
		}
		else {
			$(this).parent().parent().parent().nextAll().each( 
			function(){
				if ($(this).filter('.last').length) {
					$(this).addClass('hidden');
					return false;		
					}
				$(this).addClass('hidden');
			});
           					
		}
	}
	
	// Image Options
	$('.of-radio-img-img').click(function(){
		$(this).parent().parent().find('.of-radio-img-img').removeClass('of-radio-img-selected');
		$(this).addClass('of-radio-img-selected');		
	});
		
	$('.of-radio-img-label').hide();
	$('.of-radio-img-img').show();
	$('.of-radio-img-radio').hide();
	$('#of-nav li:first').addClass('current');
	$('#of-nav li a').click(function(evt) {
	$('#of-nav li').removeClass('current');
	$(this).parent().addClass('current');
	var clicked_group = $(this).attr('href');
	$('.group').hide();
	$(clicked_group).fadeIn();
	evt.preventDefault();
	}); 	
	$('input.iphonecheck').iphoneStyle();
	$(":range").rangeinput();
	$('#of_container #of-nav li:contains("Home")').append('<span class="home"></span>');
	$('#of_container #of-nav li:contains("Slide")').append('<span class="slide"></span>');
	$('#of_container #of-nav li:contains("Top")').append('<span class="top"></span>');
	$('#of_container #of-nav li:contains("Navi")').append('<span class="navi"></span>');
	$('#of_container #of-nav li:contains("Header")').append('<span class="header"></span>');
	$('#of_container #of-nav li:contains("Tabs")').append('<span class="tabs"></span>');
	$('#of_container #of-nav li:contains("Footer")').append('<span class="footer"></span>');
	$('#of_container #of-nav li:contains("cats")').append('<span class="cats"></span>');
	$('#of_container #of-nav li:contains("sliders")').append('<span class="sliders"></span>');
	$('#of_container #of-nav li:contains("Sidebar")').append('<span class="sidebar"></span>');
	$('#of_container #of-nav li:contains("Button")').append('<span class="buttoncb"></span>');
	$('#of_container #of-nav li:contains("Sitemap")').append('<span class="sitemap"></span>');
	$('#of_container #of-nav li:contains("Typography")').append('<span class="typo"></span>');
	$('#of_container #of-nav li:contains("General")').append('<span class="general"></span>');
	$('#of_container #of-nav li:contains("Products")').append('<span class="pro"></span>');
	$('#of_container #of-nav li:contains("Footer")').append('<span class="footer"></span>');
	$('#of_container #of-nav li:contains("Pagination")').append('<span class="pagi"></span>');
	$('#of_container #of-nav li:contains("Featured")').append('<span class="feat"></span>');
	$('#of_container #of-nav li:contains("Contact")').append('<span class="contact"></span>');
	$('#of_container #of-nav li:contains("Products Grid")').addClass('grid');

//
	$('#of_container #of-nav li:eq(0)').append('<span class="general"></span>');
	$('#of_container #of-nav li:eq(1)').append('<span class="social"></span>');
	$('#of_container #of-nav li:eq(2)').append('<span class="cats"></span>');
	$('#of_container #of-nav li:eq(3)').append('<span class="sliders"></span>');
	$('#of_container #of-nav li:eq(4)').append('<span class="sitemap"></span>');
	$('#of_container #of-nav li:eq(5)').append('<span class="feat"></span>');
	


});	