<?xml version="1.0" encoding="utf-8" ?>
<Module>
	<ModulePrefs author="LabPixies" 
	author_email="info@labpixies.com" 
	description="__MSG_description__" 
	thumbnail="http://www.labpixies.com/campaigns/trio/images/thumbnail.jpg" 
	screenshot="http://www.labpixies.com/campaigns/trio/images/screenshot.png" 
	title_url="http://www.labpixies.com" 
	title="__MSG_gTitle__" height="185" >
	<Require feature="setprefs" />	
	<Require feature="analytics" /> 	
	<Require feature="views" />
	<Require feature="dynamic-height" />
	<Locale messages="http://www.labpixies.com/campaigns/trio/i20/all_all.xml"/>
	
	<Locale lang="bg" messages="http://www.labpixies.com/campaigns/trio/i20/bg_all.xml"/>
	<Locale lang="ca" messages="http://www.labpixies.com/campaigns/trio/i20/ca_all.xml"/>
	<Locale lang="cs" messages="http://www.labpixies.com/campaigns/trio/i20/cs_all.xml"/>
	<Locale lang="da" messages="http://www.labpixies.com/campaigns/trio/i20/da_all.xml"/>
	<Locale lang="de" messages="http://www.labpixies.com/campaigns/trio/i20/de_all.xml"/>
	
	<Locale lang="el" messages="http://www.labpixies.com/campaigns/trio/i20/el_all.xml"/>
	<Locale lang="es" messages="http://www.labpixies.com/campaigns/trio/i20/es_all.xml"/>
	<Locale lang="en-gb" messages="http://www.labpixies.com/campaigns/trio/i20/en_gb_all.xml"/>
	<Locale lang="fi" messages="http://www.labpixies.com/campaigns/trio/i20/fi_all.xml"/>
	<Locale lang="fr" messages="http://www.labpixies.com/campaigns/trio/i20/fr_all.xml"/>
	
	<Locale lang="hi" messages="http://www.labpixies.com/campaigns/trio/i20/hi_all.xml"/>
	<Locale lang="hr" messages="http://www.labpixies.com/campaigns/trio/i20/hr_all.xml"/>
	<Locale lang="hu" messages="http://www.labpixies.com/campaigns/trio/i20/hu_all.xml"/>
	<Locale lang="it" messages="http://www.labpixies.com/campaigns/trio/i20/it_all.xml"/>
	<Locale lang="iw" messages="http://www.labpixies.com/campaigns/trio/i20/iw_all.xml"/>
	
	<Locale lang="ko" messages="http://www.labpixies.com/campaigns/trio/i20/ko_all.xml"/>
	<Locale lang="lt" messages="http://www.labpixies.com/campaigns/trio/i20/lt_all.xml"/>
	<Locale lang="lv" messages="http://www.labpixies.com/campaigns/trio/i20/lv_all.xml"/>
	<Locale lang="ms" messages="http://www.labpixies.com/campaigns/trio/i20/ms_all.xml"/>
	<Locale lang="nl" messages="http://www.labpixies.com/campaigns/trio/i20/nl_all.xml"/>
	
	<Locale lang="no" messages="http://www.labpixies.com/campaigns/trio/i20/no_all.xml"/>
	<Locale lang="pl" messages="http://www.labpixies.com/campaigns/trio/i20/pl_all.xml"/>
	<Locale lang="pt-BR" messages="http://www.labpixies.com/campaigns/trio/i20/pt_br_all.xml"/>
	<Locale lang="pt-PT" messages="http://www.labpixies.com/campaigns/trio/i20/pt_pt_all.xml"/>
	<Locale lang="ro" messages="http://www.labpixies.com/campaigns/trio/i20/ro_all.xml"/>
	
	<Locale lang="ru" messages="http://www.labpixies.com/campaigns/trio/i20/ru_all.xml"/>
	<Locale lang="sk" messages="http://www.labpixies.com/campaigns/trio/i20/sk_all.xml"/>
	<Locale lang="sl" messages="http://www.labpixies.com/campaigns/trio/i20/sl_all.xml"/>
	<Locale lang="sr" messages="http://www.labpixies.com/campaigns/trio/i20/sr_all.xml"/>
	<Locale lang="sv" messages="http://www.labpixies.com/campaigns/trio/i20/sv_all.xml"/>
	
	<Locale lang="th" messages="http://www.labpixies.com/campaigns/trio/i20/th_all.xml"/>
	<Locale lang="tl" messages="http://www.labpixies.com/campaigns/trio/i20/tl_all.xml"/>
	<Locale lang="tr" messages="http://www.labpixies.com/campaigns/trio/i20/tr_all.xml"/>
	<Locale lang="uk" messages="http://www.labpixies.com/campaigns/trio/i20/uk_all.xml"/>
	<Locale lang="vi" messages="http://www.labpixies.com/campaigns/trio/i20/vi_all.xml"/>
	
	<Locale lang="zh-CN" messages="http://www.labpixies.com/campaigns/trio/i20/zh_cn_all.xml"/>
	<Locale lang="zh-TW" messages="http://www.labpixies.com/campaigns/trio/i20/zh_tw_all.xml"/>
  <Locale lang="ja" messages="http://www.labpixies.com/campaigns/trio/i20/ja_all.xml"/>
	<Locale lang="en" country="US" messages="http://www.labpixies.com/campaigns/trio/i20/en_us.xml" />
	
	</ModulePrefs>
	<UserPref name="scores" default_value="{}" datatype="hidden"/>
  <UserPref name="rank" default_value="0" datatype="hidden"/>
  <UserPref name="rank_top" default_value="{}" datatype="hidden"/>
<!-- Trio Module
	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.
-->
<Content type="html" view="home,profile">
<![CDATA[
<title>Trio</title>

<style type="text/css">
body {
  text-align:center;
  font-family:arial;
}

#main {
  margin:0 auto;  
  width:243px;
  height:132px;  
}

#white {
/*  margin-left:77px;*/
  width:153px;
  /*text-align:center;*/  
}

#rank {
 
  
}

#rank_image {
  display:none;
}

#rank_name {
  font-size:12px;
  font-weight:bold;
  color:#dc4a20;
}

#topscore {
  color:#464646;
  font-size:12px;
  font-weight:bold;
}

#date {
  font-size:10px;
}

#playnow {
  color:#1c689a;  
  /*margin-top:19px;*/
  /*margin-left:94px;*/
  /*margin-right:28px;*/
  
  width:121px;
  font-weight:bold;
  font-size:12px;
  
  cursor:pointer;
}

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

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

<script type="text/javascript">
	
var IMAGES_BASE = 'http://cdn.labpixies.com/campaigns/trio/images/';
var prefs = new _IG_Prefs();

var g_rank_names = ['__MSG_rank_0__','__MSG_rank_1__','__MSG_rank_2__','__MSG_rank_3__',
  '__MSG_rank_4__','__MSG_rank_5__','__MSG_rank_6__','__MSG_rank_7__'];
  
var pageTracker = new _gat._getTracker("UA-345375-1");
pageTracker._initData();
function trackEvent(event_name, event_value) {
    try {
      pageTracker._trackEvent("Trio - V2 Min", event_name, event_value );
    }
    catch(ee) {
    
    }
}
  
function init() { 
  document.getElementById('main').style.background = 'url('+_IG_GetImageUrl(IMAGES_BASE+'profile/background.png')+') no-repeat';
  
  var rank = prefs.getInt('rank');
  document.getElementById('rank_image').src = _IG_GetImageUrl(IMAGES_BASE + 'ranks/rank' + (rank+1) +'.png');
  document.getElementById('rank_image').style.display = 'block';
  document.getElementById('rank_name').innerHTML = g_rank_names[rank];
  
  json = prefs.getString('scores');

  if(json) {
    topScores = lpgadgets.lp.utils.jsonParse(json);
    if(typeof topScores != 'undefined' ) {            
      topScores = topScores.scores;
      if(typeof topScores == 'undefined')
        topScores = [];
    }
    else {
      topScores = {};
      topScores.scores = [];
      topScores = topScores.scores;
    }
  }
  else {
    topScores = {}
    topScores.scores = []
    topScores = topScores.scores;
  } 

  if(typeof(topScores[0]) != 'undefined' ) {
    document.getElementById('score').innerHTML = topScores[0]['score'];
    document.getElementById('date').innerHTML = '('+topScores[0]['date']+')';
  }
  else {
    var el = document.getElementById('score');
    el.innerHTML = '__MSG_click_play__';
    el.style.cursor = 'pointer';
    el.onclick = switchToCanvas;
    document.getElementById('best_score').style.visibility = 'hidden';
  }
  
  _IG_AdjustIFrameHeight();
}

