refs #2465

 * Renaming Insight to Overlay
 * Includes a new minified piwik.js, generated as described in js/README. Please double-check whether the file is OK.
 * Servers that had the Insight plugin installed will need to delete it manually, right?

git-svn-id: http://dev.piwik.org/svn/trunk@7445 59fd770c-687e-43c8-a1e3-f5a4ff64c105

7 files changed, 350 insertions, 0 deletions

diff --git a/plugins/Overlay/templates/index.css b/plugins/Overlay/templates/index.css
new file mode 100644
index 0000000000..eaa114f84a
--- /dev/null
+++ b/plugins/Overlay/templates/index.css
@@ -0,0 +1,144 @@
+
+#Insight_Container {
+	margin-top: 9px;
+	height: 300px;
+	position: relative;
+}
+
+#Insight_Container.Insight_FullScreen {
+	position: fixed;
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	background: white;
+	z-index: 100000;
+	margin: 0;
+	padding: 0;
+}
+
+#Insight_Location {
+	color: #7E7363;
+	padding-left: 220px;
+	padding-bottom: 7px;
+	font-size: 12px;
+	cursor: default;
+}
+
+#Insight_Container.Insight_FullScreen #Insight_Location {
+	float: left;
+	width: 180px;
+	position: relative;
+	margin: 15px 0 30px 20px;
+	font-size: 11px;
+	padding: 0;
+}
+
+#Insight_Loading {
+	background: url(../../../themes/default/images/loading-blue.gif) no-repeat center 10px;
+	float: left;
+	width: 190px;
+	position: relative;
+	clear: left;
+	padding-top: 35px;
+	text-align: center;
+	display: none;
+}
+
+#Insight_Sidebar {
+	float: left;
+	width: 200px;
+	position: relative;
+	clear: left;
+}
+
+#Insight_Container.Insight_FullScreen #Insight_Sidebar {
+	width: 180px;
+	margin-left: 20px;
+}
+
+#Insight_Sidebar h2 {
+	font-size: 15px;
+	margin: 0;
+	padding: 0 0 8px 23px;
+	color: #255792;
+}
+
+#Insight_Sidebar a.Insight_FullScreen,
+#Insight_Sidebar a.Insight_NewTab {
+	display: block;
+	color: #255792;
+	font-size: 13px;
+	line-height: 15px;
+	margin-top: 20px;
+	padding: 8px 0 3px 22px;
+	background: url(../../../themes/default/images/fullscreen.png) no-repeat 0 8px;
+	text-decoration: none;
+}
+
+#Insight_Sidebar a.Insight_NewTab {
+	margin-top: 0;
+	background: url(../../../themes/default/images/newtab.png) no-repeat 0 7px;
+}
+
+#Insight_Sidebar a.Insight_FullScreen:hover,
+#Insight_Sidebar a.Insight_NewTab:hover {
+	color: #E87500;
+}
+
+#Insight_Sidebar span.Insight_CloseFullScreen {
+	display: none;
+}
+
+#Insight_Container.Insight_FullScreen #Insight_Sidebar span.Insight_OpenFullScreen {
+	display: none;
+}
+
+#Insight_Container.Insight_FullScreen #Insight_Sidebar span.Insight_CloseFullScreen {
+	display: inline;
+}
+
+#Insight_Main {
+	margin-left: 220px;
+	position: relative;
+}
+
+#Insight_Iframe {
+	width: 100%;
+	height: 100%;
+	border: 2px solid #ddd;
+}
+
+#Insight_Container.Insight_FullScreen #Insight_Iframe {
+	border-top: 0;
+	border-right: 0;
+	border-bottom: 0;
+}
+
+.Insight_Metric {
+	font-size: 12px;
+	padding-bottom: 4px;
+}
+
+.Insight_MetricValue {
+	font-size: 14px;
+	font-weight: bold;
+}
+
+.Insight_NoData {
+	font-size: 12px;
+	color: #7E7363;
+}
+
+h2.Insight_MainMetrics {
+	background: url(./info.png) 0 1px no-repeat
+}
+
+body .piwik-tooltip.Insight_Tooltip {
+	font-size: 11px;
+	padding: 3px 5px 3px 6px;
+}
+
+#Insight_NoFrame {
+	padding: 20px 0 40px 2px
+}
\ No newline at end of file
diff --git a/plugins/Overlay/templates/index.js b/plugins/Overlay/templates/index.js
new file mode 100644
index 0000000000..f3bd1d07b9
--- /dev/null
+++ b/plugins/Overlay/templates/index.js
@@ -0,0 +1,125 @@
+var Piwik_Insight = (function() {
+	
+	var $container, $iframe, $sidebar, $main, $location, $loading; 
+	
+	var isFullScreen = false;
+	
+	var iframeDomain = '';
+	
+	/** Load the sidebar for a url */
+	function loadSidebar(currentUrl) {
+		$sidebar.hide();
+		$location.html(' ');
+		$loading.show();
+		
+		iframeDomain = currentUrl.match(/http(s)?:\/\/(www\.)?([^\/]*)/i)[3];
+		
+		piwikHelper.ajaxCall('Insight', 'renderSidebar', {
+			currentUrl: currentUrl
+		}, function(response) {
+			var $response = $(response);
+			
+			var $responseLocation = $response.find('.Insight_Location');
+			var $url = $responseLocation.find('span');
+			$url.html(piwikHelper.addBreakpointsToUrl($url.text()));
+			$location.html($responseLocation.html()).show();
+			$responseLocation.remove();
+			
+			$location.find('span').hover(function() {
+				if (iframeDomain) {
+					// use addBreakpointsToUrl because it also encoded html entities
+					Piwik_Tooltip.show('<b>' + Piwik_Insight_Translations.domain + ':</b> ' + 
+						piwikHelper.addBreakpointsToUrl(iframeDomain), 'Insight_Tooltip');
+				}
+			}, function() {
+				Piwik_Tooltip.hide();
+			});
+			
+			$sidebar.empty().append($response).show();
+			$loading.hide();
+			
+			var $fullScreen = $sidebar.find('a.Insight_FullScreen');
+			$fullScreen.click(function() {
+				handleFullScreen();
+				return false;
+			});
+		}, 'html');
+	}
+	
+	/** Adjust the height of the iframe */
+	function adjustHeight() {
+		var height, iframeHeight;
+		if (isFullScreen) {
+			iframeHeight = height = $(window).height();
+		} else {
+			height = $(window).height() - $main.offset().top - 25;
+			iframeHeight = height - 4;
+		}
+		height = Math.max(300, height);
+		$container.height(height);
+		$iframe.height(iframeHeight);
+	}
+	
+	/** Handle full screen */ 
+	function handleFullScreen() {
+		if (!isFullScreen) {
+			// open full screen
+			isFullScreen = true;
+			$container.addClass('Insight_FullScreen');
+			adjustHeight();
+		} else {
+			// close full screen
+			isFullScreen = false;
+			$container.removeClass('Insight_FullScreen');
+			adjustHeight();
+		}
+	}
+	
+	return {
+		
+		/** This method is called when insight loads (from index.tpl) */
+		init: function() {
+			$container = $('#Insight_Container');
+			$iframe = $container.find('iframe');
+			$sidebar = $('#Insight_Sidebar');
+			$location = $('#Insight_Location');
+			$main = $('#Insight_Main');
+			$loading = $('#Insight_Loading');
+			
+			adjustHeight();
+			
+			window.setTimeout(function() {
+				// sometimes the frame is too high at first
+				adjustHeight();
+			}, 50);
+			
+			// this callback is unbound in broadcast.pageload
+			$(window).resize(function() {
+				adjustHeight();
+			});
+		},
+
+		/** This callback is used from within the iframe */
+		setCurrentUrl: function(currentUrl) {
+			// put the current iframe url in the main url to enable refresh and deep linking.
+			// to prevent browsers from braking the encoding, we replace the % with a $.
+			var urlValue = encodeURIComponent(currentUrl).replace(/%/g, '$');
+			
+			// the insightUrl parameter is removed when the location changes in broadcast.propagateAjax()
+			var urlKeyValue = 'insightUrl=' + urlValue;
+			
+			var urlOldValue = broadcast.getValueFromHash('insightUrl', window.location.href);
+			if (urlOldValue != urlValue) {
+				// we don't want the location in the browser history because the back and
+				// forward buttons should trigger a change in the iframe.
+				// so we use disableHistory = true
+				broadcast.propagateAjax(urlKeyValue, true);
+			}
+			
+			// load the sidebar for the current url
+			loadSidebar(currentUrl);
+		}
+
+	};
+
+})();
\ No newline at end of file
diff --git a/plugins/Overlay/templates/index.tpl b/plugins/Overlay/templates/index.tpl
new file mode 100644
index 0000000000..deadb31c2b
--- /dev/null
+++ b/plugins/Overlay/templates/index.tpl
@@ -0,0 +1,26 @@
+
+<div id="Insight_Container">
+
+	<div id="Insight_Location">&nbsp;</div>
+	
+	<div id="Insight_Sidebar"></div>
+	
+	<div id="Insight_Loading">{'General_Loading_js'|translate|escape:'html'}</div>
+	
+	<div id="Insight_Main">
+		<iframe 
+				id="Insight_Iframe" 
+				src="index.php?module=Insight&action=startInsightSession&idsite={$idSite}&period={$period}&date={$date}{if $targetUrl}#{$targetUrl}{/if}">
+		</iframe>
+	</div>
+	
+</div>
+
+
+<script type="text/javascript">
+	Piwik_Insight.init();
+	
+	Piwik_Insight_Translations = {literal}{{/literal}
+		domain: "{'Insight_Domain'|translate|escape:'html'}"
+	{literal}}{/literal};
+</script>
\ No newline at end of file
diff --git a/plugins/Overlay/templates/index_noframe.tpl b/plugins/Overlay/templates/index_noframe.tpl
new file mode 100644
index 0000000000..5d1d77b6b6
--- /dev/null
+++ b/plugins/Overlay/templates/index_noframe.tpl
@@ -0,0 +1,13 @@
+
+<div id="Insight_NoFrame">
+
+	{capture name="link"}index.php?module=Insight&action=startInsightSession&idsite={$idSite}&period={$period}&date={$date}{if $targetUrl}#{$targetUrl}{/if}{/capture}
+	{capture name="linkTag"}<a id="Insight_Link" href="{$smarty.capture.link}" target="_blank">{/capture}
+	
+	{'Insight_NoFrameModeText'|translate|escape:'html'|sprintf:'<br />':$smarty.capture.linkTag:'</a>'}
+	
+	<script type="text/javascript">
+		window.open('{$smarty.capture.link}', '_newtab');
+	</script>
+
+</div>
\ No newline at end of file
diff --git a/plugins/Overlay/templates/info.png b/plugins/Overlay/templates/info.png
new file mode 100644
index 0000000000..12cd1aef90
--- /dev/null
+++ b/plugins/Overlay/templates/info.png
diff --git a/plugins/Overlay/templates/notify_parent_iframe.tpl b/plugins/Overlay/templates/notify_parent_iframe.tpl
new file mode 100644
index 0000000000..04e3bd2ee0
--- /dev/null
+++ b/plugins/Overlay/templates/notify_parent_iframe.tpl
@@ -0,0 +1,14 @@
+<html>
+<head>
+	<title></title>
+</head>
+<body>
+	<script type="text/javascript">
+		// go up two iframes to find the piwik window
+		var piwikWindow = window.parent.parent;
+		// notify piwik of location change
+		// the location has been passed as the hash part of the url from the insight session
+		piwikWindow.Piwik_Insight.setCurrentUrl(window.location.hash.substring(1));
+	</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/plugins/Overlay/templates/sidebar.tpl b/plugins/Overlay/templates/sidebar.tpl
new file mode 100644
index 0000000000..b2777d73d3
--- /dev/null
+++ b/plugins/Overlay/templates/sidebar.tpl
@@ -0,0 +1,28 @@
+<div> <!-- Wrapper is needed that the html can be jqueryfied -->
+
+	<!-- This div is removed by JS and the content is put in the location div -->
+	<div class="Insight_Location">
+		<b>{'Insight_Page'|translate|escape:'html'}:</b> 
+		<span>{$location|escape:'html'}</span>
+	</div>
+	
+	{if count($data)}
+		<h2 class="Insight_MainMetrics">{'Insight_MainMetrics'|translate|escape:'html'}</h2>
+		{foreach from=$data item=metric}
+			<div class="Insight_Metric">
+				<span class="Insight_MetricValue">{$metric.value}</span> {$metric.name|escape:'html'}
+			</div>
+		{/foreach}
+	{else}
+		<div class="Insight_NoData">{'Insight_NoData'|translate|escape:'html'}</div>
+	{/if}
+	
+	<a class="Insight_FullScreen" href="#">
+		<span class="Insight_OpenFullScreen">{'Insight_OpenFullScreen'|translate|escape:'html'}</span>
+		<span class="Insight_CloseFullScreen">{'Insight_CloseFullScreen'|translate|escape:'html'}</span>
+	</a>
+	<a class="Insight_NewTab" href="index.php?module=Insight&action=startInsightSession&idsite={$idSite}&period={$period}&date={$date}#{$currentUrl|escape:'html'}" target="_blank">
+		{'Insight_OpenNewTab'|translate|escape:'html'}
+	</a>
+	
+</div>
\ No newline at end of file