<?xml version="1.0" encoding="UTF-8"?>
<Module>
	<ModulePrefs author="LabPixies"
	author_email="info+clock@labpixies.com"
	description="__MSG_desc__"
	screenshot="http://www.labpixies.com/campaigns/clock/images/screenshot.jpg"
	title="__MSG_title__"
	title_url="http://www.labpixies.com"
	thumbnail="http://www.labpixies.com/campaigns/clock/images/thumbnail.jpg" height="316" render_inline="never">
		<Locale messages="http://www.labpixies.com/campaigns/clock/i19/all_all.xml"/>	
		<Locale lang="de" messages="http://www.labpixies.com/campaigns/clock/i19/de_all.xml"/>
		<Locale lang="es" messages="http://www.labpixies.com/campaigns/clock/i19/es_all.xml"/>
		<Locale lang="fr" messages="http://www.labpixies.com/campaigns/clock/i19/fr_all.xml"/>
		<Locale lang="it" messages="http://www.labpixies.com/campaigns/clock/i19/it_all.xml"/>		
 		<Locale lang="iw" messages="http://www.labpixies.com/campaigns/clock/i19/iw_all.xml"/>
		<Locale lang="ja" messages="http://www.labpixies.com/campaigns/clock/i19/ja_all.xml"/>
		<Locale lang="nl" messages="http://www.labpixies.com/campaigns/clock/i19/nl_all.xml"/>
		<Locale lang="pl" messages="http://www.labpixies.com/campaigns/clock/i19/pl_all.xml"/>
		<Locale lang="pt-PT" messages="http://www.labpixies.com/campaigns/clock/i19/pt_all.xml"/>
		<Locale lang="pt-BR" messages="http://www.labpixies.com/campaigns/clock/i19/pt_all.xml"/>		
		<Locale lang="ru" messages="http://www.labpixies.com/campaigns/clock/i19/ru_all.xml"/>
		<Locale lang="zh-CN" messages="http://www.labpixies.com/campaigns/clock/i19/zh_cn_all.xml"/>
		<Require feature="setprefs"/>
		<Require feature="analytics"/>
		<Require feature="dynamic-height"/>
	</ModulePrefs>
	<UserPref name="skin_id" default_value="" datatype="hidden"/>	