function switchToCanvas( ) {
	    map = gadgets.views.getSupportedViews();
	    gadgets.views.requestNavigateTo( map['canvas'] );
}
	
_IG_RegisterOnloadHandler(init);
_IG_Analytics("UA-345375-1", "/trio_profile");
	
</script>

<div id="container">
<div style="height:10px;font-size:1px;"></div>
<div id="main" style="position:relative;">
  <div style="height:14px;font-size:1px;"></div>
  <div style="width:77px;float:left;height:113px;cursor:pointer" onclick="switchToCanvas();"></div>
  <div style="padding-right:10px;float:left">
    <div id="white">
      <div style="width:100%;float:left;">
        <div style="float:left;position:relative;left:50%;">          
          <div id="rank" style="position:relative;right:50%;">
              <table cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td>
                  <img id="rank_image" style="margin-right:5px;" />
                </td>
                <td>
                  <div style="font-size:__MSG_profile_rank_font_size__;margin-top:5px;text-align:left;">__MSG_my_rank__<br/><span id="rank_name"></span></div>
                </td>
              </tr>
              </table>
          </div>
        </div>
      </div>
      
      <div style="clear:both;height:2px;font-size:1px">&nbsp;</div>
      <div id="best_score" style="clear:both;height:14px;font-size:10px;font-weight:bold;color:#0677c2">__MSG_best_score__</div>
      <div id="topscore"><span id="score"></span>&nbsp;&nbsp;<span id="date"></span></div>
    </div>
  </div>  
  <div style="position:absolute;left:94px;bottom:15px;width:121px;">
    <div style="width:100%;float:left">
      <div style="float:left;position:relative;left:50%">
        <div id="playnow" style="position:relative;right:50%" onclick="trackEvent('Play Now','Button');switchToCanvas();">
          __MSG_play_now__
        </div>
      </div>
    </div>
  </div>
</div>
</div>
<div style="margin-top:5px;">
	<script type="text/javascript">
		GA_googleFillSlot("trio_txt");
	</script>
</div>
<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>
<iframe width="1" height="1" style="width:1px; height:1px; overflow:hidden; position:absolute; visibility:hidden;" src="http://static.labpixies.com/campaigns/trio/analytics.html"></iframe>
]]>
</Content>
<Content type="html" view="canvas">
<![CDATA[
<title>Trio</title>


<style type="text/css">
#main {
    width:334px;
    height:360px;
    font-family:Arial;
    float:left;
    text-align:left;
    background-repeat:no-repeat;
    position:relative;
}

#pauseBtn, #startBtn {
  width:85px;
  height:22px;
  float:left;
  display:inline;
  clear:both;
  margin-left:9px;
  cursor:pointer;  
  color:#1c689a;
  font-weight:bold;
  font-size:__MSG_board_button_size__;
  text-transform:uppercase;
}

#pauseBtn span,#startBtn span {
  line-height:21px;
  margin-left:18px;
}

#startBtn {
  margin-top:12px;
  margin-bottom:5px;
  margin-right:9px;
}

#pauseBtn {
  margin-bottom:31px;
}

#label_score,#label_level,#label_next {
  color:#b8d4d1;
  font-size:11px;
  font-weight:bold;
  position:absolute;
  left:10px;
  width:82px;
  text-align:center;
}

#label_score {
  top:91px;
}

#label_level {
  top:141px;
}

#label_next {
  top:202px;
}

#score,#level {
  width:82px;
  text-align:center;
  font-size:14px;
  color:#165579;
  height:20px;  
  position:absolute;
  left:10px;
  line-height:20px;
}

#score {
  top:107px;
}

#level {
  height:18px;
  top:156px;
}

#label_next {
  margin-bottom:8px;
}

.next_ball {
  width:17px;
  height:17px;
  left:43px;
  position:absolute;
  top:222px;  
}

#next_ball_2 {
  top:239px;
}

#next_ball_3 {
  top:256px;
}

#game_table {
  /*margin-top:9px;*/
  position:absolute;
  top:9px;
  left:103px;
}

#bonus {  
  position:absolute;
  left:10px;
  top:325px;
  visibility:hidden;
  width:80px;
  height:19px;
}

#top_scores {
  width:149px;
  height:245px;
  margin-left:20px;
  background-repeat:no-repeat;
  position:relative;
}

#top_scores_title {
  height:25px;
  line-height:21px;
  margin-left:8px;
  font-size:__MSG_canvas_top_font_size__;
  color:#1d6799;
  text-transform:uppercase;
  font-weight:bold;
  text-align:left;  
}

.score {
  margin-left:30px;
  line-height:25px;
  font-size:12px;
  font-weight:bold;
  color:#464646;
  position:relative;
  text-align:left;
  height:25px;
}

.score .date {
  font-size:10px;
  color:#a2a2a2;
  font-weight:normal;
  line-height:25px;
  height:25px; 
  position:absolute;
  right:0px;
  top:0px;
}

#gameOverWindow {
  border:2px solid #1e6ea2;  
  width:234px;
  position:absolute;
  left:71px;
  top:56px;
  text-align:center;
  font-size:12px;
  font-weight:bold;
  background:#fff;
  visibility:hidden;
}

#gameOverTitle {
  font-size:24px;
  font-weight:bold;
  color:#126fac;
  text-align:center;
  height:50px;
  line-height:50px;
  margin-bottom:10px;
  width:234px;
}

#gameOver_newtop {
  margin-bottom:3px;
  display:none;
}

#gameOver_newtop_2 {
  margin-bottom:10px;
  line-height:23px;
  height:25px;
  position:relative;
  display:none;
}

#gameOver_newrank {
  color:#dc4a20;
  margin-bottom:10px;
  display:none;
}

#gameOver_playagain, #gameOver_close {
  width:115px;
  height:29px;
  cursor:pointer;
  margin-bottom:5px;  
  line-height:29px;
  color:#1e6ea2;
}

#gameOver_close {
  margin-bottom:10px;
}

#rank {  
  font-size:__MSG_canvas_rank_font_size__;
  text-align:left;
  margin-top:20px;
}

#rank_name {
  font-weight:bold;
  color:#dc4a20;
}

#gameOver_rank_name {
  font-size:12px;
  font-weight:bold;
}

#logo {
  width:63px;
  height:159px;
  background-repeat:no-repeat;
  background-position:0px 57px;
  margin-left:43px;
}

#playnow_left {
  float:left;
  padding-left:10px; 
}

#playnow_right {
  float:left;
  width:10px;
}

#playnow {
  color:#1e6ea2;
  font-size:__MSG_click_to_play_font_size__;
  text-transform:uppercase;
  font-weight:bold;
  cursor:pointer;
  
  
  /*float:left;*/ 
  height:27px;
  line-height:27px;  
}
</style>
<!--[if IE]>
<style type="text/css">
#playnow { float:left; }
</style>
<![endif]-->
<!--[if IE 6]> 
<style type="text/css">
#gameOverTitle {  
  width:235px;
}

.nextball {
  height:16px;
  font-size:1px;
}

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

<script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></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", "trio_leaderboard_top");
 GA_googleAddSlot("ca-pub-8123415297019784", "trio_custom_1");
 GA_googleAddSlot("ca-pub-8123415297019784", "trio_custom_2");
 GA_googleAddSlot("ca-pub-8123415297019784", "trio_box");
</script>
<script type="text/javascript">
 GA_googleFetchAds();
</script>
<!-- END OF TAG FOR head SECTION -->	

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

