$.extend($s,{
  ui: {
    urlWatcherTimer: null,
    currentAnchor: null,
    currentMenu: null,
  
    init: function() {
      jQuery.extend({
        cachedPages: {},
        
        setCachedUrl: function(url, contents) {
          this.cachedPages[url] = contents;
        },
        
        getCachedUrl: function(url) {
          if(this.cachedPages.hasOwnProperty(url)) {
            return this.cachedPages[url];
          }
          return null;
        },
        
        preload: function(params) {
          if($.getCachedUrl(params.url) != null) {
            if(params.hasOwnProperty('success')) {
              params['success']($.getCachedUrl(params.url));
            }
            return;
          }
          
          this.ajax(this.extend({},params,{
            success: function(data) {
              $.setCachedUrl(params.url, data);
              if(params.hasOwnProperty('success')) {
                params['success'](data);
              }
            }
          }));
        }
      });
    
      jQuery.fn.extend({      
        cacheLoad: function(url, callback) {
          return this.each(function() {
            var ref = this;
            var contents = $.getCachedUrl(url);
            if(contents != null) {
              $(this).html(contents);
              if(callback != null) {
                callback();
              }
            }else{
              $(this).load(url, null, function(data){
                $.setCachedUrl(url, data);
                if(callback != null) {
                  callback();
                }
              });
            }
          });
        }
      });
    
      this.doPreload();
      var ref = this;
      this.urlWatcherTimer = setInterval(function(){ref.checkAnchor();}, 100);
    },
    
    toPreload: [
      $s.urls.getContentUrl("Gallery"), 
      $s.urls.getMenuUrl("Gallery")
    ],
    
    doPreload: function() {
      if(this.toPreload.length > 0) {
        var ref = this;
        var url = this.toPreload.shift();
        $.preload({
          'url':url,
          success:function(){
            ref.doPreload();
          }
        });
      }
    },
    
    redirectToAnchor: function(anchor) {
      document.location.href = "#" + anchor;
    },
    
    checkAnchor: function() {
      var newAnchor = this.getAnchorFromUrl();
      if(newAnchor != this.currentAnchor) {
        this.goToAnchor(newAnchor);
      }
    },
    
    getAnchorFromUrl: function() {
      var currentUrl = document.location.href;
      var parts = currentUrl.split("#");
      if(parts.length > 1) {
        return parts[1];
      }
      return $s.anchors.DEFAULT_HOME;
    },
    
    goToAnchor: function(newAnchor) {
      if(this.currentAnchor == newAnchor) {
        return;
      }
      
      //leave the current state
      switch(this.currentAnchor) {
        default:
          break;
      }
    
      //move to the next state
      this.currentAnchor = newAnchor;
      var parts = newAnchor.split("/");
      switch(parts[0]) {
        case "gallery":
          var onContentSuccess = function(data){
            var currentPage = 1;
            var remainingPages = 14;
            for(var a=0; a<data.drawings.length; a++) {
              if(remainingPages == 0) {
                remainingPages = 13;
                $("#gallery .new").before("<li class='next page" + currentPage + "'><a href='#next' onclick=\"$('.page" + currentPage + "').hide();$('.page" + (currentPage+1) + "').show();return false;\">next</a></li>");     
                if(currentPage > 1) {
                $('.page' + currentPage).hide();
                }           
                currentPage++;
                $("#gallery .new").before("<li class='back page" + currentPage + "'><a href='#back' onclick=\"$('.page" + currentPage + "').hide();$('.page" + (currentPage-1) + "').show();return false;\">back</a></li>");
              }
              remainingPages--;
              
              $("#gallery .new").before("<li class='edit page" + currentPage + "'>" + 
                "<a href='#drawing/" + data.drawings[a].id + "'>" +
                "<img src='" + data.drawings[a].src + "' class='thumb' />" +
                "</a>" +
                "</li>");
            }
            
            if(currentPage > 1) {
              $('.page' + currentPage).hide();
            }   
          };
        
          var onPageSuccess = function(){
            $s.ajax.getGallery(onContentSuccess);
          };
          
          $("#content").cacheLoad($s.urls.getContentUrl("Gallery"), onPageSuccess);
          this.goToMenu("Gallery");
          break;
          
        case "settings":
          $("#content").cacheLoad($s.urls.getContentUrl("Settings"), function(){
            $s.ajax.getSettings(function(data){
              //if(data.hasOwnProperty("twitter_username")) {
              if(data.twitter_publish) {
                //alert("twitter_publish_" + data.twitter_publish);
                $("#twitter_publish_" + data.twitter_publish).attr("checked", true); 
              }
              
              if(data.twitter_username) {
                $("#twitter_username").val(data.twitter_username);
              }
              
              if(data.twitter_password) {
                $("#twitter_password").val(data.twitter_password);
              }
            
              $s.ui.showSettingsPanel('settings_twitter');
            });
          });
          this.goToMenu("Settings");
          break;
          
        case "downloads":
          $("#content").cacheLoad($s.urls.getContentUrl("Downloads"), function(){
            $s.ajax.getDownloads(function(data) {
              alert(data);
            });
          });
          this.goToMenu("Downloads");
          break;
          
        case "new":
          $("#content").cacheLoad($s.urls.getContentUrl("Drawing"), function(){
            $s.drawing.setId(0);
            $s.colorpicker.draw();
            $s.drawing.enable();
            $s.drawing.toggleMenu();
          });
          this.goToMenu("Drawing", function(){$s.drawing.toggleMenu();});
          break;
          
        case "drawing":
          $("#content").cacheLoad($s.urls.getContentUrl("Drawing"), function(){
              if(parts.length > 0) {
                $s.ajax.getDrawing(parts[1], function(data) {
                  $s.drawing.setId(parts[1]);
                  $s.drawing.load(data.src, function(){
                    $s.colorpicker.draw();
                    $s.drawing.enable();
                    $s.drawing.toggleMenu();
                  });
                });
              }else{
                $s.drawing.enable();
              }
          });

          this.goToMenu("Drawing", function(){$s.drawing.toggleMenu();});
          break;
          
        default:
          $("#content").cacheLoad($s.urls.getContentUrl("Error"));
          this.goToMenu("Back");
          break;
      }
    },
    
    goToMenu: function(newMenu, callback) {
      if(this.currentMenu == newMenu) {
        return;
      }
      this.currentMenu = newMenu; 
      $("#menu").cacheLoad($s.urls.getMenuUrl(newMenu), callback);
    },
    
    showWarning: function(message) {
      alert(message);
    },
    
    showError: function(message) {
      alert(message);
    },
    
    showErrors: function(errors) {
      var bigError = "";
      for(a in errors) {
        bigError = bigError + (bigError == "" ? "" : "\n") + errors[a];
      }
      alert(bigError);
    },
    
    showSettingsPanel: function(panel) {
      $('.settingsPanel').hide();
      $('#' + panel).show();
    }
  
  }
});