<?xml version="1.0" encoding="UTF-8"?>
<Module>
<!-- 
	My Notes
	Design & Code: LabPixies
	All subsequent code and resources used are proprietary of LabPixies unless directly stated otherwise.
	Copyright (C) 2008 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.
-->
	<ModulePrefs author="LabPixies"
		author_email="info@labpixies.com"
		description="__MSG_description__"
		screenshot="http://www.labpixies.com/campaigns/notes/images/screenshot.png"
		title="__MSG_title__"
		title_url="http://www.labpixies.com"
		category="tools"             
		thumbnail="http://www.labpixies.com/campaigns/notes/images/thumbnail.jpg" height="290" render_inline="never">

    <Locale messages="http://www.labpixies.com/campaigns/notes/i19/all_all.xml"/>
	
	<Locale lang="ar" messages="http://www.labpixies.com/campaigns/notes/i19/ar_all.xml"  language_direction="rtl"/>
	<Locale lang="bg" messages="http://www.labpixies.com/campaigns/notes/i19/bg_all.xml"/>
	<Locale lang="ca" messages="http://www.labpixies.com/campaigns/notes/i19/ca_all.xml"/>
	<Locale lang="cs" messages="http://www.labpixies.com/campaigns/notes/i19/cs_all.xml"/>
	<Locale lang="da" messages="http://www.labpixies.com/campaigns/notes/i19/da_all.xml"/>
	<Locale lang="el" messages="http://www.labpixies.com/campaigns/notes/i19/el_all.xml"/>
	<Locale lang="et" messages="http://www.labpixies.com/campaigns/notes/i19/et_all.xml"/>
	<Locale lang="fi" messages="http://www.labpixies.com/campaigns/notes/i19/fi_all.xml"/>
	<Locale lang="fil" messages="http://www.labpixies.com/campaigns/notes/i19/tl_all.xml"/>
	<Locale lang="fr" messages="http://www.labpixies.com/campaigns/notes/i19/fr_all.xml"/>
	<Locale lang="hi" messages="http://www.labpixies.com/campaigns/notes/i19/hi_all.xml"/>
	<Locale lang="hr" messages="http://www.labpixies.com/campaigns/notes/i19/hr_all.xml"/>
	<Locale lang="hu" messages="http://www.labpixies.com/campaigns/notes/i19/hu_all.xml"/>
	<Locale lang="id" messages="http://www.labpixies.com/campaigns/notes/i19/id_all.xml"/>
	<Locale lang="is" messages="http://www.labpixies.com/campaigns/notes/i19/is_all.xml"/>
	<Locale lang="ja" messages="http://www.labpixies.com/campaigns/notes/i19/ja_all.xml"/>
	<Locale lang="ko" messages="http://www.labpixies.com/campaigns/notes/i19/ko_all.xml"/>
	<Locale lang="lt" messages="http://www.labpixies.com/campaigns/notes/i19/lt_all.xml"/>
	<Locale lang="lv" messages="http://www.labpixies.com/campaigns/notes/i19/lv_all.xml"/>
	<Locale lang="ms" messages="http://www.labpixies.com/campaigns/notes/i19/ms_all.xml"/>
	<Locale lang="no" messages="http://www.labpixies.com/campaigns/notes/i19/no_all.xml"/>
	<Locale lang="pl" messages="http://www.labpixies.com/campaigns/notes/i19/pl_all.xml"/>
	<Locale lang="pt-PT" messages="http://www.labpixies.com/campaigns/notes/i19/pt_pt.xml"/>
	<Locale lang="ro" messages="http://www.labpixies.com/campaigns/notes/i19/ro_all.xml"/>
	<Locale lang="sk" messages="http://www.labpixies.com/campaigns/notes/i19/sk_all.xml"/>
	<Locale lang="sl" messages="http://www.labpixies.com/campaigns/notes/i19/sl_all.xml"/>
	<Locale lang="sr" messages="http://www.labpixies.com/campaigns/notes/i19/sr_all.xml"/>
	<Locale lang="sv" messages="http://www.labpixies.com/campaigns/notes/i19/sv_all.xml"/>
	<Locale lang="th" messages="http://www.labpixies.com/campaigns/notes/i19/th_all.xml"/>
	<Locale lang="tl" messages="http://www.labpixies.com/campaigns/notes/i19/tl_all.xml"/>
	<Locale lang="tr" messages="http://www.labpixies.com/campaigns/notes/i19/tr_all.xml"/>
	<Locale lang="uk" messages="http://www.labpixies.com/campaigns/notes/i19/uk_all.xml"/>
	<Locale lang="vi" messages="http://www.labpixies.com/campaigns/notes/i19/vi_all.xml"/>
	<Locale lang="zh-CN" messages="http://www.labpixies.com/campaigns/notes/i19/zh_cn_all.xml"/>
	<Locale lang="zh-TW" messages="http://www.labpixies.com/campaigns/notes/i19/zh_tw_all.xml"/>		
	<Locale lang="iw" messages="http://www.labpixies.com/campaigns/notes/i19/iw_all.xml"  language_direction="rtl"/>
	<Locale lang="es" messages="http://www.labpixies.com/campaigns/notes/i19/es_all.xml"/>
	<Locale lang="de" messages="http://www.labpixies.com/campaigns/notes/i19/de_all.xml"/>
	<Locale lang="ru" messages="http://www.labpixies.com/campaigns/notes/i19/ru_all.xml"/>
	<Locale lang="nl" messages="http://www.labpixies.com/campaigns/notes/i19/nl_all.xml"/>
	<Locale lang="it" messages="http://www.labpixies.com/campaigns/notes/i19/it_all.xml"/>
	<Locale lang="pt-BR" messages="http://www.labpixies.com/campaigns/notes/i19/pt_all.xml"/>
		
  <Require feature="dynamic-height"/> 
  <Require feature="setprefs"/>
  <Require feature="views" />
  <Require feature="analytics"/>
   
	</ModulePrefs>

	<UserPref name="lp_note_0"  default_value="none" datatype="hidden" />
	<UserPref name="lp_note_1"  default_value="none" datatype="hidden" />
	<UserPref name="lp_note_2"  default_value="none" datatype="hidden" />
	<UserPref name="lp_note_3"  default_value="none" datatype="hidden" />
	<UserPref name="lp_note_4"  default_value="none" datatype="hidden" />
	<UserPref name="lp_note_5"  default_value="none" datatype="hidden" />
	<UserPref name="lp_note_6"  default_value="none" datatype="hidden" />

	<UserPref name="last_note" datatype="hidden" default_value="" />
	
  <UserPref name="k1" datatype="hidden" default_value="" />
	<UserPref name="k2" datatype="hidden" default_value="" />
	<UserPref name="k3" datatype="hidden" default_value="" />
	
<Content type="html">
      <![CDATA[
	  
<title>My Notes</title>
<style type="text/css">
body, html {
	margin: 0;
	padding: 0;
}

body{direction:ltr;}

.style1{font-size: 1px;line-height:1px;}

.style3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #595959;
}


.style5 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #474747;
}

.titleBoxStyle{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	background-color:#bbf7ff;
	width:156px;
	height:18px;
	overflow:hidden;
	border-style:none;
	letter-spacing:0;
	font-weight:bold;
	line-height:16px;
}

.textBoxStyle{
	font-size: 13px;
	overflow:auto;
	word-wrap: break-word;
	
	font-family: Arial;
	width:240px;
	height:122px;
	letter-spacing:0;
	line-height:17px;
	border-style:none;
	background-color:#bbf7ff;
  position: relative;
  
  left: __MSG_textShift__px;
}
		