</script>
<script type="text/javascript">

	var trio;
	var ROW_NUM = 20;
	var COL_NUM = 13;
	var BRICK_SCORE = 10;
	var IMAGES_BASE = 'http://cdn.labpixies.com/campaigns/trio/images/';
	
	var g_ranks = [0,1900,3000,4900,6000,8900,9000,12000];
	var g_rank_names = ['__MSG_rank_0__','__MSG_rank_1__','__MSG_rank_2__','__MSG_rank_3__',
  '__MSG_rank_4__','__MSG_rank_5__','__MSG_rank_6__','__MSG_rank_7__'];

  var pageTracker = new _gat._getTracker("UA-345375-1");
  pageTracker._initData();
  
  function trackEvent(event_name, event_value) {
    try { 
      pageTracker._trackEvent("Trio - V2 Canvas", event_name, event_value );
     } catch (ee) {}
  }
	
	function addCssClass(classname, rule) {
	    var ssheet=(document.styleSheets.length==0)? document.createStyleSheet(): document.styleSheets[0];
	    if(ssheet.insertRule){
		rulecount=ssheet.cssRules.length;
		fullrule='.'+classname+"{"+ rule +"}";	
		ssheet.insertRule(fullrule, rulecount++ );
	    }else if(document.styleSheets[0].addRule){
		rulecount=ssheet.rules.length;
		ssheet.addRule('.'+classname, rule, rulecount++);	
	    }
	}
	
	function Trio() {
		var level = 0;//indicated the current speed
		var score = 0;
		var isPaused = true;
		var isStarted = false;
		var topX = 4;
		var topY = 0;
		var clearTopX = 4;
		var clearTopY = 0;
		var speed = new Array(600,500,400,350,300,250,200,150,100,80);//array of speeds
		var nextBoardEl = new Array(3); //hold a refrance to the image showing the next shpae
		var blocksBoardEl = new Array(ROW_NUM); //hold a refrance to the borad table images on the screen
		var blocksBoardMem = new Array(ROW_NUM); // virtual borad in the memory
		var curShape = new Array(3); //3 array that hold the curent shape
		var nextShape = new Array(3); //3 array that hold the next shape
		var needClear = false;
		var tmpShape = new Array(3);//3 array for use as temp in functions
		var curColor = 0; //hold the color index of the current shape
		var nextColor = 0; // hold the color index of the next shape
		var preloadedImgs = new Array(10);
		var timeoutHandle = 0;
		var bonusURL,poofURL;
		var topScores;
		var prefs;
		var rank = 0;
    
		//init the game
		this.init = function() {			
      level = 0;
			isPaused = true;
			isStarted = false;
			
			//get refreance to the elements on the screen
			pauseBtnEl = document.getElementById("pauseBtn");
			startBtnEl = document.getElementById('startBtn');
			scoreEl = document.getElementById("score");
			levelEl = document.getElementById("level");
			messageEl = document.getElementById("messageAnch");
			gameOverWindowEl = document.getElementById("gameOverWindow");
			
			var row = 0;
			var col = 0; 
			//get refrance to the elements of the game board			
			for (row=0; row < ROW_NUM; row++) {
			
				blocksBoardEl[row] = new Array(COL_NUM);
				blocksBoardMem[row] = new Array(COL_NUM);
				
				for (col=0; col < COL_NUM; col++) {
					blocksBoardMem[row][col] = 0;//mark as blank
					blocksBoardEl[row][col] = document.getElementById("block"+row+"_"+col);
					this.setBallImg(blocksBoardEl[row][col],0);
				}
			}			
			
			//get refrance to the elements of the "next shape board"
			for (row=1; row <= 3; row++) {
				nextBoardEl[row-1] = document.getElementById("next_ball_"+row);
				this.setBallImg(nextBoardEl[row-1],0);
			}

		    this.loadImages();
		    
		    prefs = new _IG_Prefs();
		    prefs.set('bla','"');
		    json = prefs.getString('scores');
		    json = lpgadgets.lp.utils.unescapeString(json);
		    		    
		    if(json) {
          topScores = lpgadgets.lp.utils.jsonParse(json);
          if(typeof topScores != 'undefined' ) {            
            topScores = topScores.scores;
            if(typeof topScores == 'undefined')
              topScores = [];
          }
          else {
            topScores = {};
            topScores.scores = [];
            topScores = topScores.scores;
          }
        }
        else {
          topScores = {}
          topScores.scores = []
          topScores = topScores.scores;
        }
                
        for(i=0;i<topScores.length;i++) {
          document.getElementById('score_'+(i+1)).innerHTML = topScores[i]['score']+'<div class="date">'+topScores[i]['date']+'</div>'; 
        }
        
        if(topScores.length>0) {
          document.getElementById('top_scores').style.background = 'url('+_IG_GetImageUrl(IMAGES_BASE+'canvas/my_top_scores_background.png')+') no-repeat';
          document.getElementById('tease').style.display = 'none';
          document.getElementById('top_scores_title').style.visibility = 'visible';
          $lp('.score').show();
          document.getElementById('rank').style.display = 'block';
        }
        else {
          document.getElementById('top_scores').style.background = '#fff';          
          document.getElementById('tease').style.display = 'block';
          document.getElementById('top_scores_title').style.visibility = 'hidden';
          $lp('.score').hide();
          document.getElementById('rank').style.display = 'none';
        }
      
        rank = prefs.getInt('rank');
        document.getElementById('rank_image').src = _IG_GetImageUrl(IMAGES_BASE + 'ranks/rank' + (rank+1) +'.png');
        document.getElementById('rank_name').innerHTML = g_rank_names[rank];
        
        document.getElementById('score_1').style.color = '#000000';
        document.getElementById('score_2').style.color = '#000000';
        document.getElementById('score_3').style.color = '#000000';
        document.getElementById('score_4').style.color = '#000000';
        document.getElementById('score_5').style.color = '#000000';
        
		}
			
		this.loadImages = function() {
		    
		    document.getElementById('main').style.backgroundImage = 'url('+_IG_GetImageUrl(IMAGES_BASE+'canvas/background2.png')+')';

        pauseBtnEl.style.backgroundImage = 'url('+_IG_GetImageUrl(IMAGES_BASE+'canvas/new_pause_play_sprites.png')+')';
		    pauseBtnEl.style.backgroundPosition = '-85px -22px';
        startBtnEl.style.backgroundImage = 'url('+_IG_GetImageUrl(IMAGES_BASE+'canvas/new_pause_play_sprites.png')+')';
        startBtnEl.style.backgroundPosition = '-85px 0px';
        
        addCssClass('image_balls', 'background:transparent url(' + _IG_GetImageUrl( IMAGES_BASE + 'canvas/balls.png' ) + ');' );
        bonusURL = _IG_GetImageUrl(IMAGES_BASE + 'canvas/bonus_anim.gif');
        poofURL = _IG_GetImageUrl(IMAGES_BASE + 'canvas/poof.gif');
        
        document.getElementById('top_scores').style.backgroundImage = 'url('+_IG_GetImageUrl(IMAGES_BASE+'canvas/my_top_scores_background.png')+')';
        document.getElementById('gameOverTitle').style.backgroundImage = 'url('+_IG_GetImageUrl(IMAGES_BASE+'canvas/game_over_background.png')+')';
        document.getElementById('gameOver_playagain').style.backgroundImage =
          document.getElementById('gameOver_close').style.backgroundImage =
          'url('+_IG_GetImageUrl(IMAGES_BASE+'canvas/game_over_buttons_sprite.png')+')';         
          
        document.getElementById('playnow_left').style.background = 'url('+_IG_GetImageUrl(IMAGES_BASE+'canvas/click_to_play_button.png')+') left top no-repeat';
        document.getElementById('playnow_right').style.background = 'url('+_IG_GetImageUrl(IMAGES_BASE+'canvas/click_to_play_button.png')+') right top no-repeat';
      
        document.getElementById('logo').style.backgroundImage = 'url('+_IG_GetImageUrl(IMAGES_BASE+'canvas/trio_logo_maxmode.png')+')';
        var poofPic = new Image();
        poofPic.src = poofURL;
        
        var bonusPic = new Image();
        bonusPic.src = bonusURL;
		}
		
		this.setBallImg = function(el, index) {		  
      if( index == 0 ) {
        el.style.visibility = 'hidden';
      }
      else if (index == 7 ) {
        var img = el.getElementsByTagName('img')[0];
        img.src = poofURL;
        el.style.visibility = 'visible';
        img.style.visibility = 'visible';
        setTimeout("img=document.getElementById('"+el.id+"').getElementsByTagName('img')[0];img.style.visibility='hidden';",250);        
      }
      else {
        el.style.visibility = 'visible';
        el.style.backgroundPosition = '-'+(index-1)*17+'px 0px';
      }            
    }
    
		this.start = function() {
		
			gameOverWindowEl.style.visibility = "hidden";
			try {
        pauseBtnEl.focus();
      }
      catch(ee) {}
			isStarted = true;
			isPaused = false;
			level = 0;
			score = 0;
			this.updateStatistics(0);
			topX = 4;
			topY = 0;
			this.setNextShape();
			curColor = nextColor
			this.copyShape(nextShape,curShape);
			clearTimeout(timeoutHandle);
			timeoutHandle = setTimeout('trio.step()',speed[level]);
			this.setNextShape();
			
		}
		
		//choose a random shape and draw it as the next shape
		this.setNextShape = function() {
						
			nextShape[0] = (Math.floor(Math.random()*6) + 1);
			nextShape[1] = (Math.floor(Math.random()*6) + 1);
			nextShape[2] = (Math.floor(Math.random()*6) + 1);
			
			this.setBallImg(nextBoardEl[0],nextShape[0]);
			this.setBallImg(nextBoardEl[1],nextShape[1]);
			this.setBallImg(nextBoardEl[2],nextShape[2]);
						
		}
		
		//draw the entier game board
		this.redrawBoard = function() {
		
			var row = 0;
			var col = 0; 
			
			for (row=0; row < ROW_NUM; row++) {
			
				for (col=0; col < COL_NUM; col++) {
						
          this.setBallImg(blocksBoardEl[row][col],blocksBoardMem[row][col]); 
				}
			}
		}
		
		this.cheat = function() {
      //score+=500;
    }
		
		//draw the shape on the game board
		this.drawShapeOnBoard = function(shapeAr, topXPos, topYPos, updateMemBoard) {
		
			var row = 0;
			var col = 0;
										
			//save this shape to be clread later
			clearTopX = topXPos;
			clearTopY = topYPos;
			needClear = true;
			
			//draw the shape on the board
			this.setBallImg(blocksBoardEl[topYPos][topXPos],shapeAr[0]);
      this.setBallImg(blocksBoardEl[topYPos+1][topXPos],shapeAr[1]);
      this.setBallImg(blocksBoardEl[topYPos+2][topXPos],shapeAr[2]); 
			
			//update the board in the mem if requested
			if (updateMemBoard) {						
			
				blocksBoardMem[topYPos][topXPos]   = shapeAr[0];
				blocksBoardMem[topYPos+1][topXPos] = shapeAr[1];
				blocksBoardMem[topYPos+2][topXPos] = shapeAr[2];
				needClear = false;
				
			}	
		}
		
		this.clearPrevShapeMarkes = function() {
				
			if (needClear) {		
				this.setBallImg(blocksBoardEl[clearTopY][clearTopX],0);
				this.setBallImg(blocksBoardEl[clearTopY+1][clearTopX],0);
				this.setBallImg(blocksBoardEl[clearTopY+2][clearTopX],0);
			}
		}
		
		//check if the current shapeAr is colliding with the elements on the board
		this.isOverlapping = function(shapeAr,topXPos, topYPos) {
					
			if (blocksBoardMem[topYPos][topXPos] != 0)
				return true;
				
			if (blocksBoardMem[topYPos+1][topXPos] != 0)
				return true;
			
			if (blocksBoardMem[topYPos+2][topXPos] != 0)
				return true;
				
			return false;
		}
		
		//check if the given shape is inside the game
		this.isShapeInBoard = function(shapeAr,topXPos, topYPos) {
		
			if (topXPos >= COL_NUM)
				return false;
			
			if (topXPos < 0)
				return false;
			
			if (topYPos < 0)
				return false;
			
			if (topYPos > ROW_NUM-3)
				return false;
				
			return true;
		}
		
		this.step = function() {
				
			if (!isStarted || isPaused) {
				return;
			}
						
			if (this.isShapeInBoard(curShape,topX,topY+1) && (!this.isOverlapping(curShape,topX,topY+1))) {
				
				this.clearPrevShapeMarkes();
				topY = topY+1;
				this.drawShapeOnBoard(curShape,topX,topY, false);
				timeoutHandle = setTimeout('trio.step()',speed[level]);
			}
			else {
			
				this.drawShapeOnBoard(curShape,topX,topY, true);
				this.checkLineCompletion();
			}
		}
		
		this.continueStep = function() {
		
			topY = 0;
			topX = (Math.floor(Math.random()*7) + 3);
			this.copyShape(nextShape,curShape);
			this.setNextShape();
			timeoutHandle = setTimeout('trio.step()',speed[level]);
			if (this.isOverlapping(curShape,topX,topY))
				this.endGame();			
				
		}
		
		this.checkLineCompletion = function() {
		
			var row = 0;
			var col = 0; 
			var nextcol = 0;
			var nextrow = 0;
			var helpIndex = 0;
			var matchNum = 0;
			var colr;
			var colrdten;//color index *10
			
			for (row=0; row < ROW_NUM; row++) {
			
				for (col=0; col < COL_NUM; col++) {
					colr = blocksBoardMem[row][col];
					if (colr > 9)
						colr = colr/10;
					colrdten = colr*10;
					
					if (colr > 0) {
						
						matchNum = 0;
						//check right
						for (nextcol=col; nextcol < COL_NUM; nextcol++) {
							if ((blocksBoardMem[row][nextcol] == colr) || (blocksBoardMem[row][nextcol] == colrdten))
								matchNum++;
							else
								break;
						}
						if (matchNum>2) {
							for (nextcol=0; nextcol < matchNum; nextcol++)							
								blocksBoardMem[row][nextcol+col] = colrdten;
						}
						//check up
						matchNum = 0;
						for (nextrow=row; nextrow < ROW_NUM; nextrow++) {
							if ((blocksBoardMem[nextrow][col] == colr) || (blocksBoardMem[nextrow][col] == colrdten))
								matchNum++;
							else
								break;
						}
						if (matchNum>2) {
							for (nextrow=0; nextrow < matchNum; nextrow++)							
								blocksBoardMem[nextrow+row][col] = colrdten;
						}
						//check up right
						matchNum = 0;
						for (helpIndex=0; helpIndex<5; helpIndex++) {
							nextrow = row-helpIndex;
							nextcol = col+helpIndex;
							if ((nextrow>=0) && (nextcol<COL_NUM)) {
								if ((blocksBoardMem[nextrow][nextcol] == colr) || (blocksBoardMem[nextrow][nextcol] == colrdten))
									matchNum++;
								else
									break;
							}
							else
								break;
						}
						if (matchNum>2) {
							for (helpIndex=0; helpIndex < matchNum; helpIndex++)							
								blocksBoardMem[row-helpIndex][helpIndex+col] = colrdten;
						}
						//check up left
						matchNum = 0;
						for (helpIndex=0; helpIndex<5; helpIndex++) {
							nextrow = row-helpIndex;
							nextcol = col-helpIndex;
							if ((nextrow>=0) && (nextcol>=0)) {
								if ((blocksBoardMem[nextrow][nextcol] == colr) || (blocksBoardMem[nextrow][nextcol] == colrdten))
									matchNum++;
								else
									break;
							}
							else
								break;
						}
						if (matchNum>2) {
							for (helpIndex=0; helpIndex < matchNum; helpIndex++)							
								blocksBoardMem[row-helpIndex][col-helpIndex] = colrdten;
						}
												
					}// if colr>0
				}//end (for col=0;...)
			} // end (for row=0;...
			
						
			var numOfBricksCleared = 0;
			//clear the marked trio
			for (row=0; row < ROW_NUM; row++) {
		
				for (col=0; col < COL_NUM; col++) {
				
					if (blocksBoardMem[row][col] > 9) {
						blocksBoardMem[row][col] = 7;
						numOfBricksCleared++;
					}
				}
			}
						
			if (numOfBricksCleared>0) {
				
				this.redrawBoard();
				setTimeout('trio.compactLines();',speed[level]/2);
				this.updateStatistics(numOfBricksCleared);
			}
			else {
			
				this.continueStep();
			}
			
		}
		
		this.compactLines = function() {
		
			var row = 0;
			var col = 0; 
			var rowin = 0;
			var lastZero = 0;
			
			for (col=0; col < COL_NUM; col++) {
				
				for (row = 19; row > -1; row--) {
					if ((blocksBoardMem[row][col] == 0) || (blocksBoardMem[row][col] == 7)) {
						lastZero = row;
						blocksBoardMem[row][col] = 0;
						for (rowin = (row-1); rowin > -1; rowin--) {
							if ((blocksBoardMem[rowin][col] != 0) && (blocksBoardMem[rowin][col] != 7)) {
								blocksBoardMem[lastZero][col] = blocksBoardMem[rowin][col];
								blocksBoardMem[rowin][col] = 0;
								break;
							}
						}
					}
				}
			}
			this.redrawBoard();
			this.checkLineCompletion();
			
		}
		
		this.removeMessage = function() {
		
			//messageEl.src = preloadedImgs[0].src;
		}
		
		this.clearBonus = function() {
      document.getElementById('bonus').src = '';
      document.getElementById('bonus').style.visibility = 'hidden';
    }
    
		this.updateStatistics = function(numOfBricksCleared) {
		
			if(numOfBricksCleared > 3) {
        document.getElementById('bonus').src = bonusURL
        document.getElementById('bonus').style.visibility = 'visible';
        //setTimeout("trio.clearBonus()",3000);
      }
      
      var prevLevel = level;
			score = score + (5*numOfBricksCleared*numOfBricksCleared);
			level = Math.floor(score/300)%10;
			
			scoreEl.innerHTML = ""+score;
			levelEl.innerHTML = ""+(level+1);
			
		}
		
		
		///////////////////////////SHAPE HANDLING/////////////////////////////////////
		//copy the values from the source shape to the taget shape
		this.copyShape = function(sourceS, targetS) {
		
			targetS[0] = parseInt(sourceS[0],10);	
			targetS[1] = parseInt(sourceS[1],10);	
			targetS[2] = parseInt(sourceS[2],10);	
		}
			
		//switch between the cells of the shape
		this.flipShape = function(shapeArr) {
			
			var temp;
			temp = shapeArr[0];
			shapeArr[0] = shapeArr[2];
			shapeArr[2] = shapeArr[1];
			shapeArr[1] = temp;
		}
		
		////////////////////////KEY HANDLING////////////////////////////////
		
		this.keyPressed = function(keynum) { //alert(whichkey);
		
			if (!isStarted) return;
			if (isPaused) return;
			
			switch (keynum) {
			
				case 37: 
				case 52: 
				case 65460:
					this.moveLeft();
					break;
				case 38:
				case 56:
				case 65464:
					this.rotate();
					break;
				case 39:
				case 54:
				case 65462:
					this.moveRight();
					break;
				case 40:
				case 50:
				case 53:
				case 65458:
				case 65461:
					this.moveDown();
					break;
				default:
				  return true;
			}		
			
			return false;
		}  

		this.moveDown = function() {
			
			var row;
			for (row=topY; row<20; row++) {
				
				if (this.isShapeInBoard(curShape,topX,row) && (!this.isOverlapping(curShape,topX,row))) {
					this.clearPrevShapeMarkes();
					topY = row;
					this.drawShapeOnBoard(curShape,topX,topY,false);
				}
				else {
					return;
				}
				
			}
		}
		
		this.moveRight = function() {
		
			if (this.isShapeInBoard(curShape,topX+1,topY) && (!this.isOverlapping(curShape,topX+1,topY))) {
							
				this.clearPrevShapeMarkes();
				topX = topX +1;
				this.drawShapeOnBoard(curShape,topX,topY,false);				
			}
		}
		
		this.moveLeft = function() {
			
			if (this.isShapeInBoard(curShape,topX-1,topY) && (!this.isOverlapping(curShape,topX-1,topY))) {
							
				this.clearPrevShapeMarkes();
				topX = topX - 1;
				this.drawShapeOnBoard(curShape,topX,topY,false);				
			}
		}
		
		this.rotate = function() {
		
			this.copyShape(curShape,tmpShape);
			this.flipShape(tmpShape);	
			if (this.isShapeInBoard(tmpShape,topX,topY) && (!this.isOverlapping(tmpShape,topX,topY))) {
			
				this.copyShape(tmpShape, curShape);
				this.clearPrevShapeMarkes();					
				this.drawShapeOnBoard(curShape,topX,topY,false);				
			}
		}
		
		this.endGame = function() {
			
      document.getElementById('gameOver_newtop').style.display = 'none';
      document.getElementById('gameOver_newtop_2').style.display = 'none';
      document.getElementById('gameOver_newrank').style.display = 'none';
      
			isStarted = false;
			clearTimeout(timeoutHandle);
			
  		var position = $lp('#main').offset();
      gameOverWindowEl.style.left = position.left+71+"px";
			gameOverWindowEl.style.visibility = 'visible';

			date = new Date();
			if($lp.browser.msie) {
        yearstr = date.getYear().toString().substring(2,4);
      }
      else {
        yearstr = '0'+(date.getYear()-100).toString();
      }
			if( __MSG_us_date__ ) datestr = (date.getMonth()+1)+'.'+(date.getDate())+'.'+yearstr;
			else datestr = (date.getDate())+'.'+(date.getMonth()+1)+'.'+yearstr;
			
			topScores.push({'score':score,'date':datestr});      
      topScores.sort(function(a,b) { return b['score'] - a['score'] });
      
      if(topScores.length>5) 
        topScores = topScores.splice(0,5);
           
      for(i=0;i<topScores.length;i++) {
        if ( score == topScores[i]['score'] && datestr == topScores[i]['date']) {
          document.getElementById('gameOver_newtop').style.display = 'block';
          document.getElementById('gameOver_newtop_2').style.display = 'block';
          var a = [];
          a.push('<div style="top:-2px;position:absolute;height:27px;left:30%;width:25px;background-repeat:no-repeat;background-image:url(');
          a.push(_IG_GetImageUrl(IMAGES_BASE+'canvas/my_top_scores_background.png'));
          a.push(');background-position:0px ');
          a.push(-(25*(i+1)-1).toString());
          a.push('px;"></div>');
          a.push(score.toString());
          //document.getElementById('gameOver_newtop_2').innerHTML = '#'+(i+1)+' - '+score;
          document.getElementById('gameOver_newtop_2').innerHTML = a.join('');
          document.getElementById('score_'+(i+1)).style.color = '#ec3367';
        }
      }
      
      var rank_top = prefs.getString('rank_top');
     
      rank_top = lpgadgets.lp.utils.unescapeString(rank_top);
      rank_top = lpgadgets.lp.utils.jsonParse(rank_top);
      if(typeof rank_top.t == 'undefined') 
        rank_top.t = [];
      rank_top = rank_top.t;
            
      rank_top.push(score);      
      rank_top.sort(function(a,b) { return b - a });
      
      if(rank_top.length>3) 
        rank_top = rank_top.splice(0,3);
      
      //check for new rank
      var new_rank = rank;
         
      if( rank_top[0] > g_ranks[rank+1] && rank_top[1] > g_ranks[rank+1] && rank_top[2] > g_ranks[rank+1] ) {
        new_rank = rank+1;
        document.getElementById('gameOver_newrank').style.display = 'block';
        document.getElementById('gameOver_rank_image').src = _IG_GetImageUrl(IMAGES_BASE + 'ranks/rank' + (new_rank+1) +'.png');
        document.getElementById('rank_image').src = _IG_GetImageUrl(IMAGES_BASE + 'ranks/rank' + (new_rank+1) +'.png');
        document.getElementById('gameOver_rank_name').innerHTML = g_rank_names[new_rank];
        document.getElementById('rank_name').innerHTML = g_rank_names[new_rank];
        
        prefs.set('rank_top','{}');
        trackEvent('Rank Up',g_rank_names[new_rank]);          
      }
      else {
        var t = {"t":rank_top};
        prefs.set('rank_top', lpgadgets.lp.utils.jsonStringify(t));
      }

      
      for(i=0;i<topScores.length;i++) {
          document.getElementById('score_'+(i+1)).innerHTML = topScores[i]['score']+'<div class="date">'+topScores[i]['date']+'</div>'; 
      }
      
      var scores = {'scores':topScores};
      prefs.set('scores', lpgadgets.lp.utils.jsonStringify(scores));
      
      prefs.set('rank', new_rank);
		}
		
		//puase or continue the game
		this.pauseClicked = function() {
		
			if (!isStarted)
				return;
				
			if (isPaused) {
				timeoutHandle = setTimeout('trio.step()',speed[level]);
				isPaused = false;
				pauseBtnEl.style.backgroundPosition = '0px -22px';
				pauseBtnEl.getElementsByTagName('span')[0].innerHTML = '__MSG_board_pause__';
			}
			else {
				clearTimeout(timeoutHandle);
				isPaused = true;
				pauseBtnEl.style.backgroundPosition = '0px -44px';
				pauseBtnEl.getElementsByTagName('span')[0].innerHTML = '__MSG_board_play__';
			}
		}
		
		this.reportTopScore = function() {
			lp_reportScore(score);
		}

	    this.gameButtonHover = function(btn) {
		var split = btn.style.backgroundPosition.split(' ');
		btn.style.backgroundPosition = '0px '+split[1];
	    }

	    this.gameButtonOut = function(btn) {
		var split = btn.style.backgroundPosition.split(' ');
		btn.style.backgroundPosition = '-85px '+split[1];
	    }
	}
	
	function handleKey(e) {
		var keynum = 0;
		if(window.event) {
			keynum = window.event.keyCode;
		}
		else if(e.which) {
			keynum = e.which;
		}
		trio.keyPressed(keynum);
		
		
		return false;
	}

	_IG_RegisterOnloadHandler( function() {
		trio = new Trio();
		trio.init();
		
		_IG_AdjustIFrameHeight();
				
		var offset = $lp('#container').offset();
		var gownd = $lp('#gameOverWindow');
		gownd.css({'left': (71+offset.left)+'px','top': (56+offset.top)+'px'});
    
		$lp(document).keydown(function(e){return trio.keyPressed(e.which)});		
	});	
	_IG_Analytics("UA-345375-1", "/trio_canvas");
