<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs author="LabPixies" author_email="labpixie.gadgets+clock+201101111@gmail.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="300" 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"
      language_direction="rtl" />
    <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="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;

  }
  body {
    direction: ltr;
  }

  .style1{font-size:1px;}

</style>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

<script type="text/javascript">
  var $lp=jQuery.noConflict();
  var _gadgetID=27;

  var mCLOCK = gadgets.io.getProxyUrl("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 = gadgets.io.getProxyUrl("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 gadgets.Prefs();
var IMAGES_BASE = 'http://cdn.labpixies.com/campaigns/clock/images/';

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();

    setInterval('clock12trbyopntzug.repaintClock();',1000);
    onresize=function(){clock12trbyopntzug.setLayout()};
  }

  this.saveSettings = function() {

    var setStr = ""+colorIndex;
    prefs.set("skin_id",setStr);
  }

  this.loadSettings = function() {
    var setStr = lpgadgets.lp.utils.unescapeString(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();
  }

  this.setInterface = function() {
    backEl.src = gadgets.io.getProxyUrl(IMAGES_BASE+colorIndex+"_clock.jpg");
    secondsEl.src = gadgets.io.getProxyUrl(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 = gadgets.io.getProxyUrl(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',gadgets.io.getProxyUrl(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 style='height:10px; font-size:1px;'></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>

  </center>
  <!-- LP footer -->
  <div>
    <script type="text/javascript">
      var mMENU = gadgets.io.getProxyUrl("http://cdn.labpixies.com/infra/js/lp_footer.js");
      document.write('<scr'+'ipt type="text/javascript" src="'+mMENU+'"></scr'+'ipt>');
    </script>
  </div>


  <!-- init module -->
  <script type="text/javascript" >
    gadgets.util.registerOnLoadHandler(function() {
        loadClock();
      }
    );

   </script>

]]>
  </Content>
</Module>