</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", "my_notes_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=56;
	
    //google event tracking code
    var lp_pageTracker = _gat._getTracker("UA-345375-1");
    lp_pageTracker._initData();

    function lp_trackEvent(eventName,eventLable,eventVar) {

        try {
            lp_pageTracker._trackEvent("Notes - V1",eventName,eventLable, eventVar);
        } catch(ee) {}

    }

	
	var IMAGE_BASE = "http://cdn.labpixies.com/campaigns/notes/images/"; 
	var MAX_LEN = 1300;

	var code_temp = "";
  
	//colors - we've got 7
	var colorArray 		= new Array ("#e8e8e8","#d8fecf","#fff28f","#ffd6d0","#ffd2f9","#d7d1ff","#bbf7ff");
	var curlsArray 		= new Array ("92px 0px","184px 0px","276px 0px","368px 0px","460px 0px","552px 0px","0px 0px");
	var current_color 	= 0;
		
	//notes
	var titlesArray 	= new Array(7);
	var textsArray 	 	= new Array(7);
	var notesColors		= new Array(7);
	
	//save on google
	var prefs = null;
	
	//init values
	notesColors[0]	 	= 6;
	current_note 		= 0;
	num_of_notes 		= 0;
	
	//select text on load 
	function checkTitle(){
		if(_gel("titleBox").value=="__MSG_editTitle__"){
			_gel("titleBox").select();		
		}
	}
	
	function checkText(){
		if(_gel("textBox").value=="__MSG_editText__"){
			_gel("textBox").select();		
		}
	}
	
	function load_images()
	{
		$lp('.transparent').attr('src',_IG_GetImageUrl(IMAGE_BASE+'transparent.gif'));
	
		$lp('#prev_note').attr('src',_IG_GetImageUrl(IMAGE_BASE+'prev_note.gif'));
		$lp('#next_note').attr('src',_IG_GetImageUrl(IMAGE_BASE+'next_note.gif'));
		
		$lp('#corner_LT').attr('background',_IG_GetImageUrl(IMAGE_BASE+'corners.gif'));
		$lp('#corner_LB').attr('background',_IG_GetImageUrl(IMAGE_BASE+'corners.gif'));		
		$lp('#corner_RB').attr('background',_IG_GetImageUrl(IMAGE_BASE+'corners.gif'));				
		$lp('#curlImage').attr('background',_IG_GetImageUrl(IMAGE_BASE+'curls.jpg'));
	}

	var str_temp_text = "";
	var str_temp_title = "";
	function saveText(){
		
		if((str_temp_title!=_gel("titleBox").value) || (str_temp_text!=_gel("textBox").value)){
			//save note to local vars
			titlesArray[current_note] 	= _gel("titleBox").value;
			textsArray[current_note] 	= _gel("textBox").value;
			
			str_temp_title = _gel("titleBox").value;
			str_temp_text  = _gel("textBox").value;
			
			//save to cookie (text+color)
			saveNote(current_note);
		}
	}

	function prevButton(){
		if(num_of_notes>1){
			if(current_note>0){
				current_note--;
				showNote(current_note);
			}
		}
	}
	
	function nextButton(){
		if(num_of_notes>1){
			if(current_note<(num_of_notes-1)){
				current_note++;
				showNote(current_note);
			}
		}
	}
	
	//load a note by num
	function showNote(num){
	
		//text & title
		_gel("titleBox").value=titlesArray[num];
		_gel("textBox").value=textsArray[num];
		
		//color
		colorSelect(notesColors[num]);
		
		//update num of notes
		_gel("num_of_notes").innerHTML = (num+1) + "&nbsp;__MSG_of__&nbsp;" + num_of_notes;
	}
	
	function newButton(){
		
		//check array size
		if(num_of_notes==7){
			alert("__MSG_oops__");
			return;
		}
		
		if(getDataLength()+50 > MAX_LEN){
			alert("__MSG_err_new__");
			return;
		}
		
		//create a new note
		current_note=num_of_notes;
		num_of_notes++;
		
		//reset title & text
		_gel("titleBox").value="__MSG_editTitle__";
		_gel("textBox").value="__MSG_editText__";
		
		//save text
		titlesArray[current_note] 	= _gel("titleBox").value;
		textsArray[current_note] 	= _gel("textBox").value;
		
		str_temp_title = _gel("titleBox").value;
		str_temp_text  = _gel("textBox").value;
		
		//color - use default blue + save to cookie
		colorSelect( (current_color+1)%7 ) ;
		
		//save
		saveNote(current_note);
		
		//update num of notes
		_gel("num_of_notes").innerHTML = (current_note+1) + "&nbsp;__MSG_of__&nbsp;" + num_of_notes;
		updateStorageDetails();
		lp_trackEvent('MyNotes','CreateNote');
	}
	
	var flag_is_color_screen_open = 0;
	function colorButton(){
		
		if(flag_is_color_screen_open==0){
			_gel("colorTable").style.display = "";
			
			var tp = $lp("#color_lable").offset().top;
			var lf = $lp("#color_lable").offset().left;
			tp = tp - $lp("#colorTable").height();
			$lp("#colorTable").css({"top":(tp+"px"),"left":(lf+"px")});
			flag_is_color_screen_open=1;
		}
		else{
			_gel("colorTable").style.display = "none";
			flag_is_color_screen_open=0;
		}
	}
		
	function deleteButton(){
		
		var r=confirm("__MSG_sure__ " + (current_note+1) + "?");
		if (r==false){
			return;
		}
			
		//delete the only 1 
		if(num_of_notes==1){
			//reset title & text
			_gel("titleBox").value="__MSG_editTitle__";
			_gel("textBox").value="__MSG_editText__";
			
			//color - use default blue
			colorSelect(6);
			
			//save text
			saveText();
		}
		else{
			//not the last one
			if((current_note+1)<num_of_notes){
				
				for(var i=0;i<(num_of_notes-(current_note+1));i++){
					titlesArray [current_note+i] = titlesArray [current_note+1+i];
					textsArray 	[current_note+i] = textsArray  [current_note+1+i];
					notesColors	[current_note+i] = notesColors [current_note+1+i];
					saveNote(current_note+i);
				}
				
				prefs.set("lp_note_"+(num_of_notes-1), "none");
								
				//update num of notes
				num_of_notes--;
			}
			else{//last one deleted
				if((current_note+1)==num_of_notes){
					
					prefs.set("lp_note_"+(num_of_notes-1), "none");
					
					//update num of notes
					num_of_notes--;
					current_note--;
				}
			}
		}
		
		lp_trackEvent('MyNotes','DeleteNote');
		
		//refresh view
		showNote(current_note);
		updateStorageDetails();
		
	}
	
	function colorSelectSave(num){
		colorSelect(num);
		saveNote(current_note);
		lp_trackEvent('MyNotes','SetColor');
	}
	
	// colors between 1-8
	function colorSelect(num){
		
		//close colors menu
		_gel("colorTable").style.display = "none";
		flag_is_color_screen_open=0;
		
		//update color
		current_color = num;
		_gel("titleBox").style.backgroundColor=colorArray[current_color];
		_gel("textBox").style.backgroundColor=colorArray[current_color];
		_gel("space_used_g").style.backgroundColor=colorArray[current_color];
		_gel("mainTable").style.backgroundColor=colorArray[current_color];
		_gel("curlImage").style.backgroundPosition=curlsArray[current_color];
		
		var top = (7-current_color)*8;
		//corners
		_gel("corner_LT").style.backgroundPosition="0px " + top + "px";
		_gel("corner_LB").style.backgroundPosition="-12px " + top + "px";
		_gel("corner_RB").style.backgroundPosition="-24px " + top + "px";
		
		//save changes
		notesColors[current_note] = current_color;
		
	}
	
	function saveNote(num){
		
		if(getDataLength() > MAX_LEN)
			return;
			
		if (num < num_of_notes){
			var str = titlesArray[num] + "|udi|" + textsArray[num] + "|udi|" + notesColors[num];
			prefs.set("lp_note_"+num, str);
		}
	}
	
	
	function initModule(){
	
		prefs = new _IG_Prefs();	

		num_of_notes = 0;
		var str = prefs.getString("lp_note_"+num_of_notes);
		//load last note viewd
		while (str && str != "none" && (str.split("|udi|").length==3) && num_of_notes<7) {

			var str_array = str.split("|udi|");
			titlesArray[num_of_notes] = str_array[0];
			textsArray[num_of_notes] = str_array[1];
			notesColors[num_of_notes] = str_array[2];
			num_of_notes++;
			str = prefs.getString("lp_note_"+num_of_notes);
		}
		
		if(num_of_notes==0){
			newButton();
		}		
		showNote(0);
		
		updateStorageDetails();
		load_images();
		$lp("#titleBox").keyup(function() {checkSpaceLimit("titleBox");});
		$lp("#textBox").keyup(function() {checkSpaceLimit("textBox");});
		$lp("#titleBox").focus(function() {lastApprovedText = $lp(this).val();});
		$lp("#textBox").focus(function() {lastApprovedText = $lp(this).val();});
		
	    _IG_AdjustIFrameHeight();
	}
	
	function json_esc(a) {
	    return window.encodeURIComponent ? encodeURIComponent(a) : escape(a);
	}
	
	function getDataLength() {
	
		var tmp = "";
		for (i=0;i<num_of_notes; i++) {
			if (i==current_note) continue;
			tmp += titlesArray[i] + "|udi|" + textsArray[i] + "|udi|" + notesColors[i];
		}
		
		tmp+= $lp('#titleBox').val() + "|udi|" + $lp('#textBox').val() + "|udi|" + notesColors[current_note];
		var ln = json_esc(tmp).length;		
		return ln;
	}
	
	var lastApprovedText = "";
	function checkSpaceLimit(textid) {
	
		if (!updateStorageDetails()) {
			$lp('#'+textid).val(lastApprovedText);
			return false;
		} 
		
		lastApprovedText = $lp('#'+textid).val();		
		return true;
	}
	
	function updateStorageDetails() {
		
		var ln = getDataLength();		
		var per = Math.floor((ln*100)/MAX_LEN);		
		$lp("#space_precentage").html("&nbsp;" + per + "%");
		$lp("#space_used_g").css("width",Math.floor(per*0.5)+"px");
		
		if (ln > MAX_LEN) {
			
			$lp('#space_full').show();
			$lp('#space_gag').hide();
			return false;
		} 
		
		$lp('#space_full').hide();
		$lp('#space_gag').show();
		return true;
	}