</script>

<center>
<div style="margin: 10px 0px 0px 0px; width: 760px; height: 106px; background:url(http://cdn.labpixies.com/infra/images/ad_unit_bg_760.png);" id="gadget_ad" align="center">
	<div style="height:8px; font-size:1px;"></div>
	<div>
	  <script type="text/javascript">
      GA_googleFillSlot("trio_leaderboard_top");
    </script>
	</div>
	<div style="height:8px; font-size:1px;"></div>
</div>
<div style="height:10px; font-size:1px;"></div>
<div id="container">
 <table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td style="width:520px;" valign="top">
        <table border="0" cellspacing="0">
        <tr>
        <td>
        <div id="main">
          <div style="position:absolute;z-index:10;left:102px;top:157px;width:223px;overflow:hidden">
            <div style="width:100%;float:left;">
              <div style="float:left;position:relative;left:50%;">
                <div id="playnow" style="position:relative;right:50%;" onclick="trio.init(); trio.start(); this.style.display='none';">
                  <div id="playnow_left">__MSG_click_play__</div>
                  <div id="playnow_right">&nbsp;</div>
                </div>
              </div>
            </div>
          </div>
        	<div id="startBtn" onClick="trackEvent('New','Button'); document.getElementById('playnow').style.display='none';trio.init(); trio.start(); " onmouseover="trio.gameButtonHover(this)" onmouseout="trio.gameButtonOut(this)" ><span>__MSG_board_new__</span></div>
          <div id="pauseBtn" onClick="trackEvent('Pause/Play', 'Button'); trio.pauseClicked();" onmouseover="trio.gameButtonHover(this)" onmouseout="trio.gameButtonOut(this)" ><span>__MSG_board_pause__</span></div>
        	<div id="label_score">__MSG_board_score__</div>
        	<div id="score"></div>
        	<div id="label_level">__MSG_board_level__</div>
        	<div id="level"></div>
        	<div id="label_next">__MSG_board_next__</div>
        	<div id="next_ball_1" class="next_ball image_balls" style="visibility:hidden"></div>
        	<div id="next_ball_2" class="next_ball image_balls" style="visibility:hidden"></div>
        	<div id="next_ball_3" class="next_ball image_balls" style="visibility:hidden"></div>
        	<img id="bonus" />
        
        	<table id="game_table" cellspacing="0" cellpadding="0">
        	<script type="text/javascript">
        	   var row,col
        		 for (row=0;row < ROW_NUM; row++) {
        										
        		 document.write('<tr>');
        		 for (col=0;col<COL_NUM; col++) {
        				document.write('<td id="block'+row+'_'+col+'" width="17" height="17" style="visibility:hidden" class="image_balls"><img style="visibility:hidden" width="17" height="17"/></td>');
        				}
        				document.write('</tr>');
            }										
          </script>	
          </table>
        </div>
        </td><td style="vertical-align:top;">
        <div id="top_scores">
          <div id="top_scores_title">__MSG_my_top_scores__</div>
          <div id="tease" style="display:none;background:white;text-align:left;font-size:12px;height:182px;padding-right:30px;">&nbsp;</div>
          <div id="score_1" class="score">&nbsp;</div>
          <div id="score_2" class="score">&nbsp;</div>
          <div id="score_3" class="score">&nbsp;</div>
          <div id="score_4" class="score">&nbsp;</div>
          <div id="score_5" class="score">&nbsp;</div>
          <div id="rank">
            <img id="rank_image" style="float:left;display:inline;margin-right:5px;" />
            <div style="line-height:22px;">__MSG_my_rank__</div>
            <div id="rank_name"></div>
          </div>
          <div id="logo"></div>
        </div>
        </td>
        </tr>
        </table>
      </td>
      <td style="width:240px;" align="right" valign="top">
        <div class="ads_margin_top"></div>
        <div style="width:200px; margin-bottom:10px;">
            <script type="text/javascript">
              GA_googleFillSlot("trio_custom_1");
            </script>
        </div>
        <div style="width:200px; margin-bottom:10px;">
            <script type="text/javascript">
              GA_googleFillSlot("trio_custom_2");
            </script>
        </div>
        <div style="width:200px;">
            <script type="text/javascript">
              GA_googleFillSlot("trio_box");
            </script>
        </div>
      </td>
    </tr>
