/*
|
|
| This script will add a dialog box with instrucntions for adding your website to the home screen.
|
|
*/

// dialog box will fade away after "?" mili-seconds
var fade_out_after = 7000;
var background_color = '#000000'; // black
var forground_color = '#ffffff'; // white


$(document).ready(function(){

		
		
	//alert(navigator.userAgent);
		
		
	// FROM HOME SCREEN?
	function isMobileSafari() {
	    return navigator.userAgent.match(/(iPod|iPhone|iPad)/) && navigator.userAgent.match(/AppleWebKit/)
	}
	
	function isiPad() {
	    return navigator.userAgent.match(/(iPad)/) && navigator.userAgent.match(/AppleWebKit/)
	}
	
	var is_safari = isMobileSafari();
	var is_iPad = isiPad();

	if (window.navigator.standalone) {
	    // user navigated from web clip, home screen, don't show
	    //alert('from home screen');
	    $('#wrap_device_options').hide();
	}
	else if (is_safari){
	
	    //user navigated from mobile Safari
	    //alert('from browser');
	    
	    $('body.first_visit').append('<a id="applify" style="z-index: 1000001; border: 1px solid rgba(0, 0, 0, 0.5); width: 210px; padding: 10px; -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 15px, inset rgba(255, 255, 255, 0.2) 0px 20px 0 0; background: '+background_color+'; border-radius: 10px; position: absolute; font-size: 12px; color: '+forground_color+'; line-height: 1.3em;">'+
	   
	    'Install this web app on your device. Tap '+
	    
	    '<span id="applify_icon" style="margin-right: 2px; border: 2px solid '+forground_color+'; height: 9px; width: 13px; display: inline-block; position: relative; top: 3px;">&nbsp;'+
	    
	    '	<span id="applify_icon_cover" style="background: '+background_color+'; position: absolute; top: -2px; right: -2px; display: block; width: 12px; height: 8px; ">&nbsp;</span>'+
	    
	    '   <span id="applify_icon_arrow" style="border: solid; border-width: 6px 0 6px 6px; border-color: transparent transparent transparent '+forground_color+'; position: absolute; top: -5px; right: -3px; z-index: 1000003;"></span>'+
	    
	    '   <span id="applify_icon_curve" style="background: '+forground_color+'; display: block; width: 8px; height: 9px; border-radius: 10px 0 0 0; position: absolute; left: 2px; top: -2px;"></span>'+
	    
	    '   <span id="applify_icon_curve_cover" style="background: '+background_color+'; display: block; width: 10px; height: 6px; border-radius: 10px 0 0 0; position: absolute; left: 2px; top: 3px; z-index: 1000002;"></span>'+
	    	
	    '</span>'+
	    
	    ' then <strong style="font-weight: bold; color: '+forground_color+';"> \'Add to Home Screen\'</strong>.'+
	    
	    '<span id="applify_pointer" style="border: solid; position: absolute; left: 50%; margin-left: -20px; z-index: 1000000;"></span>'+
	    
	    '<span style=" border: 2px solid #ccc; -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0px 0px 5px; overflow: hidden; width: 31px; height: 31px; border-radius: 20px; display: block; position: absolute; top: -15px; right: -15px; background: #000; text-align: center; color: #ccc; font-weight: bold; font-size: 32px; line-height: 1em; -webkit-transform: rotate(45deg);">'+
	    
	    '     <span style="font-family: Arial,sans-serif; position: absolute; top: -3px; left: 50%; font-weight: bold; font-size: 37px; color: white; -webkit-transform: rotate(0deg); background: transparent; width:36px; height: 36px; line-height: 36px; margin: 0 0 0 -18px; padding: 0;">+</span>'+
	    
	    '</span> </a>');
	    
	 
	    
	    // iPhone
	    if(!is_iPad){

			//alert('iPhone..');

	    	$('a#applify').css({
	    	
	    		//'border':'1px solid red',
	    		'bottom':'20px',
	    		'left':'50%', 
	    		'margin':'0 0 0 -115px'
	    		
	    	});

	    	$('a#applify #applify_pointer').css({
	    	
	    		'border-color': background_color+' transparent transparent transparent',
	    		'border-width': '20px 20px 0 20px',
	    		'bottom': '-14px'
	    		
	    	});
		}


		// iPad
	    else if(is_iPad){
	    
	    	$('a#applify').css({
	    	
	    		//'border':'1px solid red',
	    		'top':'20px',
	    		'left':'92px'
	    	});
	    	$('a#applify #applify_pointer').css({
	    	
	    		//'border-color': 'transparent transparent '+background_color+' transparent',
	    		'border-color': 'transparent transparent #333333 transparent',
	    		'border-width': '0 20px 20px 20px',
	    		'top': '-14px'
	    	});
	    }
	    
	    	    
	}
	else {
	    //user navigated from some other browser, redirect to unavailable page
	    //window.location = "unavailable.aspx";
	    //alert('c');
	}
	
	$('a#applify').click(function(){
		
		$('a#applify').hide();
		return false;
	});
	
	
	// fade out
	setTimeout(function(){
	
		$('a#applify').fadeOut('slow');
	
	}, fade_out_after);


});