// JavaScript Document

<!--
$(document).ready(function(){

	// delete the link of each shopping cart button to prevent loading on click

	$('.ikonmaintenance_button').each(function(index, element){
		$(element).attr('href','#null');
	});

	// create bubble popups and attach them to each element in the DOM with "shoppingcart_button" as class attribute;
	// by default, bubble popups are shown on mouse over on the shoppingcart button and hidden on mouse out.

	$('.ikonmaintenance_button').CreateBubblePopup({
													align: 'right',
													
													innerHtml: 'Repairs, Decorating and Complete Maintenance Packages', 
													innerHtmlStyle: {
																		color:'#FFFFFF', 
																		'text-align':'center'
																	},
																	
													themeName: 	'all-black',
													themePath: 	'img/jquerybubblepopup-theme'
											   });
											   // Note: you need to use quotation marks for each CSS property of "innerHtmlStyle" with a "-"

	// Note: 
	// you can add more mouseover/mouseout events to the shopping cart button, 
	// new events don't interfere with bubble popup events.

	$('.ikonmaintenance_button').mouseover(function(){
		$('#status').css({
							'background-color':'#ECFFD9',
							border:'#006600 1px solid'
						});
		$('#status').html('your mouse is over a button');
	});
	$('.ikonmaintenance_button').mouseout(function(){
		$('#status').css({
							'background-color':'#FFFFFF',
							border:'#FFFFFF 1px solid'
						});
		$('#status').html('');
	});

	// when shoppingcart button is clicked then new bubble popup is shown with new options;
	// finally, if the bubble popup is not closed, pause for 10 seconds then hide it...

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

		// get the product ID
		var product_id = this.id;
		product_id = product_id.split('productId');
		product_id = product_id[1];

		// right here, you could add the product to your shopping cart application performing an asynchronous HTTP request...
		// $.get('shoppingcart.php?id='+product_id, function(data){});
		
		var ikonmaintenance_button = $(this);
		var bubble_popup_id = ikoncreative_button.GetBubblePopupID(); //get the ID of the Bubble Popup associated to this shoppingcart button
		var seconds_to_wait = 10;

		// show a bubble popup with new options when "this" shoppingcart button is clicked
		ikonmaintenance_button_button.ShowBubblePopup({

												align: 'center',
												innerHtml: '<p>product n.' + product_id + ' <br />added to cart sucessfully!</p><br />' + 
														   '<p><strong style="color:#003366">the bubble popup <br />will be closed <br />in <span class="countdown">'+seconds_to_wait+'</span> sec.</strong></p><br />' + 
														   '<p><a href="#null">close</a></p>',
														   
												innerHtmlStyle:{ 
																color:'#666666', 
																'text-align':'left'
															   },
												   
												themeName: 	'azure',
												themePath: 	'img/jquerybubblepopup-theme'

											}, false); //save_options = false; it will use new options only on click event, it does not overwrite old options.


		// "freeze" the Bubble Popup then it will not respond to mouse events (as mouseover/mouseout) 
		// until ".ShowBubblePopup()" or ".HideBubblePopup()" is called again.
		ikonmaintenance_button.FreezeBubblePopup(); 

		// when the "close" link is clicked, hide the bubble popup
		$('#'+bubble_popup_id+' a:last').click(function(){
			$(ikonmaintenance_button).HideBubblePopup();
		});

		//start the countdown then hide the bubble popup
		function doCountdown(){
			var timer = setTimeout(function(){
				seconds_to_wait--;
				if($('#'+bubble_popup_id+' span.countdown').length>0){ //if exists... 
					$('#'+bubble_popup_id+' span.countdown').html(seconds_to_wait);
				};
				if(seconds_to_wait > 0){
					doCountdown();
				}else{
					$(ikonmaintenance_button).HideBubblePopup(); //hide the bubble popup associated to the shoppingcart button
				};
			},1000);
		};
		doCountdown();

	});//end onclick event

});
//-->