<?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="336" author="LabPixies" author_email="labpixie.gadgets+flickr+201101171@gmail.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" />
  </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>


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

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

  var IMAGES_BASE = 'http://cdn.labpixies.com/campaigns/flickr/images/';

  function get_image(src)
  {
    return gadgets.io.getProxyUrl(IMAGES_BASE + src);
  }

  //----------------------------
  // preload
  //----------------------------
  var img_0 = new Image();  img_0.src= gadgets.io.getProxyUrl("http://cdn.labpixies.com/campaigns/flickr/images/scramble_button_roll.png");
  var img_1 = new Image();  img_1.src= gadgets.io.getProxyUrl("http://cdn.labpixies.com/campaigns/flickr/images/photos_button_roll.png");
  var img_2 = new Image();  img_2.src= gadgets.io.getProxyUrl("http://cdn.labpixies.com/campaigns/flickr/images/photos_button.png");
  var img_3 = new Image();  img_3.src= gadgets.io.getProxyUrl("http://cdn.labpixies.com/campaigns/flickr/images/play_button_roll.png");
  var img_4 = new Image();  img_4.src= gadgets.io.getProxyUrl("http://cdn.labpixies.com/campaigns/flickr/images/prev_pict_button_roll.png");
  var img_10 = new Image();  img_10.src= gadgets.io.getProxyUrl("http://cdn.labpixies.com/campaigns/flickr/images/next_pict_button.png");
  var img_11 = new Image();  img_11.src= gadgets.io.getProxyUrl("http://cdn.labpixies.com/campaigns/flickr/images/next_pict_button_roll.png");
  var img_5 = new Image();  img_5.src= gadgets.io.getProxyUrl("http://cdn.labpixies.com/campaigns/flickr/images/steps_title.png");
  var img_6 = new Image();  img_6.src= gadgets.io.getProxyUrl("http://cdn.labpixies.com/campaigns/flickr/images/pause_button.png");
  var img_7 = new Image();  img_7.src= gadgets.io.getProxyUrl("http://cdn.labpixies.com/campaigns/flickr/images/pause_button_roll.png");
  var img_8 = new Image();  img_8.src= gadgets.io.getProxyUrl("http://cdn.labpixies.com/campaigns/flickr/images/youdidit_plate.png");
  var img_9 = new Image();  img_9.src= gadgets.io.getProxyUrl("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;
  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.set("tags_value1", query_st);
      prefs.set('mode', 'tags');
    }
    if (_gel('user').checked) {
      query_st = _gel('user_input').value;
      prefs.set("username_value", query_st);
      prefs.set('mode', 'user');
    }
    if (_gel('random').checked) {
      prefs.set('mode', 'random');
    }
    hide('settings');
    _gel('setting').innerHTML = '__MSG_settings__';
    /* Init prefs with the new source */
    initModule();
  }

  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 || typeof(response) != "object" || !response.data || response.data.firstChild == null){
        setErrorMsg();
        return;
    }
    var data = response.data;

    numOfImagesInFeed = 0;
    var data = response.data;
    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 = data.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){

    var params = {};
    params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.DOM;
    gadgets.io.makeRequest(url, parseRSS, params);
  }

  //----------------------------
  // 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 = gadgets.io.getProxyUrl("http://cdn.labpixies.com/campaigns/flickr/images/photos_button.png");
      }
      else{
        _gel("scramble").src = gadgets.io.getProxyUrl("http://cdn.labpixies.com/campaigns/flickr/images/photos_button_roll.png");
      }
    }
    //play scrambled image
    else{
      if(num==0){
        _gel("scramble").src = gadgets.io.getProxyUrl("http://cdn.labpixies.com/campaigns/flickr/images/scramble_button.png");
      }
      else{
        _gel("scramble").src = gadgets.io.getProxyUrl("http://cdn.labpixies.com/campaigns/flickr/images/scramble_button_roll.png");
      }
    }
  }

  function prevNextButtonClick(num){

    //pause
    play_status=0;
    _gel("play_button_img").src = gadgets.io.getProxyUrl("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 = gadgets.io.getProxyUrl("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 = gadgets.io.getProxyUrl("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 = gadgets.io.getProxyUrl("http://cdn.labpixies.com/campaigns/flickr/images/pause_button.png");
      }
      else{
        _gel("play_button_img").src = gadgets.io.getProxyUrl("http://cdn.labpixies.com/campaigns/flickr/images/pause_button_roll.png");
      }
    }
    //play
    else{
      if(num==0){
        _gel("play_button_img").src = gadgets.io.getProxyUrl("http://cdn.labpixies.com/campaigns/flickr/images/play_button.png");
      }
      else{
        _gel("play_button_img").src = gadgets.io.getProxyUrl("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 = gadgets.io.getProxyUrl("http://cdn.labpixies.com/campaigns/flickr/images/transparent.gif");
    }
    _gel("refreshScrollerClick_" + num).src = gadgets.io.getProxyUrl("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.set("refresh", scroll_speed);
    }catch(e){}

    //refresh?
    //self.location.reload();
  }

  //----------------------------
  // Init Module
  //----------------------------

  function initModule(){

    load_images();

    // Get user preferences
    try{
    prefs = new gadgets.Prefs();

    //get mode
    mode = gadgets.util.unescapeString(prefs.getString("mode"));
    }catch(e){}
    //debug
    //mode="tags";

    if(mode=="tags"){
      _gel('tag_input').disabled = false;
      try{
      user_tags = gadgets.util.unescapeString(prefs.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;

      var params = {};
      params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.DOM;

      gadgets.io.makeRequest(current_feed,function(response) {
        if(!response || typeof(response) != "object" || !response.data || response.data.firstChild == null){
            setErrorMsg();
            return;
        }
        var data = response.data;
        if(data.getElementsByTagName('rsp').item(0).getAttribute('stat') == 'fail'){
          setErrorMsg();
        }
        else{
          if(data.getElementsByTagName('rsp').item(0).getAttribute('stat') == 'ok'){
            var ran_unrounded=Math.random()*data.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");
          }
        }
      }, params);
      _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;
      var params = {};
      params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.DOM;
      gadgets.io.makeRequest(current_feed,function(response) {
        if(!response || typeof(response) != "object" || !response.data || response.data.firstChild == null){
            setErrorMsg();
            return;
        }
        var data = response.data;
        if(data.getElementsByTagName('rsp').item(0).getAttribute('stat') == 'ok'){
          var ran_unrounded=Math.random()*data.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");
        }
      }, params);
    }

    if(mode=="user"){
      _gel('user_input').disabled = false;
      //get user name
      var user_str = gadgets.util.unescapeString(prefs.getString("username_value"));
      user_str = escape(user_str);
      _gel('user').checked = true;
      var params = {};
      params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.DOM;
      gadgets.io.makeRequest('http://www.flickr.com/services/rest/?api_key=26f0c3aa6affff22f579e6db0b50ffe0&method=flickr.people.findByUsername&username=' + user_str, function(response) {
        if(!response || typeof(response) != "object" || !response.data || response.data.firstChild == null){
            setErrorMsg();
            return;
        }
        var data = response.data;
        if(data.getElementsByTagName('rsp').item(0).getAttribute('stat') == 'fail'){
          setErrorMsg();
        }
        else{
          user_id = data.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;

            var params = {};
            params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.DOM;
            gadgets.io.makeRequest(current_feed,function(response) {
              if(!response || typeof(response) != "object" || !response.data || response.data.firstChild == null){
                  setErrorMsg();
                  return;
              }
              var data = response.data;
              var rsp = data.getElementsByTagName('rsp').item(0).getAttribute('stat');
              if(rsp==null || rsp == 'fail'){
                setErrorMsg();
              }
              if(rsp == 'ok'){
                var ran_unrounded=Math.random()*data.getElementsByTagName('photos').item(0).getAttribute('pages');
                var page = Math.ceil(ran_unrounded);

                if(page==data.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");
              }
          }, params);
        }
      }, params);
      _gel('user_input').value = unescape(user_str);
      _gel('tag_input').value = '';
    }

    //get refresh time
    var refresh_speed = 10;
    try{
      refresh_speed = prefs.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;

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

    //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>

</center>
<!-- LP footer -->
<div>
  <script type="text/javascript">
    var mMENU = gadgets.io.getProxyUrl("http://cdn.labpixies.com/infra/js/lp_footer.js");
    document.write('<scr'+'ipt type="text/javascript" src="'+mMENU+'"></scr'+'ipt>');
  </script>
</div>
<!-- init module operations -->
<script type="text/javascript">
  gadgets.util.registerOnLoadHandler(function () {
    initModule();
    if(jQuery.browser.mozilla)
      $lp('#browser_padding').attr('height',2);
    else
      $lp('#browser_padding').attr('height',5);
  });

</script>
]]>
  </Content>
</Module>