<Content type="html">
<![CDATA[
<!-- Clock Module
	Design & Code: LabPixies
	All subsequent code and resources used are proprietary of LabPixies unless directly stated otherwise.
	Copyright (C) 2006 LabPixies.    
	www.labpixies.com

	This work is licensed under the Creative Commons Attribution-NonCommercial-NoDerivs 2.5 License.
	To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-nd/2.5/ or
	send a letter to Creative Commons, 543 Howard Street, 5th Floor, San Francisco, California, 94105, USA.
-->
<title>Clock</title>
<style type="text/css">
	body,html {
		margin: 0;
		padding: 0;
	}

	.style1{font-size:1px;}

</style>

<!-- PUT THIS TAG IN THE head SECTION -->
<script type="text/javascript" src="http://partner.googleadservices.com/gampad/google_service.js">
</script>
<script type="text/javascript">
  GS_googleAddAdSenseService("ca-pub-8123415297019784");
  GS_googleEnableAllServices();
</script>
<script type="text/javascript">
  GA_googleAddSlot("ca-pub-8123415297019784", "clock_txt");
</script>
<script type="text/javascript">
  GA_googleFetchAds();
</script>
<!-- END OF TAG FOR head SECTION -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>

<script type="text/javascript">	
	var $lp=jQuery.noConflict();
	var _gadgetID=27;
	
	var mMENU = _IG_GetCachedUrl("http://cdn.labpixies.com/infra/js/lp_menu.js");
	document.write('<scr'+'ipt type="text/javascript" src="'+mMENU+'"></scr'+'ipt>');
	
	var mCLOCK = _IG_GetCachedUrl("http://cdn.labpixies.com/campaigns/clock/clocks_colors.js");
	document.write('<scr'+'ipt type="text/javascript" src="'+mCLOCK+'"></scr'+'ipt>');	
</script>

<!--[if IE]>	
	<script type="text/javascript">	
		var mIESCR = _IG_GetCachedUrl("http://cdn.labpixies.com/lib/lp_excanvas.js");
		document.write('<scr'+'ipt type="text/javascript" src="'+mIESCR+'"></scr'+'ipt>');	
	</script>		
<![endif]-->

<script type="text/javascript">

var clock12trbyopntzug;
var prefs = new _IG_Prefs();
var IMAGES_BASE = 'http://cdn.labpixies.com/campaigns/clock/images/';

var pageTracker;
var eventTracker;

function Clock() {

	var MONTH_NAMES=new Array('JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC');
    var DAY_NAMES=new Array('SUN','MON','TUE','WED','THU','FRI','SAT');
    var addZero = function(x) {return(x<0||x>9?"":"0")+x}
	
	var canvas, ctx, backEl, dayEl, dateEl, secondsEl;

	var colorIndex = 0;
	var prevHour = -1;
	var waitRound = 0;
			
	this.init = function() {
		
		secondsEl = document.getElementById("seconds1");
	    backEl = document.getElementById("back1");
	    dayEl = document.getElementById("day1");
	    dateEl = document.getElementById("date1");
	    canvas = document.getElementById("cv");
    	ctx = canvas.getContext("2d");
    	
    	this.setLayout();
		this.loadSettings();
		this.setInterface();
		this.set_change_skin_buttons();


		pageTracker = _gat._getTracker("UA-345375-1");
		pageTracker._initData();
		eventTracker = pageTracker._createEventTracker('Clock'); 

		setInterval('clock12trbyopntzug.repaintClock();',1000);
		onresize=function(){clock12trbyopntzug.setLayout()};	
	}
	
	this.saveSettings = function() {
	
		var setStr = ""+colorIndex;		
		prefs.set("skin_id",setStr);
	}
	
	this.loadSettings = function() {		
		var setStr = prefs.getString('skin_id');
		try {
			colorIndex = parseInt(setStr,10);
			if (!colorIndex)
				colorIndex = 0;
		} catch (e) {colorIndex = 0;}
	}
	
	this.setSkin = function(skinID) {
	
		colorIndex = skinID;
		this.saveSettings();
		this.setInterface();
		eventTracker._trackEvent('ChangeSkin');
	}
	
	this.setInterface = function() {		
		backEl.src = _IG_GetImageUrl(IMAGES_BASE+colorIndex+"_clock.jpg");
		secondsEl.src = _IG_GetImageUrl(IMAGES_BASE+colorIndex+"_seconds.gif");
		waitRound = 0;
		
		dayEl.style.color = clocksColors[colorIndex][0];
		dateEl.style.color = clocksColors[colorIndex][0];		
		this.setDate();		
	}
	
	this.changeColor = function(dir) {
		
		if (dir == 1) {
			colorIndex = (colorIndex + 1) % numOfDesigns;
		}
		else { 
			colorIndex = (colorIndex + numOfDesigns -1) % numOfDesigns;
		}		
		this.saveSettings();
		this.setInterface();
	}
	
	this.setDate = function() {
		
		var now = new Date();
		
		dayEl.innerHTML = DAY_NAMES[now.getDay()];
		dateEl.innerHTML = MONTH_NAMES[now.getMonth()] + " " + addZero(now.getDate());		
	}
	
	this.draw = function() {
			
		
		ctx.save();
		
		var now = new Date();
		var sec = now.getSeconds();
		var min = now.getMinutes();
		var hr  = now.getHours();
		
		if (hr<=12) {
			hr = (hr-12);
		}

		//set the date
		if (hr != prevHour) {
			this.setDate();
			prevHour = hr;
		}
		
		
		ctx.strokeStyle = clocksColors[colorIndex][1];
		ctx.fillStyle = clocksColors[colorIndex][1];
		ctx.rotate(-(Math.PI/2));

		// write Hours
		ctx.save();
		ctx.rotate(hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec);
		ctx.lineWidth = 5;
		ctx.beginPath();
		ctx.moveTo(11,0);
		ctx.lineTo(50,0);
		ctx.stroke();
		ctx.restore();

		// write Minutes
		ctx.save();
		ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec);
		ctx.lineWidth = 4;
		ctx.beginPath();
		ctx.moveTo(11,0);
		ctx.lineTo(75,0);
		ctx.stroke();
		ctx.restore();
		  
		// Write seconds
		ctx.save();
		ctx.rotate(sec * Math.PI/30);
		ctx.beginPath();
		
		if(jQuery.browser.msie) {
			if (waitRound > 2) {
				ctx.drawImage(secondsEl,77,0);
			}
			else {
				waitRound++;
			}
		} 
		else {
			var radgrad = ctx.createRadialGradient(88,0,12,88,0,.5);
			radgrad.addColorStop(0.2, clocksColors[colorIndex][1]);
			radgrad.addColorStop(1, '#ffffff');
			ctx.fillStyle = radgrad;
			ctx.arc(85, 0, 6, 0, Math.PI*2, false);
			//ctx.arc(0, 0, 6, 0, Math.PI*2, false);
			ctx.fill();
		}
	
		
		ctx.restore();
		ctx.restore();
	}
	
	this.repaintClock = function() {

	    ctx.save();
	    ctx.clearRect(0,0,200,196);
	    ctx.translate(101,97);
	    clock12trbyopntzug.draw();
	    ctx.restore();
    }
	
	this.setLayout = function() {		
 		var t = $lp("#anchor1").offset().top;
	    var l = $lp("#anchor1").offset().left;
	
		// NO NEED WITH JQUERY!!!
		//if(jQuery.browser.safari)
		 //   t = t-150;
		    
		backEl.style.visibility = "visible";
    	
	    dayEl.style.top = t+116;
	    dayEl.style.left = l+33;
	    dayEl.style.visibility = "visible";
    	
	    dateEl.style.top = t+116;
	    dateEl.style.left = l+134;
	    dateEl.style.visibility = "visible";
    	
	    canvas.style.top = t+24;
	    canvas.style.left = l+9;
	    canvas.style.visibility = "visible";
	}

	this.set_change_skin_buttons = function()
	{		
		var buttons_sprite = _IG_GetImageUrl(IMAGES_BASE+'buttons_sprite.png');
		$lp('#skin_prev').css('background-image','url('+buttons_sprite+')');
		$lp('#skin_prev').click(function() {
				clock12trbyopntzug.changeColor(-1)
		});

		$lp('#skin_next').css('background-image','url('+buttons_sprite+')');
		$lp('#skin_next').click(function() {
				clock12trbyopntzug.changeColor(1)
		});
		
		$lp('.skin_btn').hover(
			function()
			{					
				var new_position = $lp(this).css('backgroundPosition').split(' ');						
				$lp(this).css('background-position', new_position[0]+' 18px');
			},
			function()
			{
				var new_position = $lp(this).css('backgroundPosition').split(' ');						
				$lp(this).css('background-position', new_position[0]+' 0px');
			}
		);

		$lp('#divider').attr('src',_IG_GetImageUrl(IMAGES_BASE+'bottom_divider.gif'));
	}
}

function loadClock() {
	
	var c = document.getElementById("cv");
	if (c.getContext) {	
		clock12trbyopntzug = new Clock();
		clock12trbyopntzug.init();
	} else {		
		setTimeout('loadClock();',200);
	}
}

</script>

	<center>
 	<div id="menu_div" style='height:23px;'></div>
	<table border="0" cellpadding="0" width="220" height="263" cellspacing="0">
		<tr height="230" style="height:230px;">
			<td id="anchor1" width="220" height="230" colspan="2">
				<img id="seconds1" border="0" style="border-style:none; visibility:hidden; position:absolute; top:0px; left:0px;" width="12" height="12" />
				<img id="back1" border="0" style="border-style:none; visibility:hidden;" width="220" height="230" />
				<div style="border-style:none; text-align: center; visibility:hidden; font-family: Arial,Verdana, sans-serif; font-weight: bold; font-size:12px; width:54px; overflow:hidden; position:absolute; top:0px; left:0px;" id="day1">&nbsp;</div>
				<div style="border-style:none; text-align: center; visibility:hidden; font-family: Arial,Verdana, sans-serif; font-weight: bold; font-size:12px; width:54px; overflow:hidden; position:absolute; top:0px; left:0px;" id="date1">&nbsp;</div>
				<canvas id="cv" style="border-style:none; visibility:hidden; position:absolute; top:0px; left:0px;"  width="200" height="196"></canvas>
			</td>
		</tr>
	
		<tr style="height:20px;">
			<td width="220" colspan="2" align="center">
				<table border="0" cellpadding="0" cellspacing="0">
					<tr>
						<td width="18"><div class="skin_btn" id="skin_prev" style="cursor:pointer;background-position: 0px 0px;width:18px;height:18px;"></div></td>
						<td align="center" style="padding-left:5px;padding-right:5px;font-family: Verdana;font-size: 11px; font-weight:bold;color: #B0B0B0">__MSG_change_skin__</td>
						<td width="18"><div class="skin_btn" id="skin_next" style="cursor:pointer;background-position: 18px 0px;width:18px;height:18px;"></div></td>
					</tr>
				</table>
			</td>
		</tr>

		<tr height="13" style="height:13px;">
			<td colspan="2" height="13" valign="bottom">
				<img id="divider" width="220" height="9" alt="Divider" />
			</td>
		</tr>
	</table>
	
	<div style="width:220px;">
		<!-- PUT THIS TAG IN DESIRED LOCATION OF SLOT clock_txt -->
		<script type="text/javascript">
		  GA_googleFillSlot("clock_txt");
		</script>
		<!-- END OF TAG FOR SLOT clock_txt -->
	</div>
	</center>
	
	<!-- init module -->
	<script type="text/javascript" >
		_IG_RegisterOnloadHandler(function() {			
				loadClock();
				lpgadgets.lp.menu.deploy("menu_div",{"textDirection":"__MSG_tdDir__","lang":"__MSG_lang__"});
				
			}
		);
	 _IG_Analytics("UA-345375-1", "/clock");
	 
	 </script>
]]>
</Content>
</Module>