</table>
<div id="gameOverWindow">
  <div id="gameOverTitle">
    __MSG_img_game_over__
  </div>
  <div id="gameOver_newtop">
    __MSG_new_top_score__
  </div>
  <div id="gameOver_newtop_2"></div>
  <div id="gameOver_newrank">
    __MSG_new_rank__
    <table border="0" cellspacing="0" style="margin:0 auto;margin-top:4px">
      <tr>
        <td><img id="gameOver_rank_image" /></td>
        <td style="vertical-align:middle" id="gameOver_rank_name"></td>
      </tr>
    </table>
  </div>
  <div style="padding-left:60px;padding-right:60px;">
    <div id="gameOver_playagain" onclick="trackEvent('Play Again', 'Game Over'); trio.init(); trio.start();" onmouseover="this.style.backgroundPosition='0px 29px';" onmouseout="this.style.backgroundPosition='0px 0px';">__MSG_over_play_again__</div>
    <div id="gameOver_close" onclick="trackEvent('Close','Game Over'); this.parentNode.parentNode.style.visibility='hidden'" onmouseover="this.style.backgroundPosition='0px 29px';" onmouseout="this.style.backgroundPosition='0px 0px';">__MSG_over_close__</div>
  </div>  
</div>
<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>
</div>
</center>
<script type="text/javascript">
  _IG_Analytics("UA-345375-1", "/trio_canvas");
