/*
 * @author			Daniyal Hamid
 * @created			12-October-2010
 * @revised			20-November-2010
 * @description		"Generic Popups" script lets you create different kinds of Popups; 
 * 					such as Tooltips, Message Boxes, Alerts, Prompts tc. with support for 
 * 					complex structures. The functionality of the plug-in is similar to 
 * 					that of jQuery, therefore, the learning curve is relatively easier.
 * 
 * @license			This JavaScript file is a commercial file, available for purchase at 
 *					http://codecanyon.net/user/daniyal/portfolio. Any illegal copying, 
 *					distribution, packaging or re-production of this script for commercial or 
 *					personal use is strictly prohibited and will be considered theft.
 *
 * @copyright		The author is the first owner of copyright and reserves all rights to
 *					all written work contained in this file. Distribution, re-production
 *					or commercial use of the written work in this file, without the author's 
 * 					signed permission, prior consent or a valid license, is strictly prohibited.
 *					The author is protected by the "Copyright, Designs and Patents Act 1988" of 
 *					the United Kingdom. Any infringement of the copyright, in or outside of the
 *					United Kingdom, may result in a lawsuit.
 */

jQuery(window).ready(function() {
	
	/*
	 * Resets and repositions all elements when called.
	 */	
	// resize explicitly
	jQuery(window).bind('resize', function() {
		jQuery().popup('reposition');
	});
	
	
	
	/*
	 * The code below is for the examples.
	 */
	
	/*****
			Popup#1
	*****/
	jQuery('#struct1').popup()
	.popup('assign', jQuery('#handler1'), 'click', 'toggle', {
		position: {
			x: 'rightEdge', 
			y: 'topEdge', 
			position: 'fixed'
		}
	});
	
	jQuery('#handler1').bind('trigger.popup', function(event, handler, action, popupData) {
		if(popupData.visible)
			handler.val('Click to Hide');
		else
			handler.val('Click to Show');
	});
	
	
	/*****
			Popup#2
	*****/
	var popup2Pos = {
		x: 'left',
		y: 'overlay',
		position: 'fixed',
		offsetX: 5,
		inBoundX: false
	};
	
	jQuery('#struct2').popup()
	.popup('assign', jQuery(window), 'load', 'show', {position: popup2Pos});
	
	jQuery('#struct2').bind({
		'regionOver.popup': function() {
			jQuery(this).popup('position', {
				x: 'left',
				y: 'overlay',
				position: 'fixed',
				offsetX: 5,
				inBoundX: true
			});
		},
		'regionOut.popup': function() {
			jQuery(this).popup('position', popup2Pos);
		}
	});
	
	
	/*****
			Popup#3
	*****/
	jQuery('#struct3').popup({htmlBlock: 'a'})
	.popup('assign', jQuery(window), 'scroll', 'toggle', {
		position: {
			x: 'rightEdge',	
			y: 'bottomEdge', 
			position: 'fixed'
		},
		condition: function() {
			return (jQuery(window).scrollTop() > 150) ? true : false;
		}
	});
	
	
	/*****
			Popup#4
	*****/
	jQuery('#struct4').popup({htmlBlock: 'p'})
	.popup('assign', jQuery('#handler4'), 'mouseenter', 'show', {
		position: {
			relativeTo: jQuery('#handler4'), 
			x: 'center', 
			y: 'top'
		}, 
		showOptions: {opacity: 0.4, duration: 250},
		hideOptions: {duration: 250}
	})
	.popup('assign', jQuery('#handler4'), 'mouseleave', 'hide');
	
	jQuery('#struct4').bind({
		'regionOver.popup': function() {
			jQuery(this).popup('show', {opacity: 1, duration: 250});
		},
		'regionOut.popup': function() {
			jQuery(this).popup('hide', {duration: 250});
		}
	});
	
	
	/*****
			Popup#5
	*****/
	jQuery('#struct5').popup()
	.popup('assign', jQuery('#handler5'), 'mouseenter', 'show', {
		position: {
			relativeTo: jQuery('#handler5'), 
			x: 'overlay', 
			y: 'bottom', 
			injectIn: jQuery('#handler5'), 
			offsetY: -2, 
			inBoundY: false
		}, 
		showOptions: {
			fade: false, 
			animation: {height: "+=500"}, 
			duration: 400
		}
	})
	.popup('assign', jQuery('#handler5'), 'mouseleave', 'hide', {
		hideOptions: {
			fade: false, 
			animation: {height: "-=500"}, 
			duration: 400
		}
	});
	
	
	/*****
			Popup#6
	*****/
	jQuery('#struct6').popup()
	.popup('assign', jQuery('#handler6_btn'), 'click', 'show', {
		position: {
			position: 'fixed', 
			x: 'overlay', 
			y: 'bottomEdge', 
			z: 500
		}
	})
	.popup('assign', jQuery('#handler6_x'), 'click', 'hide');
	
	jQuery('#struct6').bind({
		'beforeShow.popup': function() {
			jQuery('handler6_btn').attr('disabled', 'disabled');
		},
		'beforeHide.popup': function() {
			jQuery('handler6_btn').removeAttr('disabled');
		}
	});
	
	
	/*****
			Popup#7
	*****/
	jQuery('#struct7').popup({htmlBlock: 'div'})
	.popup('assign', jQuery('#handler7'), 'click', 'toggle', {
		position: {
			relativeTo: jQuery('#handler7'), 
			x: 'right', 
			y: 'topEdge', 
			offsetY: -10, 
			inBoundY: false
		}
	});
	
	
	/*****
			Popup#8
	*****/
	jQuery('#struct8').popup({htmlBlock: 'div'})
	.popup('assign', jQuery('#handler8_btn'), 'click', 'toggle', {
		position: {
			x: 'overlay', 
			y: 'topEdge', 
			z: 1000, 
			position: 'fixed'
		},
		showOptions: {opacity: 0.6}
	})
	.popup('assign', jQuery('#handler8_x'), 'click', 'hide');
	
	jQuery('#struct8').bind({
		'regionOver.popup': function() {
			jQuery(this).popup('show', {opacity: 1});
		},
		'regionOut.popup': function(e, handler, popupData) {				
			if(popupData.visible)
				jQuery(this).popup('show', {opacity: 0.4});
		},
		'regionClick.popup': function() {
			jQuery(this).popup('hide');
		}
	});
	
	
	/*****
			Popup#9
	*****/
	jQuery('#struct9').popup({htmlBlock: 'p'})
	.popup('assign', jQuery('#handler9'), 'mouseenter', 'show', {
		position: {
			relativeTo: jQuery('#handler9'), 
			x: 'overlay', 
			y: 'overlay', 
			injectIn: jQuery('#handler9')
		}, 
		showOptions: {opacity: 0.6}
	})
	.popup('assign', jQuery('#handler9'), 'mouseleave', 'hide');
	
	
	
	/*****
			Popup#10
	*****/
	jQuery('#struct10').popup()
	.popup('assign', jQuery('#handler10'), 'mouseenter', 'show', {
		position: {
			relativeTo: jQuery('#handler10'), 
			x: 'leftEdge', 
			y: 'topEdge', 
			offsetX: -10, 
			offsetY: -5, 
			inBoundX: false, 
			inBoundY: false, 
			injectIn: jQuery('#handler10')
		}, 
		showOptions: {fade: false}
	})
	.popup('assign', jQuery('#handler10'), 'mouseleave', 'hide', {
		hideOptions: {fade: false}
	});
	
	
	/*****
			Popup#11
	*****/
	jQuery('#struct11').popup({htmlBlock: '#struct11_mid'})
	.popup('assign', jQuery('#handler11'), 'click', 'toggle', {
		position: {
			x: 'rightEdge', 
			y: 'bottomEdge', 
			z: 1500, 
			position: 'fixed'
		}, 
		showOptions: {opacity: 0.5}
	});
	
	jQuery('#struct11').bind({
		'regionOver.popup': function() {jQuery(this).popup('show', {opacity: 1});},
		'regionOut.popup': function() {jQuery(this).popup('show', {opacity: 0.5});}
	});
	
	
	/*****
			Popup#12
	*****/
	jQuery('#struct12').popup({htmlBlock: 'p'})
	.popup('assign', jQuery('#handler12_btn'), 'click', 'show', {
		position: {
			x: 'center', 
			y: 'center',
			z: 25000,
			position: 'fixed'
		}
	})
	.popup('assign', jQuery('#handler12_x'), 'click', 'hide');
	
	jQuery('#handler12_btn, #handler12_x').bind('trigger.popup', function(e, handler, action, popupData) {
		if(handler.attr('id') == 'handler12_x')
			'hide';
		
		if(popupData.visible)
			jQuery('#handler12_btn').attr('disabled', 'disabled');
		else
			jQuery('#handler12_btn').removeAttr('disabled');
	});
	
	
	/*****
			Popup#13
	*****/
	jQuery('#struct13').popup()
	.popup('assign', jQuery('#handler13'), 'click', 'show', {
		position: {
			x: 'overlay', 
			y: 'overlay', 
			z: 50000
		}, 
		showOptions: {opacity: 0.5}
	})
	.popup('assign', jQuery('#struct13'), 'click', 'hide');
	
	
	/*****
			Popup#14
	*****/
	jQuery('#struct14_bg').popup()
	.popup('assign', jQuery('#handler14_btn'), 'click', 'show', {
		position: {
			x: 'overlay', 
			y: 'overlay', 
			z: 50000
		}, 
		showOptions: {opacity: 0.5}
	})
	.popup('assign', jQuery('#handler14_x, #struct14_bg'), 'click', 'hide');
	
	jQuery('#struct14').popup()
	.popup('assign', jQuery('#handler14_btn'), 'click', 'show', {
		position: {
			x: 'center', 
			y: 'center', 
			z: 50010, 
			position: 'fixed'
		}
	})
	.popup('assign', jQuery('#handler14_x, #struct14_bg'), 'click', 'hide');
	
	
	/*****
			Popup#15
	*****/
	jQuery('#struct15').popup({htmlBlock: 'p'})
	
	// 1
	.popup('assign', jQuery('#handler15_area1, #handler15_lnk1'), 'mouseenter', 'show', {
		position: {relativeTo: jQuery('#handler15_img'), x: 'leftEdge', y: 'topEdge', offsetX: 160, offsetY: 80}, 
		showOptions: {opacity: 0.7, fade: false}
	})
	.popup('assign', jQuery('#handler15_area1, #handler15_lnk1'), 'mouseleave', 'hide', {hideOptions: {fade: false}})
	
	// 2
	.popup('assign', jQuery('#handler15_area2, #handler15_lnk2'), 'mouseenter', 'show', {position: {relativeTo: jQuery('#handler15_img'), x: 'leftEdge', y: 'topEdge', offsetX: 460, offsetY: 80}, showOptions: {opacity: 0.7, fade: false}})
	.popup('assign', jQuery('#handler15_area2, #handler15_lnk2'), 'mouseleave', 'hide', {hideOptions: {fade: false}})
	
	// 3
	.popup('assign', jQuery('#handler15_area3, #handler15_lnk3'), 'mouseenter', 'show', {position: {relativeTo: jQuery('#handler15_img'), x: 'leftEdge', y: 'topEdge', offsetX: 160, offsetY: 220}, showOptions: {opacity: 0.7, fade: false}})
	.popup('assign', jQuery('#handler15_area3, #handler15_lnk3'), 'mouseleave', 'hide', {hideOptions: {fade: false}})
	
	// 4
	.popup('assign', jQuery('#handler15_area4, #handler15_lnk4'), 'mouseenter', 'show', {position: {relativeTo: jQuery('#handler15_img'), x: 'leftEdge', y: 'topEdge', offsetX: 460, offsetY: 220}, showOptions: {opacity: 0.7, fade: false}})
	.popup('assign', jQuery('#handler15_area4, #handler15_lnk4'), 'mouseleave', 'hide', {hideOptions: {fade: false}})
	
	// 5
	.popup('assign', jQuery('#handler15_area5, #handler15_lnk5'), 'mouseenter', 'show', {position: {relativeTo: jQuery('#handler15_img'), x: 'leftEdge', y: 'topEdge', offsetX: 310, offsetY: 360}, showOptions: {opacity: 0.7, fade: false}})
	.popup('assign', jQuery('#handler15_area5, #handler15_lnk5'), 'mouseleave', 'hide', {hideOptions: {fade: false}});
	
	
	jQuery('#struct15').bind({
		'regionOver.popup': function() {jQuery(this).popup('show', {fade: false, opacity: 0.7});},
		'regionOut.popup': function() {jQuery(this).popup('hide', {fade: false});}
	});
	
	jQuery('#handler15_area1, #handler15_lnk1, #handler15_area2, #handler15_lnk2, #handler15_area3, #handler15_lnk3, #handler15_area4, #handler15_lnk4, #handler15_area5, #handler15_lnk5').bind('trigger.popup', function(e, handler, action, popupData) {
		
		if(action == 'show') {
			var html = 'Photoshop Paper Pattern with ';
			
			// 1
			if(handler.attr('id') == 'handler15_area1' || handler.attr('id') == 'handler15_lnk1')
				html += 'BLUE LINES';
			// 2
			else if(handler.attr('id') == 'handler15_area2' || handler.attr('id') == 'handler15_lnk2')
				html += 'BLUE BOXES';
			// 3
			else if(handler.attr('id') == 'handler15_area3' || handler.attr('id') == 'handler15_lnk3')
				html += 'BLUE GRID';
			// 4
			else if(handler.attr('id') == 'handler15_area4' || handler.attr('id') == 'handler15_lnk4')
				html += 'BLUE BOXES GRAPH';
			// 5
			else if(handler.attr('id') == 'handler15_area5' || handler.attr('id') == 'handler15_lnk5')
				html += 'BLUE GRAPH';
			
			jQuery('#struct15').popup('html', html);
		}
		
	});
	
	
	
	/*
	 * The code below is for the examples page Menu!
	 */
	
	// BEGIN MENU
	jQuery('#menu li:nth-child(1)').bind('click', function() {
		jQuery(this).addClass('active');
		jQuery('#menu li:nth-child(2)').removeClass('active');
		jQuery('#menu li:nth-child(3)').removeClass('active');
		
		jQuery('#menu1').css('display', 'block');
		jQuery('#menu2').css('display', 'none');
		jQuery('#menu3').css('display', 'none');
		
		// layout height may change when new content is loaded therefore reposition popups
		jQuery().popup('reposition');
	});
	
	jQuery('#menu li:nth-child(2)').bind('click', function() {
		jQuery(this).addClass('active');
		jQuery('#menu li:nth-child(1)').removeClass('active');
		jQuery('#menu li:nth-child(3)').removeClass('active');
		
		jQuery('#menu1').css('display', 'none');
		jQuery('#menu2').css('display', 'block');
		jQuery('#menu3').css('display', 'none');
		
		// layout height may change when new content is loaded therefore reposition popups
		jQuery().popup('reposition');
	});
	
	jQuery('#menu li:nth-child(3)').bind('click', function() {
		jQuery(this).addClass('active');
		jQuery('#menu li:nth-child(1)').removeClass('active');
		jQuery('#menu li:nth-child(2)').removeClass('active');
		
		jQuery('#menu1').css('display', 'none');
		jQuery('#menu2').css('display', 'none');
		jQuery('#menu3').css('display', 'block');
		
		// layout height may change when new content is loaded therefore reposition popups
		jQuery().popup('reposition');
	});
	// END MENU
	
});