/public/js/custom.js

$(function() {

	

	//===== Form to Wizard plugin =====//

	

	$("#wizForm").formwizard({ 

		formPluginEnabled: false,

		validationEnabled: true,

		focusFirstInput : false,

		formOptions :{

			success: function(data){$("#status").fadeTo(500,1,function(){ $(this).html("You are now registered!").fadeTo(5000, 0); })},

			beforeSubmit: function(data){$("#data").html("data sent to the server: " + $.param(data));},

			dataType: 'json',

			resetForm: true

		},

		disableUIStyles : true,

		validationOptions : {

			rules: {

				req: "required",

				sel: "required",

				chb: "required",

				email: {

					required: true,

					email: true

				}

			},

			messages: {

				req: "This field is required",

				sel: "Oops, required!",

				chb: "Check it",

				email: {

					required: "Please specify your email",

					email: "Correct format is name@domain.com"

				}

			}

		}

	 }

	);



	

	//===== UI dialog =====//

	

	$( "#dialog-message" ).dialog({

		autoOpen: false,

		modal: true,

		buttons: {

			Ok: function() {

				$( this ).dialog( "close" );

			}

		}

	});

	

	$( "#opener" ).click(function() {

		$( "#dialog-message" ).dialog( "open" );

		return false;

	});	

	

	

	//===== PrettyPhoto lightbox plugin =====//

	

	$("a[rel^='prettyPhoto']").prettyPhoto();

	

	

	//===== Custom single file input =====//

	

	$("input.fileInput").filestyle({ 

	imageheight : 26,

	imagewidth : 89,

	width : 292

	});

	

	

	//===== Dual select boxes =====//

	

	$.configureBoxes();

	

	

	//===== Time picker =====//

	

	$('.timepicker').timeEntry({

		show24Hours: true, // 24 hours format

		showSeconds: true, // Show seconds?

		spinnerImage: 'images/ui/spinnerUpDown.png', // Arrows image

		spinnerSize: [17, 26, 0], // Image size

		spinnerIncDecOnly: true // Only up and down arrows

		});





	//===== Wizard =====//



	$('.wizard').smartWizard({

		selected: 0,  // Selected Step, 0 = first step   

		keyNavigation: true, // Enable/Disable key navigation(left and right keys are used if enabled)

		enableAllSteps: false,  // Enable/Disable all steps on first load

		transitionEffect: 'slideleft', // Effect on navigation, none/fade/slide/slideleft

		contentURL:null, // specifying content url enables ajax content loading

		contentCache:true, // cache step contents, if false content is fetched always from ajax url

		cycleSteps: false, // cycle step navigation

		enableFinishButton: false, // makes finish button enabled always

		errorSteps:[],    // array of step numbers to highlighting as error steps

		labelNext:'Next', // label for Next button

		labelPrevious:'Previous', // label for Previous button

		labelFinish:'Finish',  // label for Finish button        

	  // Events

		onLeaveStep: null, // triggers when leaving a step

		onShowStep: null,  // triggers when showing a step

		onFinish: null  // triggers when Finish button is clicked

	 });

	





	//===== File manager =====//	

	

	$('#fileManager').elfinder({

		url : 'php/connector.php',

	})

	



	//===== Alert windows =====//



	$(".bAlert").click( function() {

		jAlert('This is a custom alert box. Title and this text can be easily editted', 'Alert Dialog Sample');

	});

	

	$(".bConfirm").click( function() {

		jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {

			jAlert('Confirmed: ' + r, 'Confirmation Results');

		});

	});

	

	$(".bPromt").click( function() {

		jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {

			if( r ) alert('You entered ' + r);

		});

	});

	

	$(".bHtml").click( function() {

		jAlert('You can use HTML, such as <strong>bold</strong>, <em>italics</em>, and <u>underline</u>!');

	});





	//===== Accordion =====//		

	

	$('div.menu_body:eq(0)').show();

	$('.acc .head:eq(0)').show().css({color:"#2B6893"});

	

	$(".acc .head").click(function() {	

		$(this).css({color:"#2B6893"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");

		$(this).siblings().css({color:"#404040"});

	});

	

	

	

	

	//===== WYSIWYG editor =====//

	

	$('.wysiwyg').wysiwyg({

		iFrameClass: "wysiwyg-input",

		controls: {

			bold          : { visible : true },

			italic        : { visible : true },

			underline     : { visible : true },

			strikeThrough : { visible : false },

			

			justifyLeft   : { visible : true },

			justifyCenter : { visible : true },

			justifyRight  : { visible : true },

			justifyFull   : { visible : true },

			

			indent  : { visible : true },

			outdent : { visible : true },

			

			subscript   : { visible : false },

			superscript : { visible : false },

			

			undo : { visible : true },

			redo : { visible : true },

			

			insertOrderedList    : { visible : true },

			insertUnorderedList  : { visible : true },

			insertHorizontalRule : { visible : false },



			h1: {

			visible: true,

			className: 'h1',

			command: ($.browser.msie || $.browser.safari) ? 'formatBlock' : 'heading',

			arguments: ($.browser.msie || $.browser.safari) ? '<h1>' : 'h1',

			tags: ['h1'],

			tooltip: 'Header 1'

			},

			h2: {

			visible: true,

			className: 'h2',

			command: ($.browser.msie || $.browser.safari) ? 'formatBlock' : 'heading',

			arguments: ($.browser.msie || $.browser.safari) ? '<h2>' : 'h2',

			tags: ['h2'],

			tooltip: 'Header 2'

			},

			h3: {

			visible: true,

			className: 'h3',

			command: ($.browser.msie || $.browser.safari) ? 'formatBlock' : 'heading',

			arguments: ($.browser.msie || $.browser.safari) ? '<h3>' : 'h3',

			tags: ['h3'],

			tooltip: 'Header 3'

			},

			h4: {

			visible: true,

			className: 'h4',

			command: ($.browser.msie || $.browser.safari) ? 'formatBlock' : 'heading',

			arguments: ($.browser.msie || $.browser.safari) ? '<h4>' : 'h4',

			tags: ['h4'],

			tooltip: 'Header 4'

			},

			h5: {

			visible: true,

			className: 'h5',

			command: ($.browser.msie || $.browser.safari) ? 'formatBlock' : 'heading',

			arguments: ($.browser.msie || $.browser.safari) ? '<h5>' : 'h5',

			tags: ['h5'],

			tooltip: 'Header 5'

			},

			h6: {

			visible: true,

			className: 'h6',

			command: ($.browser.msie || $.browser.safari) ? 'formatBlock' : 'heading',

			arguments: ($.browser.msie || $.browser.safari) ? '<h6>' : 'h6',

			tags: ['h6'],

			tooltip: 'Header 6'

			},

			

			cut   : { visible : true },

			copy  : { visible : true },

			paste : { visible : true },

			html  : { visible: true },

			increaseFontSize : { visible : false },

			decreaseFontSize : { visible : false },

			},

		events: {

			click: function(event) {

				if ($("#click-inform:checked").length > 0) {

					event.preventDefault();

					alert("You have clicked jWysiwyg content!");

				}

			}

		}

	});

	

	//$('.wysiwyg').wysiwyg("insertHtml", "Sample code");















	

	//===== ToTop =====//



	$().UItoTop({ easingType: 'easeOutQuart' });	

	

	

	//===== Spinner options =====//

	

	var itemList = [

		{url: "http://ejohn.org", title: "John Resig"},

		{url: "http://bassistance.de/", title: "J&ouml;rn Zaefferer"},

		{url: "http://snook.ca/jonathan/", title: "Jonathan Snook"},

		{url: "http://rdworth.org/", title: "Richard Worth"},

		{url: "http://www.paulbakaus.com/", title: "Paul Bakaus"},

		{url: "http://www.yehudakatz.com/", title: "Yehuda Katz"},

		{url: "http://www.azarask.in/", title: "Aza Raskin"},

		{url: "http://www.karlswedberg.com/", title: "Karl Swedberg"},

		{url: "http://scottjehl.com/", title: "Scott Jehl"},

		{url: "http://jdsharp.us/", title: "Jonathan Sharp"},

		{url: "http://www.kevinhoyt.org/", title: "Kevin Hoyt"},

		{url: "http://www.codylindley.com/", title: "Cody Lindley"},

		{url: "http://malsup.com/jquery/", title: "Mike Alsup"}

	];



	var opts = {

		's1': {decimals:2},

		's2': {stepping: 0.25},

		's3': {currency: '$'},

		's4': {},

		's5': {

			//

			// Two methods of adding external items to the spinner

			//

			// method 1: on initalisation call the add method directly and format html manually

			init: function(e, ui) {

				for (var i=0; i<itemList.length; i++) {

					ui.add('<a href="'+ itemList[i].url +'" target="_blank">'+ itemList[i].title +'</a>');

				}

			},



			// method 2: use the format and items options in combination

			format: '<a href="%(url)" target="_blank">%(title)</a>',

			items: itemList

		}

	};



	for (var n in opts)

		$("#"+n).spinner(opts[n]);



	$("button").click(function(e){

		var ns = $(this).attr('id').match(/(s\d)\-(\w+)$/);

		if (ns != null)

			$('#'+ns[1]).spinner( (ns[2] == 'create') ? opts[ns[1]] : ns[2]);

	});





	//===== Contacts list =====//

	

	$('#myList').listnav({ 

		initLetter: 'a', 

		includeAll: true, 

		includeOther: true, 

		flagDisabled: true, 

		noMatchText: 'Nothing matched your filter, please click another letter.', 

		prefixes: ['the','a'] ,

	});





	//===== ShowCode plugin for <pre> tag =====//



	$('.showCode').sourcerer('js html css php'); // Display all languages

	$('.showCodeJS').sourcerer('js'); // Display JS only

	$('.showCodeHTML').sourcerer('html'); // Display HTML only

	$('.showCodePHP').sourcerer('php'); // Display PHP only

	$('.showCodeCSS').sourcerer('css'); // Display CSS only





	//===== Calendar =====//



	var date = new Date();

	var d = date.getDate();

	var m = date.getMonth();

	var y = date.getFullYear();

	

	$('#calendar').fullCalendar({

		header: {

			left: 'prev,next',

			center: 'title',

			right: 'month,basicWeek,basicDay'

		},

		editable: true,

		events: [

			{

				title: 'All day event',

				start: new Date(y, m, 1)

			},

			{

				title: 'Long event',

				start: new Date(y, m, 5),

				end: new Date(y, m, 8)

			},

			{

				id: 999,

				title: 'Repeating event',

				start: new Date(y, m, 2, 16, 0),

				end: new Date(y, m, 3, 18, 0),

				allDay: false

			},

			{

				id: 999,

				title: 'Repeating event',

				start: new Date(y, m, 9, 16, 0),

				end: new Date(y, m, 10, 18, 0),

				allDay: false

			},

			{

				title: 'Actually any color could be applied for background',

				start: new Date(y, m, 30, 10, 30),

				end: new Date(y, m, d+1, 14, 0),

				allDay: false,

				color: '#B55D5C'

			},

			{

				title: 'Lunch',

				start: new Date(y, m, 14, 12, 0),

				end: new Date(y, m, 15, 14, 0),

				allDay: false

			},

			{

				title: 'Birthday PARTY',

				start: new Date(y, m, 18),

				end: new Date(y, m, 20),

				allDay: false

			},

			{

				title: 'Click for Google',

				start: new Date(y, m, 27),

				end: new Date(y, m, 29),

				url: 'http://google.com/'

			}

		]

	});

	

	

	//===== Dynamic data table =====//



	oTable = $('#example').dataTable({

		"bJQueryUI": true,

		"sPaginationType": "full_numbers",

		"sDom": '<""f>t<"F"lp>'

	});

	

	

	//===== Form elements styling =====//

	

	$("select, input:checkbox, input:radio").uniform();

	

	

	//===== Form validation engine =====//



	$("#valid").validationEngine();

	



	//===== Datepickers =====//



	$( ".datepicker" ).datepicker({ 

		defaultDate: +7,

		autoSize: true,

		appendText: '(dd-mm-yyyy)',

		dateFormat: 'dd-mm-yy',

	});	



	$( ".datepickerInline" ).datepicker({ 

		defaultDate: +7,

		autoSize: true,

		appendText: '(dd-mm-yyyy)',

		dateFormat: 'dd-mm-yy',

		numberOfMonths: 1

	});	





	//===== Progressbar (Jquery UI) =====//



	$( "#progressbar" ).progressbar({

			value: 37

	});

		

		

	//===== Tooltip =====//

		

	$('.leftDir').tipsy({fade: true, gravity: 'e'});

	$('.rightDir').tipsy({fade: true, gravity: 'w'});

	$('.topDir').tipsy({fade: true, gravity: 's'});

	$('.botDir').tipsy({fade: true, gravity: 'n'});



		

	//===== Information boxes =====//

		

	$(".hideit").click(function() {

		$(this).fadeOut(400);

	});

	



	//=====Resizable table columns =====//

	

	var onSampleResized = function(e){

		var columns = $(e.currentTarget).find("th");

		var msg = "columns widths: ";

		columns.each(function(){ msg += $(this).width() + "px; "; })

	};	



	$(".resize").colResizable({

		liveDrag:true, 

		gripInnerHtml:"<div class='grip'></div>", 

		draggingClass:"dragging", 

		onResize:onSampleResized});





	//===== Left navigation submenu animation =====//	

		

	$("ul.sub li a").hover(function() {

	$(this).stop().animate({ color: "#3a6fa5" }, 400);

	},function() {

	$(this).stop().animate({ color: "#494949" }, 400);

	});

	

	

	//===== Image gallery control buttons =====//



	 $(".pics ul li").hover(

		  function() { $(this).children(".actions").show("fade", 200); },

		  function() { $(this).children(".actions").hide("fade", 200); }

	 );

	



	//===== Color picker =====//



	$('#colorpickerField').ColorPicker({

		onSubmit: function(hsb, hex, rgb, el) {

			$(el).val(hex);

			$(el).ColorPickerHide();

		},

		onBeforeShow: function () {

			$(this).ColorPickerSetColor(this.value);

		}

	})

	.bind('keyup', function(){

		$(this).ColorPickerSetColor(this.value);

	});	

	

	

	//===== Autogrowing textarea =====//

	

	$(".auto").autoGrow();

	



	//===== Autotabs. Inline data rows =====//



	$('.onlyNums input').autotab_magic().autotab_filter('numeric');

	$('.onlyText input').autotab_magic().autotab_filter('text');

	$('.onlyAlpha input').autotab_magic().autotab_filter('alpha');

	$('.onlyRegex input').autotab_magic().autotab_filter({ format: 'custom', pattern: '[^0-9\.]' });

	$('.allUpper input').autotab_magic().autotab_filter({ format: 'alphanumeric', uppercase: true });

	

	

	//===== jQuery UI sliders =====//	

	

	$( ".uiSlider" ).slider();

	

	$( ".uiSliderInc" ).slider({

		value:100,

		min: 0,

		max: 500,

		step: 50,

		slide: function( event, ui ) {

			$( "#amount" ).val( "$" + ui.value );

		}

	});

	$( "#amount" ).val( "$" + $( ".uiSliderInc" ).slider( "value" ) );

		

	$( ".uiRangeSlider" ).slider({

		range: true,

		min: 0,

		max: 500,

		values: [ 75, 300 ],

		slide: function( event, ui ) {

			$( "#rangeAmount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );

		}

	});

	$( "#rangeAmount" ).val( "$" + $( ".uiRangeSlider" ).slider( "values", 0 ) +" - $" + $( ".uiRangeSlider" ).slider( "values", 1 ));

			

	$( ".uiMinRange" ).slider({

		range: "min",

		value: 37,

		min: 1,

		max: 700,

		slide: function( event, ui ) {

			$( "#minRangeAmount" ).val( "$" + ui.value );

		}

	});

	$( "#minRangeAmount" ).val( "$" + $( ".uiMinRange" ).slider( "value" ) );

	

	$( ".uiMaxRange" ).slider({

		range: "max",

		min: 1,

		max: 100,

		value: 20,

		slide: function( event, ui ) {

			$( "#maxRangeAmount" ).val( ui.value );

		}

	});

	$( "#maxRangeAmount" ).val( $( ".uiMaxRange" ).slider( "value" ) );	

	

	

	

	$( "#eq > span" ).each(function() {

		// read initial values from markup and remove that

		var value = parseInt( $( this ).text(), 10 );

		$( this ).empty().slider({

			value: value,

			range: "min",

			animate: true,

			orientation: "vertical"

		});

	});

	

	

	//===== Breadcrumbs =====//	



	$("#breadCrumb").jBreadCrumb();

	

	

	//===== Autofocus =====//	

	

	$('.autoF').focus();





	//===== Tabs =====//

		

	$.fn.simpleTabs = function(){ 

	

		//Default Action

		$(this).find(".tab_content").hide(); //Hide all content

		$(this).find("ul.tabs li:first").addClass("activeTab").show(); //Activate first tab

		$(this).find(".tab_content:first").show(); //Show first tab content

	

		//On Click Event

		$("ul.tabs li").click(function() {

			$(this).parent().parent().find("ul.tabs li").removeClass("activeTab"); //Remove any "active" class

			$(this).addClass("activeTab"); //Add "active" class to selected tab

			$(this).parent().parent().find(".tab_content").hide(); //Hide all tab content

			var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content

			$(activeTab).show(); //Fade in the active content

			return false;

		});

	

	};//end function



	$("div[class^='widget']").simpleTabs(); //Run function on any div with class name of "Simple Tabs"





	//===== Placeholder for all browsers =====//

	

	$("input").each(

		function(){

			if($(this).val()=="" && $(this).attr("placeholder")!=""){

			$(this).val($(this).attr("placeholder"));

			$(this).focus(function(){

				if($(this).val()==$(this).attr("placeholder")) $(this).val("");

			});

			$(this).blur(function(){

				if($(this).val()=="") $(this).val($(this).attr("placeholder"));

			});

		}

	});





	//===== User nav dropdown =====//		



	$('.dd').click(function () {

		$('ul.menu_body').slideToggle(100);

	});

	

	$(document).bind('click', function(e) {

	var $clicked = $(e.target);

	if (! $clicked.parents().hasClass("dd"))

		$("ul.menu_body").hide(10);

	});

	

	$('.acts').click(function () {

		$('ul.actsBody').slideToggle(100);

	});

	

	

	//===== Collapsible elements management =====//

	

	$('.exp').collapsible({

		defaultOpen: 'current',

		cookieName: 'navAct',

		cssOpen: 'active',

		cssClose: 'inactive',

		speed: 300

	});



	$('.opened').collapsible({

		defaultOpen: 'opened,toggleOpened',

		cssOpen: 'inactive',

		cssClose: 'normal',

		speed: 200

	});



	$('.closed').collapsible({

		defaultOpen: '',

		cssOpen: 'inactive',

		cssClose: 'normal',

		speed: 200

	});

	

	









	//===== Flot settings. You can place your own flot settings here =====//





	/* Lines */

	

	$(function () {

    var sin = [], cos = [];

    for (var i = 0; i < 10; i += 0.5) {

        sin.push([i, Math.sin(i)]);

        cos.push([i, Math.cos(i)]);

    }



    var plot = $.plot($(".chart"),

           [ { data: sin, label: "sin(x)"}, { data: cos, label: "cos(x)" } ], {

               series: {

                   lines: { show: true },

                   points: { show: true }

               },

               grid: { hoverable: true, clickable: true },

               yaxis: { min: -1.1, max: 1.1 },

			   xaxis: { min: 0, max: 9 }

             });



    function showTooltip(x, y, contents) {

        $('<div id="tooltip">' + contents + '</div>').css( {

            position: 'absolute',

            display: 'none',

            top: y + 5,

            left: x + 5,

            border: '1px solid #000',

            padding: '2px',

			'z-index': '9999',

            'background-color': '#202020',

			'color': '#fff',

			'font-size': '11px',

            opacity: 0.8

        }).appendTo("body").fadeIn(200);

    }



    var previousPoint = null;

    $(".chart").bind("plothover", function (event, pos, item) {

        $("#x").text(pos.x.toFixed(2));

        $("#y").text(pos.y.toFixed(2));



        if ($("#enableTooltip:checked").length > 0) {

            if (item) {

                if (previousPoint != item.dataIndex) {

                    previousPoint = item.dataIndex;

                    

                    $("#tooltip").remove();

                    var x = item.datapoint[0].toFixed(2),

                        y = item.datapoint[1].toFixed(2);

                    

                    showTooltip(item.pageX, item.pageY,

                                item.series.label + " of " + x + " = " + y);

                }

            }

            else {

                $("#tooltip").remove();

                previousPoint = null;            

            }

        }

    });



    $(".chart").bind("plotclick", function (event, pos, item) {

        if (item) {

            $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");

            plot.highlight(item.series, item.datapoint);

        }

    });

});







	/* Lines with autodrowing */



	$(function () {

		// we use an inline data source in the example, usually data would

		// be fetched from a server

		var data = [], totalPoints = 200;

		function getRandomData() {

			if (data.length > 0)

				data = data.slice(1);

	

			// do a random walk

			while (data.length < totalPoints) {

				var prev = data.length > 0 ? data[data.length - 1] : 50;

				var y = prev + Math.random() * 10 - 5;

				if (y < 0)

					y = 0;

				if (y > 100)

					y = 100;

				data.push(y);

			}

	

			// zip the generated y values with the x values

			var res = [];

			for (var i = 0; i < data.length; ++i)

				res.push([i, data[i]])

			return res;

		}

	

		// setup control widget

		var updateInterval = 1000;

		$("#updateInterval").val(updateInterval).change(function () {

			var v = $(this).val();

			if (v && !isNaN(+v)) {

				updateInterval = +v;

				if (updateInterval < 1)

					updateInterval = 1;

				if (updateInterval > 2000)

					updateInterval = 2000;

				$(this).val("" + updateInterval);

			}

		});

	

		// setup plot

		var options = {

			yaxis: { min: 0, max: 100 },

			xaxis: { min: 0, max: 100 },

			colors: ["#afd8f8"],

			series: {

					   lines: { 

							lineWidth: 2, 

							fill: true,

							fillColor: { colors: [ { opacity: 0.6 }, { opacity: 0.2 } ] },

							//"#dcecf9"

							steps: false

	

						}

				   }

		};

		var plot = $.plot($(".autoUpdate"), [ getRandomData() ], options);

	

		function update() {

			plot.setData([ getRandomData() ]);

			// since the axes don't change, we don't need to call plot.setupGrid()

			plot.draw();

			

			setTimeout(update, updateInterval);

		}

	

		update();

	});







	/* Bars */



	$(function () {

    var d2 = [[0.6, 29], [2.6, 13], [4.6, 46], [6.6, 30], [8.6, 48], [10.6, 22], [12.6, 40], [14.6, 32], [16.6, 39], [18.6, 16], [20.6, 27], [22.6, 22], [24.6, 2], [26.6, 45], [28.6, 23], [30.6, 28], [32.6, 30], [34.6, 40], [36.6, 20], [38.6, 47], [40.6, 12], [42.6, 49], [44.6, 28], [46.6, 15], [48.6, 24]];

	

    var plot = $.plot($(".bars"),

           [ { data: d2} ], {

               series: {

                   bars: { 

					show: true,

					lineWidth: 0.5,

					barWidth: 0.85, 

					fill: true,

					fillColor: { colors: [ { opacity: 0.8 }, { opacity: 1 } ] },

					align: "left", 

					horizontal: false,

				   },

               },

               grid: { hoverable: true, clickable: true },

               yaxis: { min: 0, max: 50 },

			   xaxis: { min: 0, max: 50 },

             });



	});













	/* Pie charts */

	

	$(function () {

		var data = [];

		var series = Math.floor(Math.random()*10)+1;

		for( var i = 0; i<series; i++)

		{

			data[i] = { label: "Series"+(i+1), data: Math.floor(Math.random()*100)+1 }

		}

	

	$.plot($("#graph1"), data, 

	{

			series: {

				pie: { 

					show: true,

					radius: 1,

					label: {

						show: true,

						radius: 2/3,

						formatter: function(label, series){

							return '<div style="font-size:11px;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';

						},

						threshold: 0.1

					}

				}

			},

			legend: {

				show: false

			},

			grid: {

				hoverable: false,

				clickable: true

			},

	});

	$("#interactive").bind("plothover", pieHover);

	$("#interactive").bind("plotclick", pieClick);

	

	$.plot($("#graph2"), data, 

	{

			series: {

				pie: { 

					show: true,

					radius:300,

					label: {

						show: true,

						formatter: function(label, series){

							return '<div style="font-size:11px;text-align:center;padding:2px;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';

						},

						threshold: 0.1

					}

				}

			},

			legend: {

				show: false

			},

			grid: {

				hoverable: false,

				clickable: true

			}

	});

	$("#interactive").bind("plothover", pieHover);

	$("#interactive").bind("plotclick", pieClick);

	});

	

	function pieHover(event, pos, obj) 

	{

		if (!obj)

					return;

		percent = parseFloat(obj.series.percent).toFixed(2);

		$("#hover").html('<span style="font-weight: bold; color: '+obj.series.color+'">'+obj.series.label+' ('+percent+'%)</span>');

	}

	function pieClick(event, pos, obj) 

	{

		if (!obj)

					return;

		percent = parseFloat(obj.series.percent).toFixed(2);

		alert(''+obj.series.label+': '+percent+'%');

	}



	

});