</script>
<center>
<div style="height:10px; font-size:1px;"></div>
<table id="mainTable" width="260" border="0" cellpadding="0" cellspacing="0">
	<tr valign="top">
		<td width="12">
			<table width="12" height="182" border="0" cellpadding="0" cellspacing="0">
				<tr><td valign="top" class="style1" bgcolor="#ffffff" valign="top" height="8" width="12" id="corner_LT" >&nbsp;</td></tr>
				<tr><td class="style1">&nbsp;</td></tr>
				<tr><td valign="top" class="style1" bgcolor="#ffffff" valign="bottom" height="8" width="12" id="corner_LB" >&nbsp;</td></tr>
			</table>
		</td>
		<td width="248" height="182">
			<table width="248" height="182" border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td width="248" height="36">
						<table width="248" height="36" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td dir="__MSG_tdDir__" width="156" height="36" align="left" valign="middle"><input type="text" size="18" maxlength="18" class="titleBoxStyle" id="titleBox" onclick="checkTitle()" onblur="saveText()" onmouseout="saveText()" value="__MSG_load__" /></td>
								<td width="92" height="36" id="curlImage"  align="right" valign="top"><img id="prev_note" onclick="prevButton();" style="cursor:pointer;"  width="17" height="17" /><img id="next_note" onclick="nextButton();" style="cursor:pointer;" width="17" height="17" /></td>
							</tr>
						</table>
					</td>
				</tr>
				<tr>
					<td width="244">
						<table width="244" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td dir="__MSG_tdDir__" width="240" valign="top"><textarea class="textBoxStyle" id="textBox" onclick="checkText()" onblur="saveText()" onmouseout="saveText();">__MSG_load__</textarea></td>
								<td width="4"  class="style1">&nbsp;</td>
							</tr>
						</table>
					</td>							
				</tr>
				<tr>
					<td width="248" height="20">
						<table width="248" border="0" cellpadding="0" cellspacing="0">
						  <tr>
							<td width="236"> 
							  <table dir="__MSG_tdDir__" width="236" border="0" cellpadding="0" cellspacing="0">
								  <tr>
									  <td width="191" height="20" class="style3" valign="top" align="__MSG_tdAlign__" ><span onclick="newButton()" style="cursor:pointer;" onmouseout="this.style.color='#595959';" onmouseover="this.style.color='#ce000d';">__MSG_new__</span><span style="cursor:default;" class="style3">&nbsp;&nbsp;&nbsp;&nbsp;</span><span id="color_lable" onmouseout="this.style.color='#595959';" onmouseover="this.style.color='#ce000d';" onclick="colorButton()" style="cursor:pointer;">__MSG_color__</span><span style="cursor:default;" class="style3">&nbsp;&nbsp;&nbsp;&nbsp;</span><span onmouseout="this.style.color='#595959';" onmouseover="this.style.color='#ce000d';" onclick="window.print();lp_trackEvent('MyNotes','PrintNotes');" style="cursor:pointer;">__MSG_print__</span><span style="cursor:default;" class="style3">&nbsp;&nbsp;&nbsp;&nbsp;</span><span onmouseout="this.style.color='#595959';" onmouseover="this.style.color='#ce000d';" onclick="deleteButton()" style="cursor:pointer;">__MSG_delete__</span></td>
									  <td  width="45"  height="20" class="style3" valign="top" align="center" id="num_of_notes" style="cursor:default;">1 __MSG_of__ 1</td>
								  </tr>
							  </table>
							</td>
							<td width="12"> 
							  <table dir="__MSG_tdDir__" width="12" border="0" cellpadding="0" cellspacing="0">
								  <tr>
									  <td>
										  <table  border="0" height="20" cellpadding="0" cellspacing="0">
											  <tr height="12"><td height="12" class="style1">&nbsp;</td></tr>
											  <tr height="8"><td valign="top" class="style1" bgcolor="#ffffff" valign="bottom" height="8" width="12" id="corner_RB" >&nbsp;</td></tr>
										  </table>
									  </td>
								  </tr>
							  </table>
							</td>
						  </tr>
						</table>
					</td>
				</tr>
			</table>
		</td>   
	</tr>
</table>

<div style="width:260px; height:14px; text-align:right; font:10px Arial; color:#8c8c8c; margin:7px 0px; clear:both;">
	<div id="space_gag" style="clear:both;">
		<span style="float:right;" id="space_precentage"></span>
			<table style="border:1px solid #8c8c8c; float:right;" cellpadding="0" cellspacing="0">
				<tr><td>
					<div style="width:50px; height:10px; overflow:hidden;">
						<div id="space_used_g" style="height:10px; width:0px; line-height:10px; float:left;"></div>
					</div>
				</td></tr>
			</table>
		</span>
		<span style="float:right;">__MSG_space_used__&nbsp;</span>
	</div>
	<div id="space_full" style="color:#680011; display:none; direction:__BIDI_DIR__;">__MSG_space_full__</div>
</div>

<div style="width:100%">
	<!-- PUT THIS TAG IN DESIRED LOCATION OF SLOT my_notes_txt -->
	<script type="text/javascript">
	  GA_googleFillSlot("my_notes_txt");
	</script>
	<!-- END OF TAG FOR SLOT my_notes_txt -->
</div>

<table  style="display:none; position:absolute; z-index:10;" id="colorTable" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" border="0" width="42" height="78">
	<tr>
		<td width="1"  height="78" bgcolor="#FFFFFF" class="style1">&nbsp;</td>
		<td width="40" height="78" bgcolor="#FFFFFF">
			<table cellpadding="0" cellspacing="0" border="0" width="40" height="78">
				<tr><td height="1" bgcolor="#FFFFFF" class="style1"><img class="transparent" width="40" height="1"  /></td></tr>
				<tr><td height="10" bgcolor="#e8e8e8"><img class="transparent" width="40" height="10" style="cursor:pointer;" onclick="colorSelectSave(0);" /></td></tr>
				<tr><td height="1" bgcolor="#FFFFFF" class="style1"><img class="transparent" width="40" height="1" /></td></tr>
				<tr><td height="10" bgcolor="#d8fecf"><img class="transparent" width="40" height="10" style="cursor:pointer;" onclick="colorSelectSave(1);" /></td></tr>
				<tr><td height="1" bgcolor="#FFFFFF" class="style1"><img class="transparent" width="40" height="1"/></td></tr>
				<tr><td height="10" bgcolor="#fff28f"><img class="transparent" width="40" height="10" style="cursor:pointer;" onclick="colorSelectSave(2);" /></td></tr>
				<tr><td height="1" bgcolor="#FFFFFF" class="style1"><img class="transparent" width="40" height="1" /></td></tr>
				<tr><td height="10" bgcolor="#ffd6d0"><img class="transparent" width="40" height="10" style="cursor:pointer;" onclick="colorSelectSave(3);" /></td></tr>
				<tr><td height="1" bgcolor="#FFFFFF" class="style1"><img class="transparent" width="40" height="1" /></td></tr>
				<tr><td height="10" bgcolor="#ffd2f9"><img class="transparent" width="40" height="10" style="cursor:pointer;" onclick="colorSelectSave(4);" /></td></tr>
				<tr><td height="1" bgcolor="#FFFFFF" class="style1"><img class="transparent" width="40" height="1" /></td></tr>
				<tr><td height="10" bgcolor="#d7d1ff"><img class="transparent" width="40" height="10" style="cursor:pointer;" onclick="colorSelectSave(5);" /></td></tr>
				<tr><td height="1" bgcolor="#FFFFFF" class="style1"><img class="transparent" width="40" height="1" /></td></tr>
				<tr><td height="10" bgcolor="#bbf7ff"><img class="transparent" width="40" height="10" style="cursor:pointer;" onclick="colorSelectSave(6);" /></td></tr>
				<tr><td height="1" bgcolor="#FFFFFF" class="style1"><img class="transparent" width="40" height="1" /></td></tr>
			</table>
		</td>
		<td width="1" height="78" bgcolor="#FFFFFF" class="style1">&nbsp;</td>
	</tr>
</table>
</center>
<div>
	<script type="text/javascript">
    var mMENU = _IG_GetCachedUrl("http://cdn.labpixies.com/infra/js/lp_footer.js");
    document.write('<scr'+'ipt type="text/javascript" src="'+mMENU+'"></scr'+'ipt>');
  </script>
</div>
<script type="text/javascript">
	_IG_RegisterOnloadHandler(function () {
		initModule();
	});
</script>


<!-- init google analytics -->
<script type="text/javascript">
	_IG_Analytics("UA-345375-1", "/mynotes");
</script>
<iframe width="1" height="1" style="width:1px; height:1px; overflow:hidden; position:absolute; visibility:hidden;" src="http://static.labpixies.com/campaigns/notes/analytics.html"></iframe>
]]> 
</Content>





<Content type="html" view="home,profile">
<![CDATA[

<title>My Notes</title>
<style type="text/css">
  body, html, * {
  	margin: 0px;
  	padding: 0px;
  }

  .upper_tools {
    font-family:Arial;
    font-size:11px;
    font-weight: Regular;
    color: #919191;
    height:15px;
    line-height:15px;
  }
  
  .bottom_tools {
    font-family:Arial; 
    font-size:10px; 
    font-weight:regular; 
    color:#626262;
  }
  
  #see_all, #new_note{
    color:#919191;
    font-family:Arial;
    font-size:11px;
    font-weight:Regular;
    cursor:pointer;
    text-align:center;
    float:left;
    height:15px;
    line-height:15px;
  }
  #see_all_left, #new_note_left{
    float:left;
    padding-left:5px;
  }
  #see_all_right, #new_note_right {
    float:left;
    width:5px;
  }

#noteTop, #noteBottom {
  line-height: 1px;
  overflow: hidden;
}


</style>

<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>
<!-- 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", "my_notes_txt");
</script>
<script type="text/javascript">
  GA_googleFetchAds();
</script>
<!-- END OF TAG FOR head SECTION -->

<!--[if IE 6]> 
	<script type="text/javascript"> 
		try {//IE fix, causes it to automatically cache background image 
			document.execCommand("BackgroundImageCache", false, true); 
		} catch(e){ } 
	</script> 
