<?xml version="1.0" encoding="UTF-8" ?>
<Module>

	<!-- 
	Flickr Gadget
	Design & Code: LabPixies
	All subsequent code and resources used are proprietary of LabPixies unless directly stated otherwise.
	Copyright (C) 2006 LabPixies.    
	www.labpixies.com

	This work is licensed under the Creative Commons Attribution-NonCommercial-NoDerivs 2.5 License.
	To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-nd/2.5/ or
	send a letter to Creative Commons, 543 Howard Street, 5th Floor, San Francisco, California, 94105, USA.
	-->
	
	<ModulePrefs 
		height="346"
		author="LabPixies"
		author_email="info@labpixies.com"
		description="__MSG_desc__" 
		thumbnail="http://www.labpixies.com/campaigns/flickr/images/thumbnail.jpg"
		screenshot="http://www.labpixies.com/campaigns/flickr/images/screenshot.jpg"
		directory_title="__MSG_title__"
		title="__MSG_title__"
		title_url="http://www.labpixies.com" >
		
		<Locale messages="http://www.labpixies.com/campaigns/flickr/i19/all_all.xml"/>
		<Locale lang="es" messages="http://www.labpixies.com/campaigns/flickr/i19/es_all.xml"/>		
		<Locale lang="de" messages="http://www.labpixies.com/campaigns/flickr/i19/de_all.xml"/>
		<Locale lang="fr" messages="http://www.labpixies.com/campaigns/flickr/i19/fr_all.xml"/>
		<Locale lang="it" messages="http://www.labpixies.com/campaigns/flickr/i19/it_all.xml"/>
		<Locale lang="ja" messages="http://www.labpixies.com/campaigns/flickr/i19/ja_all.xml"/>
		<Locale lang="nl" messages="http://www.labpixies.com/campaigns/flickr/i19/nl_all.xml"/>
		<Locale lang="pl" messages="http://www.labpixies.com/campaigns/flickr/i19/pl_all.xml"/>
		<Locale lang="pt-PT" messages="http://www.labpixies.com/campaigns/flickr/i19/pt_all.xml"/>
		<Locale lang="pt-BR" messages="http://www.labpixies.com/campaigns/flickr/i19/pt_all.xml"/>
		<Locale lang="zh-CN" messages="http://www.labpixies.com/campaigns/flickr/i19/zh_cn_all.xml"/>
		<Require feature="setprefs" />
		<Require feature="analytics" /> 
	</ModulePrefs>
	
	<UserPref name="mode" 			datatype="hidden" 			default_value="random" />
	<UserPref name="tags_value1"	datatype="hidden"			default_value="" /> 
	<UserPref name="username_value" datatype="hidden"			default_value="" /> 
	<UserPref name="refresh"		datatype="hidden"			default_value="30" /> 
	