</script>
<iframe width="1" height="1" style="width:1px; height:1px; overflow:hidden; position:absolute; visibility:hidden;" src="http://static.labpixies.com/campaigns/trio/analytics.html"></iframe>
]]>
</Content>

<Content type="html">
	  <![CDATA[

	<title>Trio</title>
	<meta name="description" content="__MSG_description__">
	<meta name="Keywords" content="LabPixies, Gadgets, Gadget, Widget, Widgets, Personalized, Homepage, Trio, Game, Games, Fun, Cool, Colors">

<!-- Trio Module
	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.
-->

<style type="text/css">
<!--

.style4 {font-size: 1px}
.style5 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333333;
}
.gameoverLinks {
	font-family: Arial, Helvetica, sans-serif, Verdana;
	font-size: 11px;
}

.valign { vertical-align:middle; }

-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></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", "trio_txt");
</script>
<script type="text/javascript">
  GA_googleFetchAds();
</script>
<!-- END OF TAG FOR head SECTION -->

<script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>
<script type="text/javascript">

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

var IMAGES_BASE = "http://cdn.labpixies.com/campaigns/trio/images/";
var TRANSPARENT_GIF = _IG_GetImageUrl( "http://cdn.labpixies.com/images/transparent.gif" );
  
var ae;var f=20;var COL_NUM=12;var BRICK_SCORE=10;function c(){Mnm=0;score=0;jihyy=true;L=false;aa=4;ac=0;n=4;o=0;speed=new Array(600,500,400,350,300,250,200,150,100,80);T=new Array(3);g=new Array(f);j=new Array(f);B=new Array(3);Viwct=new Array(3);Strrt=false;tmpShape=new Array(3);curColor=0;U=0;Y=new Array(10);timeoutHandle=0;this.H=function(){Mnm=0;jihyy=true;L=false;Y[0]=new Image();Y[0].src=TRANSPARENT_GIF;for(col=1;col<7;col++){Y[col]=new Image();Y[col].src=_IG_GetImageUrl(IMAGES_BASE+""+col+".gif");}Y[7]=new Image();Y[7].src=_IG_GetImageUrl(IMAGES_BASE+"poof.gif");Y[8]=new Image();Y[8].src=_IG_GetImageUrl(IMAGES_BASE+"level.gif");Wiuyg=document.getElementById("pauseBtnAnch");scoreEl=document.getElementById("scoreAnch");Nnmn=document.getElementById("levelAnch");Opooo=document.getElementById("messageAnch");grtee=document.getElementById("gameOverWindow");var row=0;var col=0;for(row=0;row<f;row++){g[row]=new Array(COL_NUM);j[row]=new Array(COL_NUM);for(col=0;col<COL_NUM;col++){j[row][col]=0;g[row][col]=document.getElementById("block"+row+"_"+col);g[row][col].src=Y[0].src;}}for(row=0;row<3;row++){T[row]=document.getElementById("next_"+row);T[row].src=Y[0].src;}};this.start=function(){grtee.style.display="none";Wiuyg.src=_IG_GetImageUrl(IMAGES_BASE+"pause_button.gif");Wiuyg.focus();L=true;jihyy=false;Mnm=0;score=0;this.ag(0);aa=4;ac=0;this.setNextShape();curColor=U;this.A(Viwct,B);clearTimeout(timeoutHandle);timeoutHandle=setTimeout('ae.step()',speed[Mnm]);this.setNextShape();};this.setNextShape=function(){Viwct[0]=(Math.floor(Math.random()*6)+1);Viwct[1]=(Math.floor(Math.random()*6)+1);Viwct[2]=(Math.floor(Math.random()*6)+1);T[0].src=Y[Viwct[0]].src;T[1].src=Y[Viwct[1]].src;T[2].src=Y[Viwct[2]].src;};this.redrawBoard=function(){var row=0;var col=0;for(row=0;row<f;row++){for(col=0;col<COL_NUM;col++){g[row][col].src=Y[j[row][col]].src;}}};this.Cawedr=function(shapeAr,ab,ad,af){var row=0;var col=0;n=ab;o=ad;Strrt=true;g[ad][ab].src=Y[shapeAr[0]].src;g[ad+1][ab].src=Y[shapeAr[1]].src;g[ad+2][ab].src=Y[shapeAr[2]].src;if(af){j[ad][ab]=shapeAr[0];j[ad+1][ab]=shapeAr[1];j[ad+2][ab]=shapeAr[2];Strrt=false;}};this.m=function(){if(Strrt){g[o][n].src=Y[0].src;g[o+1][n].src=Y[0].src;g[o+2][n].src=Y[0].src;}};this.I=function(shapeAr,ab,ad){if(j[ad][ab]!=0)return true;if(j[ad+1][ab]!=0)return true;if(j[ad+2][ab]!=0)return true;return false;};this.klnyt=function(shapeAr,ab,ad){if(ab>=COL_NUM)return false;if(ab<0)return false;if(ad<0)return false;if(ad>f-3)return false;return true;};this.step=function(){if(!L||jihyy){return;}if(this.klnyt(B,aa,ac+1)&&(!this.I(B,aa,ac+1))){this.m();ac=ac+1;this.Cawedr(B,aa,ac,false);timeoutHandle=setTimeout('ae.step()',speed[Mnm]);}else{this.Cawedr(B,aa,ac,true);this.k();}};this.z=function(){ac=0;aa=(Math.floor(Math.random()*6)+3);this.A(Viwct,B);this.setNextShape();timeoutHandle=setTimeout('ae.step()',speed[Mnm]);if(this.I(B,aa,ac))this.iuyhtrt();};this.k=function(){var row=0;var col=0;var nextcol=0;var nextrow=0;var helpIndex=0;var matchNum=0;var r;var v;for(row=0;row<f;row++){for(col=0;col<COL_NUM;col++){r=j[row][col];if(r>9)r=r/10;v=r*10;if(r>0){matchNum=0;for(nextcol=col;nextcol<COL_NUM;nextcol++){if((j[row][nextcol]==r)||(j[row][nextcol]==v))matchNum++;else break;}if(matchNum>2){for(nextcol=0;nextcol<matchNum;nextcol++)j[row][nextcol+col]=v;}matchNum=0;for(nextrow=row;nextrow<f;nextrow++){if((j[nextrow][col]==r)||(j[nextrow][col]==v))matchNum++;else break;}if(matchNum>2){for(nextrow=0;nextrow<matchNum;nextrow++)j[nextrow+row][col]=v;}matchNum=0;for(helpIndex=0;helpIndex<5;helpIndex++){nextrow=row-helpIndex;nextcol=col+helpIndex;if((nextrow>=0)&&(nextcol<COL_NUM)){if((j[nextrow][nextcol]==r)||(j[nextrow][nextcol]==v))matchNum++;else break;}else break;}if(matchNum>2){for(helpIndex=0;helpIndex<matchNum;helpIndex++)j[row-helpIndex][helpIndex+col]=v;}matchNum=0;for(helpIndex=0;helpIndex<5;helpIndex++){nextrow=row-helpIndex;nextcol=col-helpIndex;if((nextrow>=0)&&(nextcol>=0)){if((j[nextrow][nextcol]==r)||(j[nextrow][nextcol]==v))matchNum++;else break;}else break;}if(matchNum>2){for(helpIndex=0;helpIndex<matchNum;helpIndex++)j[row-helpIndex][col-helpIndex]=v;}}}}var numOfBricksCleared=0;for(row=0;row<f;row++){for(col=0;col<COL_NUM;col++){if(j[row][col]>9){j[row][col]=7;numOfBricksCleared++;}}}if(numOfBricksCleared>0){this.redrawBoard();setTimeout('ae.w();',speed[Mnm]/2);this.ag(numOfBricksCleared);}else{this.z();}};this.w=function(){var row=0;var col=0;var rowin=0;var lastZero=0;for(col=0;col<COL_NUM;col++){for(row=19;row>-1;row--){if((j[row][col]==0)||(j[row][col]==7)){lastZero=row;j[row][col]=0;for(rowin=(row-1);rowin>-1;rowin--){if((j[rowin][col]!=0)&&(j[rowin][col]!=7)){j[lastZero][col]=j[rowin][col];j[rowin][col]=0;break;}}}}}this.redrawBoard();this.k();};this.removeMessage=function(){Opooo.src=Y[0].src;};this.ag=function(numOfBricksCleared){var prevLevel=Mnm;score=score+(5*numOfBricksCleared*numOfBricksCleared);Mnm=Math.floor(score/300)%10;if(prevLevel!=Mnm){Opooo.src=Y[8].src;setTimeout('ae.removeMessage();',2000);}scoreEl.innerHTML=""+score;Nnmn.innerHTML=""+(Mnm+1);};this.A=function(sourceS,targetS){targetS[0]=parseInt(sourceS[0],10);targetS[1]=parseInt(sourceS[1],10);targetS[2]=parseInt(sourceS[2],10);};this.ffrere=function(Zfetre){var temp;temp=Zfetre[0];Zfetre[0]=Zfetre[2];Zfetre[2]=Zfetre[1];Zfetre[1]=temp;};this.keyPressed=function(keynum){if(!L)return false;if(jihyy)return false;switch(keynum){case 37:case 52:case 65460:this.Q();break;case 38:case 56:case 65464:this.rotate();break;case 39:case 54:case 65462:this.Rsrerrrt();break;case 40:case 50:case 53:case 65458:case 65461:this.Pqoop();break;default:return true;} return false;};this.Pqoop=function(){var row;for(row=ac;row<20;row++){if(this.klnyt(B,aa,row)&&(!this.I(B,aa,row))){this.m();ac=row;this.Cawedr(B,aa,ac,false);}else{return;}}};this.Rsrerrrt=function(){if(this.klnyt(B,aa+1,ac)&&(!this.I(B,aa+1,ac))){this.m();aa=aa+1;this.Cawedr(B,aa,ac,false);}};this.Q=function(){if(this.klnyt(B,aa-1,ac)&&(!this.I(B,aa-1,ac))){this.m();aa=aa-1;this.Cawedr(B,aa,ac,false);}};this.rotate=function(){this.A(B,tmpShape);this.ffrere(tmpShape);if(this.klnyt(tmpShape,aa,ac)&&(!this.I(tmpShape,aa,ac))){this.A(tmpShape,B);this.m();this.Cawedr(B,aa,ac,false);}};this.iuyhtrt=function(){L=false;clearTimeout(timeoutHandle);var t1=$lp("#topMainTableAnch").offset().top;var l1=$lp("#topMainTableAnch").offset().left;grtee.style.top=80+t1+"px";grtee.style.left=24+l1+"px";grtee.style.display="";};this.X=function(){if(!L)return;if(jihyy){Wiuyg.src=_IG_GetImageUrl(IMAGES_BASE+"pause_button.gif");timeoutHandle=setTimeout('ae.step()',speed[Mnm]);jihyy=false;}else{Wiuyg.src=_IG_GetImageUrl(IMAGES_BASE+"play_button.gif");clearTimeout(timeoutHandle);jihyy=true;}};this.rcpt = function() {lp_reportScore(score);}};
</script>
</head>

<center>
  <div style="height:10px; font-size:1px;"></div>
	<table id="topMainTableAnch" width="246" cellspacing="0" border="0" cellpadding="0">
		<tr style="height:252px;">
			<td width="246" height="252" colspan="2">
				<table width="246" height="252" border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td id="bg_td">
					<table width="246" height="252" border="0" cellpadding="0" cellspacing="0">
					<tr>
						<td width="6">&nbsp;</td>
						<td width="144">
						<table width="144" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td height="6"><span class="style4">&nbsp;</span></td>
						</tr>
						<tr valign="top">
							<td height="240">
								<table border="0" width="144" cellpadding="0" cellspacing="0" height="240">
									<script type="text/javascript">

										var row,col;for(row=0;row<f;row++){document.write('<tr>');for(col=0;col<COL_NUM;col++){document.write('<td width="12" height="12" class="style4"><img id="block'+row+'_'+col+'" src="'+TRANSPARENT_GIF+'" width="12" height="12" /></td>');}document.write('</tr>');} </script>
								</table>
							</td>
						</tr>
						<tr>
							<td height="6"><span class="style4">&nbsp;</span></td>
						</tr>
						</table></td>
						<td width="11">&nbsp;</td>
						<td width="74" valign="top"><table width="74" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td height="14" class="style4">&nbsp;</td>
						</tr>
						<tr>
							<td><table width="74" border="0" cellspacing="0" cellpadding="0">
							<tr>
								<td><img id="pauseBtnAnch" onClick="ae.X();lp_trackEvent('pausePlayButt');" width="37" height="18" /></td>
								<td><img title="__MSG_img_new__" id="newBtnAnch" onClick="ae.H();ae.start();lp_trackEvent('newButt');" width="37" height="18" /></td>
							</tr>
							</table></td>
						</tr>
						<tr>
							<td height="25">&nbsp;</td>
						</tr>
						<tr>
							<td height="18"><div align="center"><span id="scoreAnch" class="style5">0</span></div></td>
						</tr>
						<tr>
							<td height="22">&nbsp;</td>
						</tr>
						<tr>
							<td height="18"><div align="center"><span id="levelAnch" class="style5">1</span></div></td>
						</tr>
						<tr>
							<td height="22">&nbsp;</td>
						</tr>
						<tr>
							<td height="18">&nbsp;</td>
						</tr>
						<tr>
							<td height="30">&nbsp;</td>
						</tr>
						<tr >
							<td height="12" align="center" valign="top">
							
								<table border="0" width="36" height="12" cellpadding="0" cellspacing="0"  ID="Table2">
									<tr>
										<td width="12" height="12" class="style4"><img id="next_0" width="12" height="12" /></td>
										<td width="12" height="12" class="style4"><img id="next_1" width="12" height="12" /></td>
										<td width="12" height="12" class="style4"><img id="next_2" width="12" height="12" /></td>
									</tr>
								</table>
							</td>
						</tr>
						<tr>
							<td height="13">&nbsp;</td>
						</tr>
						
						<tr>
							<td height="19"><img id="messageAnch" width="74" height="19" /></td>
						</tr>
						<tr>
							<td height="11" class="style4">&nbsp;</td>
						</tr>
						</table></td>
						<td width="11">&nbsp;</td>
					</tr>
					</table></td>
				</tr>
				</table>
			</td>
		</tr>
	</table>

<div style="text-align:center;">
	<!-- PUT THIS TAG IN DESIRED LOCATION OF SLOT trio_txt -->
	<script type="text/javascript">
	  GA_googleFillSlot("trio_txt");
	</script>
	<!-- END OF TAG FOR SLOT trio_txt -->
</div>
							
</center>
	
<table border="0" width="202" height="105" id="gameOverWindow" style="z-index:122; display:none; position:absolute;" cellpadding="0" cellspacing="0">
	<tr valign="top">
		<td height="40" align="center">&nbsp;</td>
	</tr>
	<tr valign="top">
		<td height="21" align="center" class="gameoverLinks" style="cursor:pointer;color:#EB8907;" onClick="ae.H();ae.start();lp_trackEvent('playAgain');">__MSG_again__</td>
	</tr>
	<!--
	<tr valign="top">
		<td height="21" align="center" class="gameoverLinks" style="cursor:pointer; color:#C2D139;" onClick="ae.rcpt();lp_trackEvent('topScore');">__MSG_top_scores__</a></td>
	</tr>
	-->
	<tr valign="top">
		<td height="23" align="center"><a class="gameoverLinks" target="_blank" style="color:#3DADE1;" href="http://www.labpixies.com/gadgets/" onclick="lp_trackEvent('moreGames');">__MSG_more_games__</a></td>
	</tr>			
</table>
<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>
<iframe width="1" height="1" style="width:1px; height:1px; overflow:hidden; position:absolute; visibility:hidden;" src="http://static.labpixies.com/campaigns/trio/analytics.html"></iframe>
<script type="text/javascript">
 
  _IG_RegisterOnloadHandler(function() {
	_IG_AdjustIFrameHeight();
	ae=new c();
	ae.H();
	
	document.getElementById('bg_td').style.background = "transparent url("+_IG_GetImageUrl(IMAGES_BASE+'background.gif')+") 0px 0px no-repeat";
	document.getElementById('pauseBtnAnch').src = _IG_GetImageUrl(IMAGES_BASE+'pause_button.gif');
	document.getElementById('newBtnAnch').src = _IG_GetImageUrl(IMAGES_BASE+'new_button.gif');
    document.getElementById('messageAnch').src = TRANSPARENT_GIF;
	document.getElementById('gameOverWindow').style.background = "transparent url("+_IG_GetImageUrl(IMAGES_BASE+'gameover_plate.gif')+") 0px 0px no-repeat";
	document.getElementById('next_0').src = TRANSPARENT_GIF;
	document.getElementById('next_1').src = TRANSPARENT_GIF;
	document.getElementById('next_2').src = TRANSPARENT_GIF;
	
	$lp(document).keydown(function(e){return ae.keyPressed(e.which)});
  
  });
  
  //var mTopScores = _IG_GetCachedUrl("http://cdn.labpixies.com/top_score/lp_top_score.js");
  //document.write('<scr'+'ipt type="text/javascript" src="'+mTopScores+'"></scr'+'ipt>');


</script>



<script type="text/javascript">
  _IG_Analytics("UA-345375-1", "/trio_v1");
  pageTracker = _gat._getTracker("UA-345375-1");
  pageTracker._initData();

  function lp_trackEvent(evt) {
    try {
      pageTracker._trackEvent('Trio V1', evt);
     } catch (ee) {}
  }
</script>
            ]]>
	</Content>
</Module>