<![endif]-->

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

  //google event tracking code
  var lp_pageTracker = _gat._getTracker("UA-345375-1");
  lp_pageTracker._initData();

  function lp_trackEvent(eventName,eventLable,eventVar) {

    try {
        lp_pageTracker._trackEvent("My Notes - Home",eventName,eventLable, eventVar);
    } catch(ee) {}

  }
  
  mSIDE = "http://www.labpixies.com/infra/js/lp_data.js";
  document.write('<scr'+'ipt type="text/javascript" src="'+_IG_GetCachedUrl(mSIDE)+'"></scr'+'ipt>');

  var prefs = new _IG_Prefs();
  var IMAGE_BASE = "http://cdn.labpixies.com/campaigns/notes/images/v2/profile/";


  var backgroundColors = ["#FFF28F","#D8FDCF","#BAF6FF","#D6D1FF","#FFD2F9","#FFD6CF","#E8E8E8"];
  var colorConversionFromV1 = [6,1,0,5,4,3,2]; //the colors order in v1 isn't the same order as in v2, so if we have data from v1 we need to use this array in order to convert to the right colors numbers
  
  var notes = [];
  var full_note_list = [];
  var current_note = 0;
  var note;  
  
  function getCachedImage(src){
    return _IG_GetCachedUrl(IMAGE_BASE+src);
  }
  
  function loadImages() {
    
    document.getElementById('shadowTD').style.background = 'url'+'('+getCachedImage('note_shadow.png')+') repeat-y';
    document.getElementById('noteTop').style.background = 'url'+'('+getCachedImage('notes_top_bottom_sprite.png')+') 0px 0px no-repeat';
    document.getElementById('noteBottom').style.background = 'url'+'('+getCachedImage('notes_top_bottom_sprite.png')+') -245px 0px no-repeat';
    document.getElementById('new_note_left').style.background = 'url'+'('+getCachedImage('add_note_sprite.png')+') no-repeat';
    document.getElementById('see_all_left').style.background = 'url'+'('+getCachedImage('add_note_sprite.png')+') no-repeat';
    document.getElementById('new_note_right').style.background = 'url'+'('+getCachedImage('add_note_sprite.png')+') right 0px no-repeat';
    document.getElementById('see_all_right').style.background = 'url'+'('+getCachedImage('add_note_sprite.png')+') right 0px no-repeat';
    document.getElementById('prev_note').style.background = 'url'+'('+getCachedImage('next_prev_sprite.png')+') no-repeat';
    document.getElementById('next_note').style.background = 'url'+'('+getCachedImage('next_prev_sprite.png')+') right 0px no-repeat';
  }


  //function for getting v1's data
  function importV1Data() {
    var num_of_notes = 0;
    //getting first note from prefs
    var str = prefs.getString("lp_note_"+num_of_notes);
    //save the old notes in the new  format
    var list_order = [];
    while (str && str != "none" && (str.split("|udi|").length==3) && num_of_notes<7) {
      //getting all parts of V1 note data
    	var str_array = str.split("|udi|");
    	
    	//creating a new id for the current imported note
    	var new_note_id = (new Date()).getTime()+""+Math.floor(Math.random()*10000);
    
    	//create the note with the given data
    	var note = {};
    	note.id = "n_" + new_note_id; 
    	note.text = str_array[0]+"\n"+str_array[1];
    	note.fontSize = 12;
    	note.color = colorConversionFromV1[str_array[2]];
    	
    	//insert the note to the notes array and to the list_order array
    	notes[note.id] = note;
    	list_order.push(note.id);
    
      //saving note to the DB, the note id is the key
    	lpgadgets.lp.data.set(note.id,lpgadgets.lp.utils.JSON.stringify(note),function(d){ 
    	    if (!d.success) {
    		    lp_trackEvent("Data Error", "lpdata.set");
    		    showDataError();
    		    return;
    	    }
    	   },"note");
      
      //clearing the note from prefs and getting the next one to import
    	prefs.set("lp_note_"+num_of_notes,"none");
    	num_of_notes++
    	str = prefs.getString("lp_note_"+num_of_notes);
    }
    //saving the notes order
    lpgadgets.lp.data.set('list_order_1',lpgadgets.lp.utils.JSON.stringify(list_order),function(d){
      if (!d.success) {
      	lp_trackEvent("Data Error", "lpdata.set");
      	showDataError();
      	return;
      }
    },"note_order");
    
    full_note_list = list_order;
    displayNotes();
  }

  //init profile mode
  function initModule() {
    //get the user data
    lpgadgets.lp.data.init(function(data){
  		if(!data.success) {
  	    lp_trackEvent("Data Error", "lpdata.init");
  		  showDataError();
  		  return;
    	}
      else {
        //if we have notes from v1
	      if(prefs.getString('lp_note_0') != 'none' ) {
		      importV1Data();
		    } 
		    //getting the data from lpdata
        else {
		      fetchData();
        }
      }
	  });
  }

    //get all the notes data from the database
    function fetchData() {
      lpgadgets.lp.data.get([],dataReceive);
    }

    //this function is called by the lpdata layer when the data arrives
    function dataReceive(data) {
      if (!data.success) {
        lp_trackEvent("Data Error", "lpdata.get");
  			showDataError();
  			return;
  		}
  		var listOrder1 = [];
  		var listOrder2 = [];
  		//going over all items from lp data (notes and orders)
  		for (var i in data.data) {
  			if (i=="list_order_1") {
  			   listOrder1 = lpgadgets.lp.utils.JSON.parse(data.data[i]);
  			}
  			else if (i=="list_order_2") {
  			   listOrder2 = lpgadgets.lp.utils.JSON.parse(data.data[i]);
  			}
			  else {
  			  var tmp = lpgadgets.lp.utils.JSON.parse(data.data[i]);
  			  notes[i] = tmp;
			  }
   		}
   		//shuffling the orders together to get one order
		  full_note_list = shuffleArrays(listOrder1, listOrder2);
      displayNotes();
   }
   
   
   function displayNotes(){
      //if we have notes to display 
      if (full_note_list.length>0) {
    		displayLastActiveNote();
    	}
    	//otherwise, we set a new empty note.
      else {
        setEmptyNote();
        document.getElementById("numOfNotes").innerHTML=(("__MSG_v2_note_of_total__").replace("%NUM%",1)).replace("%TOTAL%",1);
      }
      //displaying the gadget and deciding whether to display prev and next buttons
      if (full_note_list.length>1) {
        document.getElementById("prev_note").style.visibility = "visible";
        document.getElementById("next_note").style.visibility = "visible";
      }
   }
  
  
   //combining the 2 lists orders to be one order
   function shuffleArrays(ar1, ar2) {
      var len_ar1 = ar1.length;
      var len_ar2 = ar2.length;
      var ret = [];
      for (var i = 0; i< len_ar1 || i < len_ar2; i++) {
      	if (i<len_ar1){
          ret.push(ar1[i]);
        }
      	if (i<len_ar2) {
      		ret.push(ar2[i]);
      	}
      }
      return ret;
   }

    //displaying the last active note
    function displayLastActiveNote() {

        var last_note = prefs.getString('last_note');
        //if we don't have anything saved we will display the first note
        if (last_note == "") {
          if (full_note_list.length<1){
            setEmptyNote();
            return;
          }
        }
        current_note = 0;
        for( var i = 0; i< full_note_list.length; i++ ) {
        	if( full_note_list[i] == last_note ) {
        	    current_note = i;
        	    break;
        	}
        }
        displayItem(full_note_list[current_note]);
        document.getElementById('numOfNotes').innerHTML=(("__MSG_v2_note_of_total__").replace("%NUM%",(current_note+1))).replace("%TOTAL%",full_note_list.length);
    }

   //move to the next or prev item according to the direction given (+1, -1)
   function moveToItem(direct) {
    	var length = full_note_list.length;
    	current_note = (current_note+direct+length)%length;
    	displayItem(full_note_list[current_note]);
    	prefs.set('last_note', full_note_list[current_note]);
    	document.getElementById('numOfNotes').innerHTML=(("__MSG_v2_note_of_total__ ").replace("%NUM%",(current_note+1))).replace("%TOTAL%",full_note_list.length);
    	_IG_AdjustIFrameHeight();
   }
   
   //create an empty note when there are no notes to display. default color of note is yellow
    function setEmptyNote() {
      document.getElementById("textTable").style.backgroundColor = backgroundColors[0];
      document.getElementById("note_div").style.fontSize = "12px";
      document.getElementById("note_div").style.lineHeight = "16px";
      document.getElementById("note_div").innerHTML = "__MSG_v2_edit_text__";
      document.getElementById("noteTop").style.backgroundPosition = "0px -"+(0*(10))+"px";
      document.getElementById("noteBottom").style.backgroundPosition = "-245px -"+(0*(10))+"px";
      setMinSize();
    }
    
    
    //setting the min height of the textarea (calculated from min height of 150 to entire note
    function setMinSize() {
        if (document.getElementById("note_div").offsetHeight < 112)
            document.getElementById("note_div").style.height = "112px";
        _IG_AdjustIFrameHeight();
    }

   //display an item with the given item ID
   function displayItem(id) {
      note = notes[id];
      
      document.getElementById("textTable").style.backgroundColor = backgroundColors[note.color];
      document.getElementById("note_div").style.fontSize = note.fontSize;
      document.getElementById("note_div").style.lineHeight = Math.floor(note.fontSize*1.4)+"px";
      document.getElementById("note_div").innerHTML = note.text.replace(/\n/g,'<br/>');
      document.getElementById("noteTop").style.backgroundPosition = "0px "+(note.color*(-10))+"px";
      document.getElementById("noteBottom").style.backgroundPosition = "-245px "+(note.color*(-10))+"px";
      setMinSize();
   }

   function upperToolMouseOver(el) {
    var el_name = el.id;
    document.getElementById(el_name+'_left').style.backgroundPosition = "left -15px";
    document.getElementById(el_name+'_right').style.backgroundPosition = "right -15px";
   }

   function upperToolMouseOut(el) {
    var el_name = el.id;
    document.getElementById(el_name+'_left').style.backgroundPosition = "left 0px";
    document.getElementById(el_name+'_right').style.backgroundPosition = "right 0px";
   }

   function arrowsMouseOver(arrow) {
    var arrow_name = arrow.id;
    if (arrow_name == "prev_note") {
      document.getElementById(arrow_name).style.backgroundPosition = "left -14px";
    }
    else {
      document.getElementById(arrow_name).style.backgroundPosition = "right -14px";
    }
   }
   
   function arrowsMouseOut(arrow) {
    var arrow_name = arrow.id;
    if (arrow_name == "prev_note"){
      document.getElementById(arrow_name).style.backgroundPosition = "left 0px";
    }
    else {
      document.getElementById(arrow_name).style.backgroundPosition = "right 0px";
    }
   }
   
   //the params can be either "new" (will open canvas with a new note) or "edit" (will open canvas with focus on the current note)
   function switchToCanvas(paramsToCanvas) {
      var params = {};  
      if (paramsToCanvas=="new") {
        params['addNew'] = true;
      }
      //if we got edit and this is a saved note with id 
  		if (paramsToCanvas=="edit" && note!=null){
        params['editNoteId'] = note.id;
      }		
    	var views = gadgets.views.getSupportedViews();
      gadgets.views.requestNavigateTo(views['canvas'], params);	
   }
    
  function showDataError() {
	   document.getElementById('gadg_div').innerHTML='<center><div style="text-align:center;width:245px;height:130px;font-family: Arial, Helvetica, sans-serif;font-size:11px; line-height:15px; color:#363636"><img src="http://cdn.labpixies.com/images/oops_data_icon.png" width="150" height="74" style="margin-top:5px;margin-bottom:5px"/><br/>__MSG_data_err1__<br/>__MSG_data_err2__</div></center>';
     _IG_AdjustIFrameHeight();
  }

   _IG_RegisterOnloadHandler(function () {
  		loadImages();
      initModule();
   });

   _IG_Analytics("UA-345375-1", "/mynotes_profile");

 </script>