<Content type="html"> <![CDATA[
<title>Flickr Slides</title>
<style type="text/css">
	body, html {
		margin: 0;
		margin: 0;
		padding: 0;
	}
	.style1 {font-size: 1px}
	.style2 {
		font-family: verdana,Arial, Helvetica, sans-serif;
		font-size: 9px;
		color: #0063dc;
		text-decoration:none;
	}
	.style3 {
		color: #6b7278;
		font-size: 10px;
		font-family: Arial, Helvetica, sans-serif;
	}
	.style4 {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
		font-weight: bold;
		color: #333333;
	}
	.style5 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #0063DC;
	text-decoration:none;
	}
	.scroller{
		cursor: hand; 
		text-decoration: none;
	}
	
	.style6Err {
		color: #6b7278;
		font-size: 10px;
		font-family: Arial, Helvetica, sans-serif;
	}
	
	.text {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 11px;
		color: #3e4246;
		height: 17px;
	}
	
	.title {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 13px;
		font-weight: bold;
		color: #ff0084;
}
	.style6Err:visited{color:#AB156C;}
	.style6Err:active{color:#AB156C;}
	.style6Err:hover{color:#AB156C; text-decoration: underline;}

	
	#tdad a:link    {text-decoration:none;color:#006CB3;font-family: Verdana, Arial, sans-serif;}
	#tdad a:visited {text-decoration:none;color:#006CB3;font-family: Verdana, Arial, sans-serif;}
	#tdad a:hover   {text-decoration:underline;color:#006CB3;font-family: Verdana, Arial, sans-serif;}
	#tdad a:active  {text-decoration:underline;color:#006CB3;font-family: Verdana, Arial, sans-serif;}
</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", "flickr_slides_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 = 40;
	
	var pageTracker;
		
	var IMAGES_BASE = 'http://cdn.labpixies.com/campaigns/flickr/images/';
	
	function get_image(src)
	{
		return _IG_GetImageUrl(IMAGES_BASE + src);
	} 
   
	//----------------------------
	// preload
	//----------------------------
	var img_0 = new Image();  img_0.src= _IG_GetImageUrl("http://cdn.labpixies.com/campaigns/flickr/images/scramble_button_roll.png");
	var img_1 = new Image();  img_1.src= _IG_GetImageUrl("http://cdn.labpixies.com/campaigns/flickr/images/photos_button_roll.png");
	var img_2 = new Image();  img_2.src= _IG_GetImageUrl("http://cdn.labpixies.com/campaigns/flickr/images/photos_button.png");
	var img_3 = new Image();  img_3.src= _IG_GetImageUrl("http://cdn.labpixies.com/campaigns/flickr/images/play_button_roll.png");
	var img_4 = new Image();  img_4.src= _IG_GetImageUrl("http://cdn.labpixies.com/campaigns/flickr/images/prev_pict_button_roll.png");
	var img_10 = new Image();  img_10.src= _IG_GetImageUrl("http://cdn.labpixies.com/campaigns/flickr/images/next_pict_button.png");
	var img_11 = new Image();  img_11.src= _IG_GetImageUrl("http://cdn.labpixies.com/campaigns/flickr/images/next_pict_button_roll.png");
	var img_5 = new Image();  img_5.src= _IG_GetImageUrl("http://cdn.labpixies.com/campaigns/flickr/images/steps_title.png");
	var img_6 = new Image();  img_6.src= _IG_GetImageUrl("http://cdn.labpixies.com/campaigns/flickr/images/pause_button.png");
	var img_7 = new Image();  img_7.src= _IG_GetImageUrl("http://cdn.labpixies.com/campaigns/flickr/images/pause_button_roll.png");
	var img_8 = new Image();  img_8.src= _IG_GetImageUrl("http://cdn.labpixies.com/campaigns/flickr/images/youdidit_plate.png");
	var img_9 = new Image();  img_9.src= _IG_GetImageUrl("http://cdn.labpixies.com/campaigns/flickr/images/steps_title.png");
	
	
	//----------------------------
	// Globals
	//----------------------------
	
	var play_status			= 0;
	var mode				= 0;
	var current_feed		= "";
	var user_id				= 0;
	var user_tags			= "";
	var scroll_speed		= 10;
	var prefs__MODULE_ID__;
	var img_temp			= new Image();  
	var imgArr				= new Array();
	var imgArrFileName		= new Array();
	var numOfImagesInFeed	= 0;
	var curImage			= -1;
	var threadNum			= 0;
	var scramble_click		= 0;
	var	first_time_load		= 1;
	
		
	function show(s_id, display) {
		if( typeof(display) == 'undefined') {
			display = 'block'
		}
		_gel(s_id).style.display = display;
				
	}

	function hide(s_id) {
		_gel(s_id).style.display = 'none';
	}
	
	function load_images()
	{
		$lp('.transparent').attr('src',get_image('transparent.gif'));
		
		$lp('#save').attr('src',get_image('save_button.png'));
		$lp('#cancel').attr('src',get_image('cancel_button_off.png'));
		$lp('#prev').attr('src',get_image('prev_pict_button.png'));
		$lp('#play_button_img').attr('src',get_image('play_button.png'));
		$lp('#next').attr('src',get_image('next_pict_button.png'));
		$lp('#steps_title').attr('src',get_image('steps_title.png'));
		$lp('#scramble').attr('src',get_image('scramble_button.png'));
		
		$lp('#bg_1').css('background-image','url('+get_image('background.png')+')');
		$lp('#scroll_background').attr('background',get_image('scroll_background.png'));
		$lp('#resultWindowPuzAnch').attr('background',get_image('youdidit_plate.png'));								
	}
	
	function save_prefs() {
		var query_st;
		if (_gel('tags').checked) {
			query_st = _gel('tag_input').value;
			prefs__MODULE_ID__.set("tags_value1", query_st);
			prefs__MODULE_ID__.set('mode', 'tags');
		}
		if (_gel('user').checked) {
			query_st = _gel('user_input').value;
			prefs__MODULE_ID__.set("username_value", query_st);
			prefs__MODULE_ID__.set('mode', 'user');
		}
		if (_gel('random').checked) {
			prefs__MODULE_ID__.set('mode', 'random');
		}
		hide('settings');
		_gel('setting').innerHTML = '__MSG_settings__';
		/* Init prefs with the new source */
		initModule__MODULE_ID__();
		
		pageTracker._trackEvent('Flickr','SaveSettings');
	}
	
	function change_mode(mode) {
		switch (mode) {
			case 0 :
				_gel('tag_input').disabled = true;
				_gel('user_input').disabled = true;
				_gel('user_input').value = '';
				_gel('tag_input').value = '';
				break;
			case 1 :
				_gel('user_input').value = '';
				_gel('tag_input').disabled = false;
				_gel('user_input').disabled = true;
				break;
			default :
				_gel('tag_input').value = '';
				_gel('tag_input').disabled = true;
				_gel('user_input').disabled = false;
		}
	}
	
	function xmlError(e) {
		setErrorMsg();                
	}
		
	function setErrorMsg(){
		
		//_gel("now_playing_label").innerHTML = "Now Paused";
		_gel("image_name_label").innerHTML = "Error fetching content";
		
		if(mode=="user"){
			_gel("text_message_show").innerHTML = "User not found.<br><br>make sure you enter the correct Screen Name<br><br>to find your Screen Name, login to Flickr <br>and go to: <a style='color:#AB156C;' target='_blank' href='http://www.flickr.com/account/'>http://www.flickr.com/account/</a><br><br>";
			showCellContent("text_message_show");
		}
		else{
		
			_gel("text_message_show").innerHTML = "<a class='style3' target='_blank' href='http://www.labpixies.com/gadget_page.php?ID=40'>Error fetching content</a>";
			showCellContent("text_message_show");
		}
	}
	
	function showCellContent(elName) {
		
		try {
			imagePuzzle.closeGameOver();
		} catch (ee) {}
		_gel("slide_show").style.display = "none";
		_gel("puzzle_div").style.display = "none";
		_gel("text_message_show").style.display = "none";
		
		_gel(elName).style.display = "block";
		
	}
	
	//----------------------------
	//parse the rss
	//----------------------------
	
	function parseRSS(response) {

		if (response == null || typeof(response) != "object" || response.firstChild == null) {
			setErrorMsg();
			return;
		}
		
		numOfImagesInFeed = 0;
				
		var imgUrl = "";
		var imgTitle = "";
		var st = "";
		var index = 0;
		var indexEnd = 0;
		var item = null; 
		var itemList;
		
		//----------------------------
		// All  Modes
		//----------------------------
		
		if(mode=="random" ||mode=="tags" || mode=="user"){
		
			var itemList = response.getElementsByTagName("photo");
			for (var i = 0; i < itemList.length; i++) { 
				 
				//get image src
				imgUrl = "http://static.flickr.com/" + itemList.item(i).getAttribute("server") + "/" + itemList.item(i).getAttribute("id") + "_" + itemList.item(i).getAttribute("secret") + "_m.jpg";
				imgArr[numOfImagesInFeed] = imgUrl;
				
				//image title
				var img_title = itemList.item(i).getAttribute("title");
				if (img_title.length > 28){
						img_title = img_title.substring(0,25)+"...";
				}
				
				//image url
				var url_str = "http://www.flickr.com/photos/" + itemList.item(i).getAttribute("owner") + "/" + itemList.item(i).getAttribute("id");
				var all_link = "<a class='style2' target='_blank' href='" + url_str + "' >" + img_title + "</a>"
				
				//image name
				//imgArrFileName[numOfImagesInFeed]  = itemList.item(i).getAttribute("title");
				imgArrFileName[numOfImagesInFeed]  = all_link;
				
				//increment couner
				numOfImagesInFeed++;
			} 
		} 
		
		//random first image
		curImage = Math.floor(Math.random()*numOfImagesInFeed);
		//alert(curImage);
		
		
		//first time to play
		if(h_time){
			try{clearTimeout(h_time);}catch(e){}
		}
		else{
			playButtonClick();
		}
		viewImagesManager();
	}

	//----------------------------
	//fade images in & out 
	//----------------------------
	
	var fade_steps = 0;
	var is_inside  = 0;
	
	function enableFadeAgain(){
		fade_steps=0;
	}
	
	function fadeImage(){
		
		if(fade_steps<0){
			setTimeout(enableFadeAgain,1000);
			return;
		}
		
		//semaphore
		if(is_inside==1)
			setTimeout(fadeImage,50);
		else
			is_inside=1;
	
		//fade out
		if(fade_steps<=10){
			var cur_image = _gel("image_space_src");
			var object = cur_image.style;
			var temp_opacity		= 100-(fade_steps*10);
			
			object.opacity			= temp_opacity/100;
			object.MozOpacity		= temp_opacity/100;
			object.KhtmlOpacity		= temp_opacity/100;
			object.filter = "alpha(opacity=" + temp_opacity + ")";
			
			if(fade_steps==10){
				_gel("image_space_src").src = imgArr[curImage];
			}
			
			fade_steps=fade_steps+1;
			
			setTimeout(fadeImage,50);
		}
		
		//fade in
		if(fade_steps>10 && fade_steps!=20){
			
			var cur_image = _gel("image_space_src");
			var object = cur_image.style;
			var temp_opacity		= (fade_steps-10)*10;
			
			object.opacity			= temp_opacity/100;
			object.MozOpacity		= temp_opacity/100;
			object.KhtmlOpacity		= temp_opacity/100;
			object.filter = "alpha(opacity=" + temp_opacity + ")";
			
			fade_steps=fade_steps+1;
			
			setTimeout(fadeImage,90);
		}
		
		//exit fade
		if(fade_steps==20){
			fade_steps=-1;
		}
		
		//semaphore
		is_inside=0;
	}

	//----------------------------
	// display images
	//----------------------------
	
	//timer
	var last_time	= 0
	var cur_time	= 0;
	var h_time 		= 0;
	function viewImagesManager(){
	
		if (numOfImagesInFeed == 0)
			return;
			
		//check if playing
		if(play_status==1) {
			
			var newDateTimeObj=new Date(); 
			cur_time = newDateTimeObj.getTime();
			
			if( (cur_time - last_time) >= (scroll_speed*1000) ) {
				//show
				displayNextImage();
				last_time = cur_time;
			}
		}
		
		h_time = setTimeout(viewImagesManager,1000);  
	}
	
	
	//show the image
	function displayNextImage() {
		
		curImage = (curImage+1)%numOfImagesInFeed;
		
		//image src
		//_gel("image_space_src").src = imgArr[curImage];
		fadeImage();
		
		//image name
		_gel("image_name_label").innerHTML = imgArrFileName[curImage];
		
		//pre load next image
		img_temp.src= imgArr[(curImage+1)%numOfImagesInFeed];
	}

	function parseCurrentFeed(url){
		
		_IG_FetchXmlContent(url, parseRSS);
		//alert(url);
	}
	
	//----------------------------
	// buttons
	//----------------------------
	
	function scrambleButtonClick(){
		//scramble
		if(scramble_click==0){
			
			showCellContent("puzzle_div");
			
			//pause
			play_status=0;
			//_gel("now_playing_label").innerHTML = "Now Paused";
			threadNum = 0;
			
			//hide panel
			_gel("buttons_panel").style.display = "none";
			
			//show game panel
			_gel("game_panel").style.display = "inline";
			
			//init game
			imagePuzzle = new ImagePuzzle();
			imagePuzzle.init();
			//imagePuzzle.firstClick = false;
			imagePuzzle.drawPuzzle();
			scramble_click=1;
		}
		//back to images
		else{
			
			showCellContent("slide_show");
			
			scramble_click=0;
			playButtonClick();
			
			//show current image
			_gel("image_space_src").src = imgArr[curImage];
			
			//show panel
			_gel("buttons_panel").style.display = "inline";
			
			//hide game panel
			_gel("game_panel").style.display = "none";
		}
	}
	
	function scrambleButtonHover(num){
		//back to photo slide show
		if(scramble_click==1){
			if(num==0){
				_gel("scramble").src = _IG_GetImageUrl("http://cdn.labpixies.com/campaigns/flickr/images/photos_button.png");
			}
			else{
				_gel("scramble").src = _IG_GetImageUrl("http://cdn.labpixies.com/campaigns/flickr/images/photos_button_roll.png");
			}
		}
		//play scrambled image
		else{
			if(num==0){
				_gel("scramble").src = _IG_GetImageUrl("http://cdn.labpixies.com/campaigns/flickr/images/scramble_button.png");
			}
			else{
				_gel("scramble").src = _IG_GetImageUrl("http://cdn.labpixies.com/campaigns/flickr/images/scramble_button_roll.png");
			}
		}
	}
	
	function prevNextButtonClick(num){
		
		//pause
		play_status=0;
		_gel("play_button_img").src = _IG_GetImageUrl("http://cdn.labpixies.com/campaigns/flickr/images/play_button.png");
		//_gel("now_playing_label").innerHTML = "Now Paused";
		
		if(numOfImagesInFeed<1)
			return;
			
		curImage = (curImage+num);
		if(curImage <0 ){
			curImage = numOfImagesInFeed-1;
		}
		else{
			if(curImage == numOfImagesInFeed ){
				curImage = 0;
			}
		}
		//alert(curImage); 
		
		//image src
		_gel("image_space_src").src = imgArr[curImage];
				
		//pre load next image
		img_temp.src= imgArr[(curImage+1)%numOfImagesInFeed];
		
		//image name
		_gel("image_name_label").innerHTML = imgArrFileName[curImage];
		
		threadNum = 0;
	}
	
	function playButtonClick(){
		
		if(play_status==0){
			play_status=1;
			_gel("play_button_img").src = _IG_GetImageUrl("http://cdn.labpixies.com/campaigns/flickr/images/pause_button.png");
			//_gel("now_playing_label").innerHTML = "Now Playing";
		}
		else{
			play_status=0;
			_gel("play_button_img").src = _IG_GetImageUrl("http://cdn.labpixies.com/campaigns/flickr/images/play_button.png");
			//_gel("now_playing_label").innerHTML = "Now Paused";
		}
	}
	
	function playButtonHover(num){
		//pause
		if(play_status==1){
			if(num==0){
				_gel("play_button_img").src = _IG_GetImageUrl("http://cdn.labpixies.com/campaigns/flickr/images/pause_button.png");
			}
			else{
				_gel("play_button_img").src = _IG_GetImageUrl("http://cdn.labpixies.com/campaigns/flickr/images/pause_button_roll.png");
			}
		}
		//play
		else{
			if(num==0){
				_gel("play_button_img").src = _IG_GetImageUrl("http://cdn.labpixies.com/campaigns/flickr/images/play_button.png");
			}
			else{
				_gel("play_button_img").src = _IG_GetImageUrl("http://cdn.labpixies.com/campaigns/flickr/images/play_button_roll.png");
			}
		}
	}
	
	function refreshScrollerClick(num){
		
		//set new position
		for(i=1; i<=15 ;i++){
			_gel("refreshScrollerClick_" + i).src = _IG_GetImageUrl("http://cdn.labpixies.com/campaigns/flickr/images/transparent.gif");
		}
		_gel("refreshScrollerClick_" + num).src = _IG_GetImageUrl("http://cdn.labpixies.com/campaigns/flickr/images/scroller.gif");
		
		//update text
		var speed_str;
		if(num==1) {scroll_speed = 5;    speed_str="5 Sec";}		
		if(num==2) {scroll_speed = 10;   speed_str="10 Sec";}	
		if(num==3) {scroll_speed = 15;   speed_str="15 Sec";}	
		if(num==3) {scroll_speed = 20;   speed_str="20 Sec";}	
		if(num==4) {scroll_speed = 25;   speed_str="25 Sec";}	
		if(num==5) {scroll_speed = 30;   speed_str="30 Sec";}	
		if(num==6) {scroll_speed = 35;   speed_str="35 Sec";}	
		if(num==7) {scroll_speed = 40;   speed_str="40 Sec";}
		if(num==8) {scroll_speed = 45;   speed_str="45 Sec";}		
		if(num==9) {scroll_speed = 50;   speed_str="50 Sec";}		
		if(num==10){scroll_speed = 55;   speed_str="55 Sec";}
		if(num==11){scroll_speed = 60;   speed_str="1 Min";}
		if(num==12){scroll_speed = 120;  speed_str="2 Min";}
		if(num==13){scroll_speed = 300;  speed_str="5 Min";}
		if(num==14){scroll_speed = 900;  speed_str="15 Min";}
		if(num==15){scroll_speed = 1800; speed_str="30 Min";}
		
		_gel("speed_label_text").innerHTML = speed_str;
		
		//save current value
		try{
		prefs__MODULE_ID__.set("refresh", scroll_speed);
		}catch(e){}
		
		//refresh?
		//self.location.reload();
	}	
	
	//----------------------------
	// Init Module
	//----------------------------
	
	function initModule__MODULE_ID__(){
		
		load_images();
	
		// Get user preferences
		try{
		prefs__MODULE_ID__ = new _IG_Prefs(__MODULE_ID__);
		
		//get mode
		mode = prefs__MODULE_ID__.getString("mode");
		}catch(e){}
		//debug
		//mode="tags";
		
		if(mode=="tags"){
			_gel('tag_input').disabled = false;
			try{
			user_tags = prefs__MODULE_ID__.getString("tags_value1");
			user_tags = escape(user_tags);
			}catch(e){}
			current_feed = "http://www.flickr.com/services/rest/?api_key=26f0c3aa6affff22f579e6db0b50ffe0&method=flickr.photos.search&per_page=20&page=1&tags=" + user_tags;
			_gel('tags').checked = true;
			_IG_FetchXmlContent(current_feed,function(response) {
				if(response.getElementsByTagName('rsp').item(0).getAttribute('stat') == 'fail'){
					setErrorMsg();
				}
				else{
					if(response.getElementsByTagName('rsp').item(0).getAttribute('stat') == 'ok'){
						var ran_unrounded=Math.random()*response.getElementsByTagName('photos').item(0).getAttribute('pages');
						var page = Math.ceil(ran_unrounded);
						
						current_feed = "http://www.flickr.com/services/rest/?api_key=26f0c3aa6affff22f579e6db0b50ffe0&method=flickr.photos.search&per_page=20&page=" + page +"&tags=" + user_tags;
						
						parseCurrentFeed(current_feed);
						
						//start with image slide show mode
						showCellContent("slide_show");
					}
				}
			});
			_gel('tag_input').value = unescape(user_tags);
			_gel('user_input').value = '';
		}
				
		if(mode=="random"){
			current_feed = "http://www.flickr.com/services/rest/?per_page=20&page=1&api_key=26f0c3aa6affff22f579e6db0b50ffe0&method=flickr.interestingness.getList";
			_gel('random').checked = true;
			_IG_FetchXmlContent(current_feed,function(response) { 
				if(response.getElementsByTagName('rsp').item(0).getAttribute('stat') == 'ok'){
					var ran_unrounded=Math.random()*response.getElementsByTagName('photos').item(0).getAttribute('pages');
					var page = Math.ceil(ran_unrounded);
					
					current_feed = "http://www.flickr.com/services/rest/?per_page=20&page=" + page + "&api_key=26f0c3aa6affff22f579e6db0b50ffe0&method=flickr.interestingness.getList";
					
					parseCurrentFeed(current_feed);
					
					//start with image slide show mode
					showCellContent("slide_show");
				}
			});
		}
		
		if(mode=="user"){
			_gel('user_input').disabled = false;
			//get user name
			var user_str = prefs__MODULE_ID__.getString("username_value");
			user_str = escape(user_str);
			_gel('user').checked = true;
			_IG_FetchXmlContent('http://www.flickr.com/services/rest/?api_key=26f0c3aa6affff22f579e6db0b50ffe0&method=flickr.people.findByUsername&username=' + user_str, function(response) { 
				if(response.getElementsByTagName('rsp').item(0).getAttribute('stat') == 'fail'){
					setErrorMsg();
				}
				else{	
					user_id = response.getElementsByTagName('user').item(0).getAttribute('nsid');
					current_feed = "http://www.flickr.com/services/rest/?api_key=26f0c3aa6affff22f579e6db0b50ffe0&method=flickr.photos.search&per_page=20&page=1&user_id="+user_id;
					
					_IG_FetchXmlContent(current_feed,function(response) { 
						var rsp = response.getElementsByTagName('rsp').item(0).getAttribute('stat');
						if(rsp==null || rsp == 'fail'){
							setErrorMsg();
						}
						if(rsp == 'ok'){
							var ran_unrounded=Math.random()*response.getElementsByTagName('photos').item(0).getAttribute('pages');
							var page = Math.ceil(ran_unrounded);
							
							if(page==response.getElementsByTagName('photos').item(0).getAttribute('pages')){
								current_feed = "http://www.flickr.com/services/rest/?api_key=26f0c3aa6affff22f579e6db0b50ffe0&method=flickr.photos.search&per_page=500&page=1&user_id="+user_id;
							}
							else{
								current_feed = "http://www.flickr.com/services/rest/?api_key=26f0c3aa6affff22f579e6db0b50ffe0&method=flickr.photos.search&per_page=20&page=" + page + "&user_id="+user_id;
							}
							
							parseCurrentFeed(current_feed);
							
							//start with image slide show mode
							showCellContent("slide_show");
						}
					});
				}
			});
			_gel('user_input').value = unescape(user_str);
			_gel('tag_input').value = '';
		}
		
		//get refresh time
		var refresh_speed = 10;
		try{
			refresh_speed = prefs__MODULE_ID__.getInt("refresh");
		}catch(e){}
		
		//set refresh scroller
		var temp_num = 2;
		if(refresh_speed==5)	temp_num=1;
		if(refresh_speed==10)	temp_num=2;
		if(refresh_speed==15)	temp_num=3;
		if(refresh_speed==20)	temp_num=3;
		if(refresh_speed==25)	temp_num=4;
		if(refresh_speed==30)	temp_num=5;
		if(refresh_speed==35)	temp_num=6;
		if(refresh_speed==40)	temp_num=7;
		if(refresh_speed==45)	temp_num=8;
		if(refresh_speed==50)	temp_num=9;
		if(refresh_speed==55)	temp_num=10;
		if(refresh_speed==60)	temp_num=11;
		if(refresh_speed==120)	temp_num=12;
		if(refresh_speed==300)	temp_num=13;
		if(refresh_speed==900)	temp_num=14;
		if(refresh_speed==1800)	temp_num=15;
		
		refreshScrollerClick(temp_num);
	}
	
</script>
<!-- Puzzle -->
<script type="text/javascript">
var imagePuzzle;
//var IMAGE_NUM = 8;

function ImagePuzzle() {
	
	img_tmp = new Image();
	puzzleBoard = new Array(4);
	puzzleBoardEl = new Array(4); 
	blankRow = 0;
	blankCol = 0;
	//firstClick = true;
	clickCounter = 0;
	//lastContentNum = Math.floor(Math.random()*IMAGE_NUM);
		
	this.init = function() {
	
		//lastContentNum = (lastContentNum + 1)%IMAGE_NUM; 
		var i,j;
		
		pageTracker._trackEvent('Flickr','NewPuzzle');		
		
		img_tmp.src= imgArr[curImage];
		
		//init the board Array
		for (i=0;i<4;i++) {
			
			puzzleBoard[i] = new Array(4); 
			puzzleBoardEl[i] = new Array(4); 
			
			for (j=0;j<4;j++) {
				puzzleBoard[i][j] = i*4 + j;
				puzzleBoardEl[i][j] = _gel("img_part_"+puzzleBoard[i][j]);
				puzzleBoardEl[i][j].style.background = this.getPieceSCCString(i,j);
				puzzleBoardEl[i][j].style.width=Math.floor(img_tmp.width/4) + 'px';
				puzzleBoardEl[i][j].style.height=Math.floor(img_tmp.width/4) + 'px';
			}
		}
		
		clickCntEl = _gel("num_steps");
		resultWinEl = _gel("resultWindowPuzAnch");
		this.closeGameOver();
		
		this.scramblePicture();
		this.drawPuzzle();
		//firstClick = true;
		clickCounter = 0;
		this.updateClickCount();
	}
	
	this.getPieceSCCString = function(row,col) {
		//col = (-60*col);
		//row = (-60*row);	
		
		row = ((img_tmp.height/(-4))*row);
		col = ((img_tmp.width/(-4))*col);
		//return "transparent url(http://www.labpixies.com/campaigns/puzzle/images/content/"+lastContentNum+".jpg) "+col+"px "+row+"px no-repeat";
		//return "transparent url(http://cdn.labpixies.com/campaigns/flickr/images/test.jpg) "+col+"px "+row+"px no-repeat";
		return "transparent url(" + imgArr[curImage] + ") "+col+"px "+row+"px no-repeat";
	}
	
	this.getPieceSCCStringByCNum = function(cel) {
		
		if (cel == 16) 
			return "transparent";	//in case of transparent return empty background
		col = cel%4;
		row = Math.floor(cel/4);
		return this.getPieceSCCString(row,col);
	}
	
	this.drawPuzzle = function() {
	
		var i,j;
		
		img_tmp.src= imgArr[curImage];
			
		for (i=0;i<4;i++) {
						
			for (j=0;j<4;j++) {
				puzzleBoardEl[i][j].style.background = this.getPieceSCCStringByCNum(puzzleBoard[i][j]);
				puzzleBoardEl[i][j].style.width=img_tmp.width/4;
				puzzleBoardEl[i][j].style.height=img_tmp.height/4;
			}
		}
	}

	this.scramblePicture = function() {

		var removePart = Math.floor(Math.random()*16);
		var numOfIterations = Math.floor((Math.random()*100)+100);
		//numOfIterations = 3;
		var side;
		var i, col,row,tempRow, tempCol;
				
		col = removePart%4;
		row = Math.floor(removePart/4);
		puzzleBoard[row][col] = 16;//transparent
		
		for (i=0; i < numOfIterations; i++) {
		
			side = Math.floor(Math.random()*4);
			if (side==0) { //move up
				tempRow = row - 1;
				if (tempRow > -1) {
					puzzleBoard[row][col] = puzzleBoard[tempRow][col];
					puzzleBoard[tempRow][col] = 16; 
					row = tempRow;
				}
			} 
			else if (side == 1) {//right
				
				tempCol = col + 1;
				if (tempCol < 4) {
					puzzleBoard[row][col] = puzzleBoard[row][tempCol];
					puzzleBoard[row][tempCol] = 16; 
					col = tempCol;
				}
			}
			else if (side == 2) {//down
				tempRow = row + 1;
				if (tempRow < 4) {
					puzzleBoard[row][col] = puzzleBoard[tempRow][col];
					puzzleBoard[tempRow][col] = 16; 
					row = tempRow;
				}
			}
			else if (side == 3) { //left
			
				tempCol = col - 1;
				if (tempCol > -1) {
					puzzleBoard[row][col] = puzzleBoard[row][tempCol];
					puzzleBoard[row][tempCol] = 16; 
					col = tempCol;
				}
			}
		}
		
		blankRow = row;
		blankCol = col;
	}
	
	this.moveCL = function(clNum) {
		
		var clickedCol = clNum%4;
		var clickedRow = Math.floor(clNum/4);
		
		if ((((clickedRow - blankRow) == 0) || ((clickedCol - blankCol) == 0))
			&& ((Math.abs(clickedRow - blankRow) == 1) || (Math.abs(clickedCol - blankCol) == 1))) {
		
			puzzleBoard[blankRow][blankCol] = puzzleBoard[clickedRow][clickedCol];
			puzzleBoard[clickedRow][clickedCol] = 16;
			blankRow = clickedRow;
			blankCol = clickedCol;
			this.drawPuzzle();
			clickCounter++;
			this.updateClickCount();
			if (this.isGameOver()) {
			
				this.showGameOver();
			}
		}
	}	
	
	this.isGameOver = function() {
	
		var i,j;
		for (i=0;i<4;i++) {
			for (j=0;j<4;j++) {
				if ((puzzleBoard[i][j] != 16) && (puzzleBoard[i][j]!=(i*4+j)))
					return false;
			}
		}
		
		return true;
	}
	
	this.showGameOver = function() {
	
		pageTracker._trackEvent('Flickr','GameOver');
		//resultWinEl.style.left = (lp_getAbsoluteLeft("image_space_table")+65) + "px";
		//resultWinEl.style.top = (lp_getAbsoluteTop("image_space_table")+60) + "px";
		resultWinEl.style.left = ($lp("#image_space_table").offset().left+65) + "px";
		resultWinEl.style.top = ($lp("#image_space_table").offset().top+60) + "px";

		puzzleBoardEl[blankRow][blankCol].style.background = this.getPieceSCCString(blankRow,blankCol);
		resultWinEl.style.visibility = "visible";
		blankRow = -123;
		blankCol = -123;
	}
	
	this.closeGameOver = function() {
	
		resultWinEl.style.visibility = "hidden";
	}
	
	this.updateClickCount = function() {
	
		clickCntEl.innerHTML = clickCounter;
	}
}

</script>
<center>
<div style='height:10px;font-size:1px;'></div>
<!--<div style="height:5px"></div>-->
<div style="padding-top:6px;position: relative; width: 266px;">
	<table id="settings" cellspacing="0" cellpadding="0" width="190px" border="0" 
	style="z-index:100; border: 1px solid #196AD3; background-color: #dde9f3; position: absolute; top: 44px; left: 38px; color: #196AD3; font-size: 11px;display: none; ">
		<tr>
			<td colspan="4" height="5px" style="font-size: 1px; width: 190px;">&nbsp;</td>
		</tr>
		<tr>
			<td rowspan="4" width="10px" height="25" valign="top" class="title">&nbsp;</td>
			<td colspan="2" height="25" valign="top" align="center" class="title">__MSG_gadget_settings__</td>
			<td rowspan="4" width="10px" height="25" valign="top" class="title">&nbsp;</td>
		</tr>
		<tr>
			<td colspan="2" class="text" style="height: 21px;" align="center">__MSG_choose_mode__</td>
		</tr>
		<tr>
			<td align="center" colspan="2" height="10px" font-size="1px">
				<table cellpadding="0" cellspacing="0" border="0" height="35px" width="170px">
					<tr>
						<td valign="top">
							<input style="height: 10px; margin: 2px 0;" type="radio" name="mode" id="random" checked="checked" onclick="change_mode(0);" />
						</td>
						<td valign="top" colspan="4">
							<span class="text">__MSG_awsome_collection__</span>
						</td>
					</tr>
					<tr>
						<td valign="top">
							<input style="height: 10px; margin: 2px 0;" type="radio" name="mode" id="user" onclick="change_mode(2);" />
						</td>
						<td valign="top">
							<span class="text">__MSG_by_screen_name__</span>
						</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td><input class="text" type="text" id="user_input" name="user_input" style="width: 100px;" disabled="disabled" /></td>
					</tr>
					<tr>
						<td valign="top">
							<input style="height: 10px; margin: 2px 0;" type="radio" name="mode" id="tags"  onclick="change_mode(1);" />
						</td>
						<td valign="top">
							<span class="text">__MSG_by_tag__</span>
						</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td><input class="text" type="text" id="tag_input" name="tag_input" style="width: 100px;" disabled="disabled" /></td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
	        <td height="31" align="center" valign="bottom" colspan="2">
				<img style="cursor: pointer;" onclick="save_prefs();" onmouseover="this.src=get_image('save_button_on.png');" onmouseout="this.src=get_image('save_button.png');" alt="save" width="63" height="19" border="0" id="save" />
				<img style="cursor: pointer;" onmouseover="this.src=get_image('cancel_button_on.png')" onmouseout="this.src=get_image('cancel_button_off.png')" onclick="hide('settings');_gel('setting').innerHTML = '__MSG_settings__'" alt="cancel" width="63" height="19" border="0" id="cancel" />
			</td>
		</tr>
		<tr>
			<td class="style1" colspan="4" height="4px";>&nbsp;</td>
		</tr>
	</table>
<table width="266" height="295" border="0" cellpadding="0" cellspacing="0" id="bg_1" style=" background-position: center bottom;background-repeat: no-repeat;">
	<tr>
		<td width="13">&nbsp;</td>
		<td width="240">
			<table width="240" height="295" border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td height="4"><span class="style1">&nbsp;</span></td>
				</tr>
				<tr>
					<td height="16">
						<table width="240" height="16" border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td width="140px"><span class="style2" style="display: block; height: 13px; overflow: hidden;" id="image_name_label">&nbsp;</span></td>
								<td align="right"><span id="setting" style="cursor: pointer;" class="style3" onclick="show('settings','block');this.innerHTML = '';">__MSG_settings__</span></td>
							</tr>
						</table>
					</td>
				</tr>
				<tr>
					<td width="240" height="240" align="center" class="style1" valign="middle" id="image_space_table">
					<div style="display:block;" id="text_message_show" class="style3">
						__MSG_loading__
					</div>
					<!-- image slide show -->
					<div style="display:none;z-index:10" id="slide_show">
						<img id="image_space_src" boreder="0" class="transparent"/>
					</div>
					<!-- puzzle -->
					<div style="display:none;" id="puzzle_div">
						<table cellpadding="0" cellspacing="0" border="0" ID="puzzleTable" align="center" valign="middle">
						<tr>
							<td id="img_part_0" onClick="imagePuzzle.moveCL(0);" >&nbsp;</td>
							<td id="img_part_1" onClick="imagePuzzle.moveCL(1);" >&nbsp;</td>
							<td id="img_part_2" onClick="imagePuzzle.moveCL(2);" >&nbsp;</td>
							<td id="img_part_3" onClick="imagePuzzle.moveCL(3);" >&nbsp;</td>
						</tr>
						<tr>
							<td id="img_part_4" onClick="imagePuzzle.moveCL(4);" >&nbsp;</td>
							<td id="img_part_5" onClick="imagePuzzle.moveCL(5);" >&nbsp;</td>
							<td id="img_part_6" onClick="imagePuzzle.moveCL(6);" >&nbsp;</td>
							<td id="img_part_7" onClick="imagePuzzle.moveCL(7);" >&nbsp;</td>
						</tr>
						<tr>
							<td id="img_part_8" onClick="imagePuzzle.moveCL(8);" >&nbsp;</td>
							<td id="img_part_9" onClick="imagePuzzle.moveCL(9);" >&nbsp;</td>
							<td id="img_part_10" onClick="imagePuzzle.moveCL(10);" >&nbsp;</td>
							<td id="img_part_11" onClick="imagePuzzle.moveCL(11);" >&nbsp;</td>
						</tr>
						<tr>
							<td id="img_part_12" onClick="imagePuzzle.moveCL(12);" >&nbsp;</td>
							<td id="img_part_13" onClick="imagePuzzle.moveCL(13);" >&nbsp;</td>
							<td id="img_part_14" onClick="imagePuzzle.moveCL(14);" >&nbsp;</td>
							<td id="img_part_15" onClick="imagePuzzle.moveCL(15);" >&nbsp;</td>
						</tr>
						</table>
					<div/></td>
				</tr>				
				<tr>
					<td id="browser_padding" height="2" class="style1">&nbsp;&nbsp;</td>
				</tr>
				<tr>
					<td height="19">
						<table width="240" border="0" cellspacing="0" cellpadding="0">
							<tr>
								<td width="179">
									<table id="buttons_panel" width="179" height="19" border="0" cellpadding="0" cellspacing="0" style="display:inline;">
										<tr>
											<td width="13"><img name="prev" width="13" height="13" border="0" id="prev" onclick="javascript:prevNextButtonClick(-1);" onMouseOver="javascript: this.src=get_image('prev_pict_button_roll.png');" onMouseOut="javascript: this.src=get_image('prev_pict_button.png');"/></td>
											<td width="4">&nbsp;</td>
											<td width="17"><img  width="17" height="17" border="0" id="play_button_img" onclick="javascript:playButtonClick();" onMouseOver="javascript:playButtonHover(1);" onMouseOut="javascript:playButtonHover(0);"/></td>
											<td width="4">&nbsp;</td>
											<td width="13"><img name="next" width="13" height="13" border="0" id="next"onclick="javascript:prevNextButtonClick(1);" onMouseOver="javascript: this.src=get_image('next_pict_button_roll.png');" onMouseOut="javascript: this.src=get_image('next_pict_button.png');"/></td>
											<td width="5">&nbsp;</td>
											<td width="82" height="13" id="scroll_background" align="center" valign="middle"/>
												<table width="75" height="11" border="0" cellspacing="0" cellpadding="0" >
													<tr>
														<td width="5" height="11"  onclick="javascript:refreshScrollerClick(1)"  class="scroller"><img width="5" height="11" id="refreshScrollerClick_1"  border="0" class="transparent"/></td>
														<td width="5" height="11"  onclick="javascript:refreshScrollerClick(2)"  class="scroller"><img width="5" height="11" id="refreshScrollerClick_2"  border="0" class="transparent"/></td>
														<td width="5" height="11"  onclick="javascript:refreshScrollerClick(3)"  class="scroller"><img width="5" height="11" id="refreshScrollerClick_3"  border="0" class="transparent"/></td>
														<td width="5" height="11"  onclick="javascript:refreshScrollerClick(4)"  class="scroller"><img width="5" height="11" id="refreshScrollerClick_4"  border="0" class="transparent"/></td>
														<td width="5" height="11"  onclick="javascript:refreshScrollerClick(5)"  class="scroller"><img width="5" height="11" id="refreshScrollerClick_5"  border="0" class="transparent"/></td>
														<td width="5" height="11"  onclick="javascript:refreshScrollerClick(6)"  class="scroller"><img width="5" height="11" id="refreshScrollerClick_6"  border="0" class="transparent"/></td>
														<td width="5" height="11"  onclick="javascript:refreshScrollerClick(7)"  class="scroller"><img width="5" height="11" id="refreshScrollerClick_7"  border="0" class="transparent"/></td>
														<td width="5" height="11"  onclick="javascript:refreshScrollerClick(8)"  class="scroller"><img width="5" height="11" id="refreshScrollerClick_8"  border="0" class="transparent"/></td>
														<td width="5" height="11"  onclick="javascript:refreshScrollerClick(9)"  class="scroller"><img width="5" height="11" id="refreshScrollerClick_9"  border="0" class="transparent"/></td>
														<td width="5" height="11"  onclick="javascript:refreshScrollerClick(10)" class="scroller"><img width="5" height="11" id="refreshScrollerClick_10" border="0" class="transparent"/></td>
														<td width="5" height="11"  onclick="javascript:refreshScrollerClick(11)" class="scroller"><img width="5" height="11" id="refreshScrollerClick_11" border="0" class="transparent"/></td>
														<td width="5" height="11"  onclick="javascript:refreshScrollerClick(12)" class="scroller"><img width="5" height="11" id="refreshScrollerClick_12" border="0" class="transparent"/></td>
														<td width="5" height="11"  onclick="javascript:refreshScrollerClick(13)" class="scroller"><img width="5" height="11" id="refreshScrollerClick_13" border="0" class="transparent"/></td>
														<td width="5" height="11"  onclick="javascript:refreshScrollerClick(14)" class="scroller"><img width="5" height="11" id="refreshScrollerClick_14" border="0" class="transparent"/></td>
														<td width="5" height="11"  onclick="javascript:refreshScrollerClick(15)" class="scroller"><img width="5" height="11" id="refreshScrollerClick_15" border="0" class="transparent"/></td>
													</tr>
												</table>
											</td>
											<td width="5">&nbsp;</td>
											<td class="style3" id="speed_label_text">30 sec </td>
										</tr>
									</table>
									<table id="game_panel" width="179" height="19" border="0" cellpadding="0" cellspacing="0" style="display:none;">
										<tr>
											<td><img width="43" height="11"  id="steps_title" border="0"/></td>
											<td	 width="10" class="style1">&nbsp;</td>
											<td	 width="122" id="num_steps" class="style4" align="left">0</td>
										</tr>
									</table>
								</td>
								<td width="61"><img  name="scramble" width="61" height="19" border="0" id="scramble" onclick="javascript:scrambleButtonClick();" onMouseOver="javascript:scrambleButtonHover(1);" onMouseOut="javascript:scrambleButtonHover(0);" /></td>
							</tr>
						</table>
					</td>
				</tr>
				<tr>
					<td height="11" class="style1">&nbsp;&nbsp;</td>
				</tr>
			</table>
		</td>
		<td width="13">&nbsp;</td>
	</tr>
</table>
</div>

<table style="position:absolute; visibility:hidden; top:-190px;" id="resultWindowPuzAnch" width="110" height="92" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td height="27">&nbsp;</td>
      </tr>
      <tr>
        <td height="20" onClick="imagePuzzle.init();" style="cursor:pointer;" align="center" class="style5">__MSG_new_game__</td>
      </tr>
      <tr>
        <td height="20" align="center" class="style5"><a href="http://www.labpixies.com" target="_blank" class="style5" style="color:#0063DC;">__MSG_more_games__</a></td>
      </tr>
      <tr>
        <td height="20" onClick="imagePuzzle.closeGameOver();" style="cursor:pointer;" align="center" class="style5">__MSG_close__</td>
      </tr>
      <tr>
        <td height="5" style="font-size:1px;">&nbsp;</td>
      </tr>
</table>

<div style="width:100%">
	<!-- PUT THIS TAG IN DESIRED LOCATION OF SLOT flickr_slides_txt -->
	<script type="text/javascript">
	  GA_googleFillSlot("flickr_slides_txt");
	</script>
	<!-- END OF TAG FOR SLOT flickr_slides_txt -->
</div>
</center>
<!-- LP footer -->
<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/flickr/analytics.html"></iframe>		
<!-- init module operations -->
<script type="text/javascript">
	_IG_RegisterOnloadHandler(function () {
		pageTracker = _gat._getTracker("UA-345375-1");
		pageTracker._initData();
		initModule__MODULE_ID__();
		if(jQuery.browser.mozilla)
			$lp('#browser_padding').attr('height',2);
		else
			$lp('#browser_padding').attr('height',5);
	});

	_IG_Analytics("UA-345375-1", "/flickr");
</script>
]]> 
</Content>
</Module>