<center>
  <div id="gadg_div">
    <div style="height:5px; font-size:1px;"></div>
    <table id="mainTable" width="245" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td id="tools">
          <div style="float:left; margin-left:5px; margin-right:5px; direction:ltr;">
            <table border="0" cellpadding="0" cellspacing="0">
              <tr id="new_note" onclick="lp_trackEvent('Open Canvas','Add New Note button'); switchToCanvas('new');" onmouseover="upperToolMouseOver(this);" onmouseout="upperToolMouseOut(this);">
                  <td id="new_note_left">__MSG_v2_add_new_note_button_text__</td>
                  <td id="new_note_right">&nbsp;</td>
              </tr>
            </table>
          </div>
          <div style="float:left; direction:ltr;">
            <table border="0" cellpadding="0" cellspacing="0">
              <tr id="see_all" onclick="lp_trackEvent('Open Canvas','See All Notes button'); switchToCanvas();" onmouseover="upperToolMouseOver(this);" onmouseout="upperToolMouseOut(this);">
                  <td id="see_all_left">__MSG_v2_see_all_notes_button_text__</td>
                  <td id="see_all_right">&nbsp;</td>
              </tr>
            </table>
          </div>
          <div id="arrows" style="float:right; margin-right:5px; line-height: 1px; overflow: hidden;"> 
            <div id="prev_note" title="__MSG_v2_prev_tooltip__" onmouseover="arrowsMouseOver(this);" onmouseout="arrowsMouseOut(this);" onclick="lp_trackEvent('Show Note','Previous icon button'); moveToItem(-1);" style="line-height: 1px; overflow: hidden; visibility:hidden; float:left; cursor:pointer; width:14px; height:14px; margin-right:4px;"></div>
            <div id="next_note" title="__MSG_v2_next_tooltip__" onmouseover="arrowsMouseOver(this);" onmouseout="arrowsMouseOut(this);" onclick="lp_trackEvent('Show Note','Next icon button'); moveToItem(1);" style="line-height: 1px; overflow: hidden; visibility:hidden; float:left; cursor:pointer; width:14px; height:14px;"></div>
          </div>
        </td>
      </tr>
      <tr>
        <td style="height:4px; line-height:4px; font-size:1px;"></td>
      </tr>
      <tr>
        <td height="150" style="cursor:pointer;" valign="top" onclick="lp_trackEvent('Open Canvas','Click on note');  switchToCanvas('edit');">
          <div id="noteTop" style="width:245px; height:10px;"></div>
          <div>
            <table id="textTable" width="245" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td id="textContent" style="width:243px;">
                  <div style="width:243px; overflow:hidden;">
                    <table border="0" cellspacing="0" cellpadding="0" width="243">
                      <tr><td colspan="3" style="height:2px; font-size:1px;"></td></tr>
                      <tr>  
                        <td style="width:12px; font-size:1px;"></td>
                        <td valign="top" width="220">
                          <div style="width:218px; overflow:hidden;">
                            <table border="0" cellspacing="0" cellpadding="0">
                              <tr>
                                <td id="note_div" style="width:216px;" valign="top">
                                </td>
                              </tr>
                            </table>
                          </div>
                        </td>
                        <td style="width:10px; font-size:1px;"></td>
                      </tr>
                      <tr><td colspan="3" style="height:2px; font-size:1px;"></td></tr>
                      <tr>
                        <td style="width:12px; font-size:1px;"></td>
                        <td id="bottomTools" height="12">
                          <div id="editNote" class="bottom_tools" style="float:left;">__MSG_v2_edit_note__</div>
                          <div id="numOfNotes" class="bottom_tools" style="float:right;direction:__BIDI_DIR__"></div>
                        </td>
                        <td style="width:10px; font-size:1px;"></td>
                      </tr>
                    </table>
                  </div>
                </td>
                <td id="shadowTD" style="width:2px; font-size:1px;"></td>
              </tr>                        
            </table>
          </div>
          <div id="noteBottom" style="width:245px; height:10px;"> </div>
        </td>
      </tr>
    </table>    
  </div>
  <div style="height:4px; font-size:1px;"></div>

  <div style="text-align:center;">
        <script type="text/javascript">
          GA_googleFillSlot("my_notes_txt");
        </script>
  </div>
  <div style="clear:both;">
      <script type="text/javascript">
      var mMENU = _IG_GetCachedUrl("http://cdn.labpixies.com/infra/js/lp_footer.js");
      document.write('<scr'+'ipt type="text/javascript" src="'+mMENU+'"></scr'+'ipt>');
      </script>
  </div>
</center>
<iframe width="1" height="1" style="width:1px; height:1px; overflow:hidden; position:absolute; visibility:hidden;" src="http://static.labpixies.com/campaigns/notes/analytics.html"></iframe>

]]> 
</Content>



<Content type="html" view="canvas">
<![CDATA[
	  
<title>My Notes</title>
<style type="text/css">
body, html, * {
	margin: 0px;
	padding: 0px;
}

ul.draglist { 
    width: 253px;
    height:100%;
    list-style: none;
    margin:0;
    padding:0;
}
.drag_handle, .note_bottom {
  line-height: 1px;
  overflow: hidden;
}

.note_text_style {
  width:220px;
  font-size:11px;
  line-height:14px; 
  border-style:none;
  overflow: hidden;
  resize:none;
  outline:none;
  border-color:transparent;
}

li.moving {
  opacity: 0.5;
  filter: alpha(opacity = 50);
}

td.icons {
  width:17px; 
  height:19px;
  cursor:pointer;
}

td.color {
    width:13px;
    height:13px;
    border:1px solid #FFFFFF;
}
.ads_margin_top {
  height:30px;
  font-size:1px;
}

</style>
<!--[if IE]>
<style>
li {
  display:inline;
}
</style>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/fonts/fonts-min.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/dragdrop/dragdrop-min.js"></script>
<script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>
<!--[if IE 6]> 
	<script type="text/javascript"> 
		try {//IE fix, causes it to automatically cache background image 
			document.execCommand("BackgroundImageCache", false, true); 
		} catch(e){ } 
	</script> 
<![endif]-->
<!-- 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", "my_notes_leaderboard_top");
	  GA_googleAddSlot("ca-pub-8123415297019784", "my_notes_custom_1");
	  GA_googleAddSlot("ca-pub-8123415297019784", "my_notes_custom_2");
	  GA_googleAddSlot("ca-pub-8123415297019784", "my_notes_box");
	</script>
	<script type="text/javascript">
	  GA_googleFetchAds();
	</script>
<!-- END OF TAG FOR head SECTION -->
<script type="text/javascript">

var _gadgetID=56;
var $lp=jQuery.noConflict();

//google event tracking code
var lp_pageTracker = new _gat._getTracker("UA-345375-1");
lp_pageTracker._initData();

function lp_trackEvent(eventName,eventLable,eventVar)  {

  try {
    lp_pageTracker._trackEvent("My Notes - Canvas", eventName,eventLable,eventVar );
  }
  catch(ee) {}
}


mSIDE = "http://www.labpixies.com/infra/js/lp_data.js";
document.write('<scr'+'ipt type="text/javascript" src="'+_IG_GetCachedUrl(mSIDE)+'"></scr'+'ipt>');
	
</script>
		 
<center>
<div style="width:760px; height:106px; background-image:url(http://cdn.labpixies.com/infra/images/ad_unit_bg_760.png)">
	<div style="text-align:left; margin-left:22px; padding-top:9px;">
    <script type="text/javascript">
		  GA_googleFillSlot("my_notes_leaderboard_top");
		</script>
  </div>
</div>
<div style="height:10px; font-size:1px;"></div>
<div id="main_container" style="direction:ltr;">
  <table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td style="width:522px;" valign="top">
        <div id="gadget_div" style="width:522px;">
          <!--Add new button-->
          <div style="margin-bottom: 10px;" align="left">
            <table border="0" cellpadding="0" cellspacing="0">
              <tr id="create_new_note" onclick="lp_trackEvent('Add New Note','Add New Note button'); createBlankNewNote();" onmouseover="document.getElementById('create_new_note_left').style.backgroundPosition = 'left -20px'; document.getElementById('create_new_note_right').style.backgroundPosition = 'right -20px';"onmouseout="document.getElementById('create_new_note_left').style.backgroundPosition = 'left 0px';document.getElementById('create_new_note_right').style.backgroundPosition = 'right 0px';" style="height: 20px; cursor:pointer;">
        	       <td id="create_new_note_left" style="padding-left: 10px">__MSG_v2_add_new_note_button_text__</td>
        	       <td id="create_new_note_right" style="padding-right: 10px">&nbsp;</td>
              </tr>
            </table>
          </div>
          <!--Add new button-->
          <table border="0" cellpadding="0" cellspacing="0" style="direction:__BIDI_DIR__">
            <tr style="height:100%">
              <!-- right side notes-->
              <td style="height:100%;" valign="top">
                <div style="width:253px;">
                  <ul id="ul1" class="draglist">
                  </ul>
                </div>
              </td>
              <!--space-->
              <td style="width:16px;"></td>
              <!--left side notes-->
              <td style="width:253px; height:100%;" valign="top">
                <div style="width:253px;">
                  <ul id="ul2" class="draglist">
                  </ul>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </td>
      <td style="width:238px;" align="right" valign="top">
        <div class="ads_margin_top"></div>
        <div style="width:200px; margin-bottom:10px;">
            <script type="text/javascript">
              GA_googleFillSlot("my_notes_custom_1");
            </script>
        </div>
        <div style="width:200px; margin-bottom:10px;">
            <script type="text/javascript">
              GA_googleFillSlot("my_notes_custom_2");
            </script>
        </div>
        <div style="width:200px;">
            <script type="text/javascript">
              GA_googleFillSlot("my_notes_box");
            </script>
        </div>
      </td>
    </tr>
  </table>
</div>

<div id="select_color_div" style="position:absolute; display:none; cursor:pointer;">
  <table id='select_color_table' cellpadding='0' cellspacing='0' style='border:1px solid #ffffff; background-color:#FFFFFF;'>
    <tr>
      <td class='color' style='background-color:#F1DE57; font-size:1px;' onclick='colorSelected(0);'>&nbsp;</td>
      <td class='color' style='background-color:#AADD9D; font-size:1px;' onclick='colorSelected(1);'>&nbsp;</td>
      <td class='color' style='background-color:#85D9E5; font-size:1px;' onclick='colorSelected(2);'>&nbsp;</td>
      <td class='color' style='background-color:#A69FDF; font-size:1px;' onclick='colorSelected(3);'>&nbsp;</td>
      <td class='color' style='background-color:#DEA0D6; font-size:1px;' onclick='colorSelected(4);'>&nbsp;</td>
      <td class='color' style='background-color:#FFA799; font-size:1px;' onclick='colorSelected(5);'>&nbsp;</td>
      <td class='color' style='background-color:#BFBFBF; font-size:1px;' onclick='colorSelected(6);'>&nbsp;</td>
    </tr>
  </table>
</div>

<div style="clear:both;">
  <script type="text/javascript">
    var mMENU = _IG_GetCachedUrl("http://cdn.labpixies.com/infra/js/lp_footer.js");
    document.write('<scr'+'ipt type="text/javascript" src="'+mMENU+'"></scr'+'ipt>');
  </script>
</div>

</center>

<div id="test_size_div" class="note_text_style" style="position:absolute; visibility:hidden; z-index:-1;"></div>
<iframe width="1" height="1" style="width:1px; height:1px; overflow:hidden; position:absolute; visibility:hidden;" src="http://static.labpixies.com/campaigns/notes/analytics.html"></iframe>
<script type="text/javascript">
	
	//basic data structure that hold all notes objects
	/**a note object is in the form of:
	*  note.id
	*  note.title
	*  note.text
	*  note.fontSize
	*  note.color
	**/	
	  	
var notes = [];
var listOrder1 = [];
var listOrder2 = [];
var prefs = new _IG_Prefs();	
var autoSaveIntervalHandler = 0;
var dragOn = false;

var IMAGE_BASE = "http://cdn.labpixies.com/campaigns/notes/images/v2/";
var backgroundColors = ["#FFF28F","#D8FDCF","#BAF6FF","#D6D1FF","#FFD2F9","#FFD6CF","#E8E8E8"];
var backgroundColorsNames = ["Yellow","Green","Turquoise","Purple","Pink","Red","Gray"];  //used for events
var colorConversionFromV1 = [6,1,0,5,4,3,2]; //the colors order in v1 isn't the same order as in v2, so if we have data from v1 we need to use this array in order to convert to the right colors numbers

function initModule() {

	//init the lists
  new YAHOO.util.DDTarget("ul1");
  new YAHOO.util.DDTarget("ul2");

  //get the user data
  lpgadgets.lp.data.init(function(data){
  	if(!data.success) {
	    lp_trackEvent("Data Error", "lpdata.init");
		  showDataError();
		  return;
    } 
    else {
      //getting v1 data if we have it
      if(prefs.getString('lp_note_0') != 'none' ) {
		      saveV1Format();
		    } 
        else {
		      fetchData();
        }
	   }		
   });
   loadImages();
}

function getCachedImage(src){
	return _IG_GetCachedUrl(IMAGE_BASE+src);
}

function loadImages() {
    document.getElementById('create_new_note_left').style.background = 'url'+'('+getCachedImage('add_note_sprite.png')+') left 0px no-repeat';
    document.getElementById('create_new_note_right').style.background = 'url'+'('+getCachedImage('add_note_sprite.png')+') right 0px no-repeat';
}
  
  //get all the notes data from the database
  function fetchData() {
    lpgadgets.lp.data.get([],dataReceive);
  }
  
  //this function is called when by the lpdata layer when the data arrives
  function dataReceive(data) {
  
    if (!data.success) {
      lp_trackEvent("Data Error", "lpdata.get");
			showDataError();
			return;
	  }
	  //going over all the saved data
  	for (var i in data.data) {
  	    //getting first column order
        if (i=="list_order_1") {
          listOrder1 = lpgadgets.lp.utils.JSON.parse(data.data[i]);
        }
        //getting second column order
        else if (i=="list_order_2") {
          listOrder2 = lpgadgets.lp.utils.JSON.parse(data.data[i]);
        }
        //gettin all notes
        else {
          var tmp = lpgadgets.lp.utils.JSON.parse(data.data[i]);
          notes[i] = tmp;
        }
    }
    lp_trackEvent("OnLoad - Notes Number",listOrder1.length+listOrder2.length);
    updateDisplay();
    
    var params = gadgets.views.getParams();   
    //focusing on the note to edit (we need the focus to happen after adjustHeight, thus setting the timeout
    if (typeof params['editNoteId'] != 'undefined' ){
      var elementId = params['editNoteId']+ "_note_text";
      setTimeout(function(){document.getElementById(elementId).focus();},1000);
    }
    //adding a new one if needed
    if (typeof params['addNew'] != 'undefined' ){
      createBlankNewNote();
    }
    autoSaveIntervalHandler = setInterval(detectAndSaveChanges,5000);
  }
  
  //save the current order of the note to lp_date
  function saveNotesOrder() {
    //going over the displayed elements in both uls and saving the order from display
    for (var ls=1; ls<3; ls++) {
      var orderArr = [];
      var items = document.getElementById("ul"+ls).getElementsByTagName("li");
      for (var i=0;i<items.length;i++) {
        if (dragOn) return;
        orderArr.push(items[i].id);
      }
      lpgadgets.lp.data.set("list_order_"+ls,lpgadgets.lp.utils.JSON.stringify(orderArr),function(d){
  			if (!d.success) {
  				lp_trackEvent("Error", "lpdata.set");
  				showDataError();
  				return;
  			}
  		},"note_order");
    } 
  }
  
  var EMAIL_LIMIT = 1800;
  function sendNote(id) {
    var mailLines = document.getElementById(id+'_note_text').value.split("\n");
    var bodyArr = [];
    for (var i=0; i<mailLines.length; i++){
      bodyArr.push(encodeURIComponent(mailLines[i]));
      bodyArr.push("%0A");
    }
    var subject = '__MSG_v2_email_subject__';
    var body = bodyArr.join("");
    if (body.length>EMAIL_LIMIT) {
       body = body.substring(0,EMAIL_LIMIT);
       alert("__MSG_v2_email_too_long__");
	  }
    var link_href = 'mailto:?subject='+encodeURIComponent(subject)+'&body='+body;
    
    window.location = link_href;
  }


  function printNote(id) {
    var noteTextAreaElement = document.getElementById(id+'_note_text');
	  var note_text = noteTextAreaElement.value;
	  var html=[];
	  html.push("<div style='font-family:arial;font-size:"+noteTextAreaElement.style.fontSize+";' >");
	  html.push((note_text).replace(/\n/g,"<br>"));
    html.push("</div>");

	  var printWin = window.open("","printSpecial");
    printWin.document.open();
    printWin.document.write(html.join(''));
    printWin.document.close();
    printWin.print();
  }

  //deletes a note
  function deleteNote(id) {
    //prompting an alert asking if the user is sure
    var noteText = document.getElementById(""+id+"_note_text").value;
    if (noteText.length>30){
      noteText = noteText.substring(0,30)+"...";
    }
    var r=confirm(("__MSG_v2_sure_delete__").replace("%TEXT%",("'"+noteText+"'")));
  		if (r==false){
  			return;
  	}
  	//removing note from display
  	var note = document.getElementById(id);
    note.parentNode.removeChild(note);
    //removing note from DB and saving the new order
    removeNoteFromDB();
    saveNotesOrder();    
    setListsMinSize();
  }
  
  //open the color table and sets the note id as an atttribute of the table
  function openChooseNoteColor(id,me) {
    
    var pivot = $lp(me).offset();
    var tbl = $lp("#select_color_div");
    tbl.show();
    
    var left = pivot.left-tbl.width()+16;
    var top = pivot.top;
    
    tbl.css({"top":top+"px","left":left+"px"});
    tbl.attr("note_id",id);
    document.getElementById("select_color_div").onmouseover = function(){
      setFocusOnNote(id);
      document.getElementById("select_color_div").style.display="";
    };
    document.getElementById("select_color_div").onmouseout = function(){
      document.getElementById("select_color_div").style.display="none";
    };
    
  }
  
function getElementsByClassName(elm, classname) {
	if (elm==null)
		return [];
	if (typeof(elm['getElementsByClassName'])!="undefined") {
		return elm.getElementsByClassName(classname);
	}
	var testClass = new RegExp("(^|\\s)" + classname + "(\\s|$)");
	var ret = [];
	var elements = elm.all ? elm.all : elm.getElementsByTagName('*');
	var length = elements.length;
	for (var i = 0; i<length; i++) {
		var current = elements[i];
		if (testClass.test(current.className)) {
			ret.push(current);
		}
	}
	return ret;
}

  //chnage the color of the not to the given color index
  function colorSelected(selectedIndex) {
    lp_trackEvent("Change Color",backgroundColorsNames[selectedIndex]);
    var tbl = $lp("#select_color_div");
    var id = tbl.attr("note_id");

    tbl.hide();
    var note = document.getElementById(id);
    note.getElementsByTagName('textarea')[0].style.backgroundColor = backgroundColors[selectedIndex];
    (getElementsByClassName(note, 'note_body')[0]).style.backgroundColor = backgroundColors[selectedIndex];
    (getElementsByClassName(note, 'drag_handle')[0]).style.backgroundPosition = "-504px " + (selectedIndex*(-10))+"px";
    (getElementsByClassName(note, 'note_bottom')[0]).style.backgroundPosition = "-252px " + (selectedIndex*(-10))+"px";
    var iconListElements = (getElementsByClassName(note, "note_icon_table")[0]).getElementsByTagName("td");
    for (var i=0;i<iconListElements.length;i++) {
        iconListElements[i].style.backgroundPosition = "-"+ (selectedIndex*(17)*2)+"px -"+(i*19)+"px";
    }

    notes[id].color = selectedIndex;
    saveNoteToDB(id);

  }
  
  //hide the icon table
  //change the drag handle to regular frame with round corners
  //remove the color table (not always needed)
  function removeFocusFromNote(id) {

	try {
	    document.getElementById("select_color_div").style.display = "none";
	    var note = document.getElementById(id);
	    (getElementsByClassName(note, 'drag_handle')[0]).style.backgroundPosition = "0px " + (notes[id].color*(-10))+"px";
	    (getElementsByClassName(note, "note_icon_table")[0]).style.visibility = "hidden";
	} catch(e){}
  }
  
  
  function setFocusOnNote(id) {
    var note = document.getElementById(id);
    (getElementsByClassName(note, 'drag_handle')[0]).style.backgroundPosition = "-504px " + (notes[id].color*(-10))+"px";
    (getElementsByClassName(note, "note_icon_table")[0]).style.visibility = "visible";
    
  }
  
  
  var NOTE_MAX_LEN=2000;  
  //setting text area to contain only NOTE_MAX_LEN chars 
  function checkTextAreaLength(ta){
    if (ta.value.length>NOTE_MAX_LEN) {
      ta.value = ta.value.substring(0,NOTE_MAX_LEN);
    }
  }
  
  //change the size of the font in the given note
  var MAX_FONT_SIZE = 18;
  var MIN_FONT_SIZE = 10;
  function changeFontSize(incdec,id) {
  	var e = document.getElementById(id);
  	var t = e.getElementsByTagName('textarea')[0];
  	var new_size = notes[id].fontSize+incdec;
  
  	if (new_size > MAX_FONT_SIZE || new_size < MIN_FONT_SIZE)
  		return;
  
  	notes[id].fontSize = new_size;
  	lp_trackEvent("Change Font Size",new_size);
  	t.style.fontSize = notes[id].fontSize+"px";
  	t.style.lineHeight = Math.floor(notes[id].fontSize*1.4)+"px";
  	textareaResize(t);
  	saveNoteToDB(id);
  }
  
  function mouseOverIcon(index, id, me) {
  	if (index==4 && notes[id].fontSize==MAX_FONT_SIZE) { // increase font size
  			return;
  	}
  	if (index==5 && notes[id].fontSize==MIN_FONT_SIZE) { // increase font size
  			return;
  	}
  	me.style.backgroundPosition = ((2*notes[id].color+1)*(-17))+"px "+ (index*(-19)) + "px";
  }
  
  function mouseExitIcon(index, id, me) {
    me.style.backgroundPosition = (2*notes[id].color*(-17))+"px "+ (index*(-19)) + "px";
  }
  
  
  //add a sigle note at the endof the given list index
  function addSingleNoteDisplay(note, listIndex) {
    
      //create the note item
      var l = document.createElement("li");
      l.id = note.id;
      l.className = "list_item";
      l.onmouseover = function(ev) {setFocusOnNote(note.id)};
      l.onmouseout = function(ev) {removeFocusFromNote(note.id);};
      l.onclick = function() { prefs.set('last_note', note.id ); };
      var out = [];
      var noteBackgroundImage = "background-image: url"+"("+_IG_GetCachedUrl(IMAGE_BASE+"notes_top_bottom_sprite.png") +");";
      //create the drag handler of the note
      out.push("<div id='"+note.id+"_drag_handle' title='__MSG_v2_click_to_drag_tooltip__' class='drag_handle' onmouseover='setFocusOnNote(\""+note.id+"\");' style='width:252px; height:10px; cursor:move;"+noteBackgroundImage+" background-position:0px "+(note.color*(-10))+"px;' onclick='lp_trackEvent(\"Arrange List\",\"Drag and Drop\");'></div>");
     
      //createt the text area of the note
      out.push("<table id='"+note.id+"_body' class='note_body' cellpadding='0' cellspacing='0' border='0' style='background-color:"+backgroundColors[note.color]+";'>");
      out.push("<tr><td style='width:10px; font-size:1px;'>&nbsp;</td><td style='width:220px;'>");
      out.push("<textarea id='"+note.id + "_note_text' class='note_text_style' onclick='lp_trackEvent(\"Note Got Focus\",\"Mouse click on the note area\");' style='background-color:"+backgroundColors[note.color]+"; font-size:"+note.fontSize+"px; line-height:"+Math.floor(note.fontSize*1.4)+"px;' onkeyup='checkTextAreaLength(this); textareaResize(this);'>"+note.text+"</textarea>");
      out.push("</td><td style='width:17px; padding-top:2px; vertical-align: top;'>");
      //createt the icon table
      out.push("<table id='"+note.id + "_icon_table' class='note_icon_table' style='visibility:hidden;' cellpadding='0' cellspacing='0' border='0'>");
      var backgroundImage = "background-image:url"+"("+_IG_GetCachedUrl(IMAGE_BASE+"buttons_sprite.png") +");";
      out.push("<tr><td class='icons' title='__MSG_v2_email_tooltip__' style='"+backgroundImage+" background-position:"+((2*note.color)*(-17))+"px 0px;' onmouseover='mouseOverIcon(0,\""+note.id+"\",this);' onmouseout='mouseExitIcon(0,\""+note.id+"\",this);' onclick='lp_trackEvent(\"Email Note\",\"Email button\"); sendNote(\""+note.id+"\");'></td></tr>");
      out.push("<tr><td class='icons' title='__MSG_v2_print_tooltip__' style='"+backgroundImage+" background-position:"+((2*note.color)*(-17))+"px -19px;' onmouseover='mouseOverIcon(1,\""+note.id+"\",this);' onmouseout='mouseExitIcon(1,\""+note.id+"\",this);' onclick='lp_trackEvent(\"Print Note\",\"Print button\"); printNote(\""+note.id+"\");'></td></tr>");
      out.push("<tr><td class='icons' title='__MSG_v2_delete_tooltip__' style='"+backgroundImage+" background-position:"+((2*note.color)*(-17))+"px -38px;' onmouseover='mouseOverIcon(2,\""+note.id+"\",this);' onmouseout='mouseExitIcon(2,\""+note.id+"\",this);' onclick='lp_trackEvent(\"Delete Note\",\"Delete button\"); deleteNote(\""+note.id+"\");'></td></tr>");
      out.push("<tr><td class='icons' title='__MSG_v2_color_tooltip__' style='"+backgroundImage+" background-position:"+((2*note.color)*(-17))+"px -57px;' onmouseover='mouseOverIcon(3,\""+note.id+"\",this);' onmouseout='mouseExitIcon(3,\""+note.id+"\",this);' onclick='openChooseNoteColor(\""+note.id+"\",this);'></td></tr>");
      out.push("<tr><td class='icons' title='__MSG_v2_bigger_font_tooltip__' style='"+backgroundImage+" background-position:"+((2*note.color)*(-17))+"px -76px;' onmouseover='mouseOverIcon(4,\""+note.id+"\",this);' onmouseout='mouseExitIcon(4,\""+note.id+"\",this);' onclick='changeFontSize(1,\""+note.id+"\");'></td></tr>");
      out.push("<tr><td class='icons' title='__MSG_v2_smaller_font_tooltip__' style='"+backgroundImage+" background-position:"+((2*note.color)*(-17))+"px -95px;' onmouseover='mouseOverIcon(5,\""+note.id+"\",this);' onmouseout='mouseExitIcon(5,\""+note.id+"\",this);' onclick='changeFontSize(-1,\""+note.id+"\");'></td></tr>");
      out.push("</table></td><td style='width:3px; font-size:1px;'>&nbsp;</td><td style='width:2px; font-size:1px; background:transparent url"+"("+_IG_GetCachedUrl(IMAGE_BASE+'note_shadow.png')+") 0px 0px repeat-y;'></td></tr></table>");
      
      //create the bottom div
      out.push("<div id='"+note.id + "_bottom' class='note_bottom' style='width:252px; height:10px; "+noteBackgroundImage+" background-position:-252px "+(note.color*(-10))+"px;'> </div>");
      out.push("<div style='width:253px; height:16px;'></div>");
      l.innerHTML = out.join('');
	     var list = document.getElementById("ul"+listIndex);
	     list.insertBefore(l, list.firstChild);
      textareaResize(document.getElementById(note.id+"_note_text"));
      
      var d = new YAHOO.example.DDList(note.id);
	  d.setHandleElId(note.id+"_drag_handle");
  }
  
  //after the data exists call this function to display the notes
  function updateDisplay() {
    
    //displaying all the first column notes
    for (var i=listOrder1.length-1;i>=0;i--) {
      var noteId = listOrder1[i];
      addSingleNoteDisplay(notes[noteId],1);
    }
    //displaying all the second column notes
    for (var i=listOrder2.length-1;i>=0;i--) {
      var noteId = listOrder2[i];
      addSingleNoteDisplay(notes[noteId],2);
    }
    //if the lists are empty create a new default note.
    if ((listOrder2.length + listOrder1.length) < 1){
      createBlankNewNote(0);
    }
    setListsMinSize();
  }
  
  
  function saveNoteToDB(id) {
  
    lpgadgets.lp.data.set(id,lpgadgets.lp.utils.JSON.stringify(notes[id]),function(d){
			if (!d.success) {
				lp_trackEvent("Error", "lpdata.set");
				showDataError();
				return;
			}
		},"note");
  }
  
  function removeNoteFromDB(id) {
    lpgadgets.lp.data.deletekey(id,function(d){
			if (!d.success) {
				lp_trackEvent("Data Error", "lpdata.deletekey");
				showDataError();
			}
		});
  }


function createBlankNewNote(color) {
  //if the user already has 24 notes, display a message 
  var items = document.getElementById("ul1").getElementsByTagName("li").length;
  items += document.getElementById("ul2").getElementsByTagName("li").length;
	if (items>=24) {
	  lp_trackEvent("Out of space pop-up","Out of space pop-up");
		alert("__MSG_v2_max_number_of_notes__");
		return;
	}
	//if we got some color we use it. otherwise, a random color
	var noteColor;
	if (color!=null) {
	 noteColor = color;
	}
	else{
	  //setting a random color
	  noteColor = Math.floor(Math.random()*backgroundColors.length);
	}
	//if we have only one item and it is on the left side, we want to remove it to the right list
  // (new order will be saved with the creation of the second note).
	if (items==1 && (document.getElementById("ul1").getElementsByTagName("li").length==1)){
	   var displayedNote = document.getElementById("ul1").getElementsByTagName("li")[0];
	   document.getElementById("ul1").removeChild(displayedNote);
	   document.getElementById("ul2").appendChild(displayedNote);
	}
	createNewNote("__MSG_v2_edit_text__", 12,noteColor);
}

  function createNewNote(text, fontSize, color) {
  
    //get a new id
    // the random is for taking care of rapid clicks on createNewNote
    // for a strange reason there were still many collisions with a 1000
    var new_note_id = (new Date()).getTime()+""+Math.floor(Math.random()*10000);
    //create the note
    var note = {};
    note.id = "n_" + new_note_id; 
    note.text = text;
    note.fontSize = fontSize;
    note.color = color;
    notes[note.id] = note;
    saveNoteToDB(note.id);
    prefs.set('last_note', note.id);
    addSingleNoteDisplay(note,1);
    saveNotesOrder();
    setListsMinSize();
    
    document.getElementById(note.id + "_note_text").focus();
    document.getElementById(note.id + "_note_text").select();
  }

//we always wants both lists to have the same height
function setListsMinSize() {
	var min_height = 200; /* in pixels */
	var list_1 = document.getElementById("ul1"); 
	var list_2 = document.getElementById("ul2"); 
	
    //calculating each ul height by summing all it's lis heights
    var liArr1 = list_1.getElementsByTagName("li");
    var h1=0;
    for (var i=0;i<liArr1.length;i++) {
        h1 = h1 + liArr1[i].offsetHeight;
    }
    
    var liArr2 = list_2.getElementsByTagName("li");
    var h2=0;
    for (var i=0;i<liArr2.length;i++) {
        h2 = h2 + liArr2[i].offsetHeight;
    }
    //setting both uls to the max height between them
    var h = (Math.max(min_height,Math.max(h1,h2)) + 10) + "px";
    
	list_1.style.height = h;
	list_2.style.height = h;
	
	_IG_AdjustIFrameHeight();
}
  
  function htmlescape(a) {

    a = a.replace(/</g, "&lt;").replace(/>/g, "&gt;");
    return a = a.replace(/"/g, "&quot;").replace(/'/g, "&#39;");
  }

  //resize the given text area according to the size of the text in this textarea
  function textareaResize(ta) {
    var helpDiv = document.getElementById("test_size_div");
    helpDiv.style.fontSize = ta.style.fontSize;
    helpDiv.style.lineHeight = ta.style.lineHeight;
    helpDiv.innerHTML = htmlescape(ta.value).replace(/\n/g,"<br>");
    var testHeight = $lp(helpDiv).height();
    if (testHeight>150) {
      ta.style.height = testHeight+30+"px";
      setListsMinSize();
    }
    else 
      ta.style.height = "150px";
  }

  //go over the items in the list and looks for changes
  //if changes are ditected update the notes[] and store the note in the database
  function detectAndSaveChanges() {

    for (var ls=1; ls<3; ls++) {
      var items = document.getElementById("ul"+ls).getElementsByTagName("li");
      for (var i=0;i<items.length;i++) {
        var id = items[i].id;
        var ta = document.getElementById(id+"_note_text");
        if (dragOn) return;
        var note = notes[id];
        if (note.text != ta.value) {
          note.text = ta.value;
          saveNoteToDB(id);
        }
      }
    }
  }
  
  //getting v1 notes, changing to the current gadget format and save to DB
  function saveV1Format() {
    
    var num_of_notes = 0;
		var str = prefs.getString("lp_note_"+num_of_notes);
		//save the old notes in the new  format
		while (str && str != "none" && (str.split("|udi|").length==3) && num_of_notes<7) {

			var str_array = str.split("|udi|");
			createNewNote(str_array[0]+"\n"+str_array[1],12, colorConversionFromV1[str_array[2]]);
			prefs.set("lp_note_"+num_of_notes,"none");
      num_of_notes++
      str = prefs.getString("lp_note_"+num_of_notes);
		}
		autoSaveIntervalHandler = setInterval(detectAndSaveChanges,5000);
  }
  
  function showDataError(){	
    document.getElementById("main_container").innerHTML='<center><div style="text-align:center;width:245px;height:274px;font-family: Arial, Helvetica, sans-serif;font-size:12px; line-height:17px; color:#363636"><img src="http://cdn.labpixies.com/images/oops_data_icon.png" width="150" height="74" style="margin-top:15px;margin-bottom:15px"/><br/>__MSG_data_err1__<br/>__MSG_data_err2__</div></center>';
    _IG_AdjustIFrameHeight();
  }
 
  _IG_RegisterOnloadHandler(initModule);
  
  (function() {

var Dom = YAHOO.util.Dom;
var Event = YAHOO.util.Event;
var DDM = YAHOO.util.DragDropMgr;

//////////////////////////////////////////////////////////////////////////////
// custom drag and drop implementation
//////////////////////////////////////////////////////////////////////////////

YAHOO.example.DDList = function(id, sGroup, config) {

    YAHOO.example.DDList.superclass.constructor.call(this, id, sGroup, config);

    this.logger = this.logger || YAHOO;
    var el = this.getDragEl();
    Dom.setStyle(el, "opacity", 0.67); // The proxy is slightly transparent
    Dom.setStyle(el, "border", "0px"); // remove border from proxy element

    this.goingUp = false;
    this.lastY = 0;
};

YAHOO.extend(YAHOO.example.DDList, YAHOO.util.DDProxy, {

    startDrag: function(x, y) {
        this.logger.log(this.id + " startDrag");
        dragOn = true;
        clearInterval(autoSaveIntervalHandler);
        // make the proxy look like the source element
        var dragEl = this.getDragEl();
        var clickEl = this.getEl();
        Dom.setStyle(clickEl, "opacity", 0.5); // Make the drop position show the element is a partial opacity
        //dragEl.innerHTML;  // = clickEl.innerHTML;

        Dom.setStyle(dragEl, "color", Dom.getStyle(clickEl, "color"));
        Dom.setStyle(dragEl, "backgroundColor", Dom.getStyle(clickEl, "backgroundColor"));
        //Dom.setStyle(dragEl, "border", "2px solid gray");

    },

    endDrag: function(e) {

        var srcEl = this.getEl();
        var proxy = this.getDragEl();

        // Show the proxy element and animate it to the src element's location
        Dom.setStyle(proxy, "visibility", "");
        var a = new YAHOO.util.Motion( 
            proxy, { 
                points: { 
                    to: Dom.getXY(srcEl)
                }
            }, 
            0.2, 
            YAHOO.util.Easing.easeOut 
        )
        var proxyid = proxy.id;
        var thisid = this.id;

        // Hide the proxy and show the source element when finished with the animation
        a.onComplete.subscribe(function() {
                Dom.setStyle(proxyid, "visibility", "hidden");
                Dom.removeClass(thisid, "moving");
                Dom.setStyle(thisid, "opacity", 1);
                setTimeout(saveNotesOrder,1000);
                autoSaveIntervalHandler = setInterval(detectAndSaveChanges,5000);
		setListsMinSize();
                dragOn = false;
            });
        a.animate();
    },

    onDragDrop: function(e, id) {

        // If there is one drop interaction, the li was dropped either on the list,
        // or it was dropped on the current location of the source element.
        if (DDM.interactionInfo.drop.length === 1) {

            // The position of the cursor at the time of the drop (YAHOO.util.Point)
            var pt = DDM.interactionInfo.point; 

            // The region occupied by the source element at the time of the drop
            var region = DDM.interactionInfo.sourceRegion; 

            // Check to see if we are over the source element's location.  We will
            // append to the bottom of the list once we are sure it was a drop in
            // the negative space (the area of the list without any list items)
            if (!region.intersect(pt)) {
                var destEl = Dom.get(id);
                var destDD = DDM.getDDById(id);
                destEl.appendChild(this.getEl());
                destDD.isEmpty = false;
                DDM.refreshCache();
            }

        }

    },

    onDrag: function(e) {

        // Keep track of the direction of the drag for use during onDragOver
        var y = Event.getPageY(e);

        if (y < this.lastY) {
            this.goingUp = true;
        } else if (y > this.lastY) {
            this.goingUp = false;
        }

        this.lastY = y;
    },

    onDragOver: function(e, id) {
    
        var srcEl = this.getEl();
        var destEl = Dom.get(id);

        // We are only concerned with list items, we ignore the dragover
        // notifications for the list.
        if (destEl.nodeName.toLowerCase() == "li") {
            var orig_p = srcEl.parentNode;
            var p = destEl.parentNode;

            if (this.goingUp) {
                p.insertBefore(srcEl, destEl); // insert above
            } else {
                p.insertBefore(srcEl, destEl.nextSibling); // insert below
            }

            DDM.refreshCache();
        } else if (destEl.nodeName.toLowerCase() == "ul") {// I'm concerned with dragover notifications for the list in
							// to handle empty ones
		
	    if ( destEl != srcEl.parentNode || destEl.getElementsByTagName('li').length ==0) {
			destEl.appendChild(srcEl);
	    }
	}
	setListsMinSize(); // we need to update it in case the ul gets empty
    }
});

//Event.onDOMReady(YAHOO.example.DDApp.init, YAHOO.example.DDApp, true);

})();

	
	_IG_Analytics("UA-345375-1", "/mynotes_canvas");
</script>



]]> 
</Content>



</Module>
