var CustomisationInterface = {

  WALLPAPER_STYLESHEET_LINK_ID : 'wallpaperStyles',
  FAVE_WALLPAPER_LIST_ID : 'faveWallpaperList',
  FAVE_SHOW_SELECT_ELEMENT_ID : 'faveShowSelect',
  LEFT_LOOP_ELEMENT_ID : 'leftloop',
  FAVE_CHARACTER_SELECT_ELEMENT_ID : 'faveCharacterSelect',
  HOME_IDENTIFIER_ELEMENT_ID : 'hometopcontent',
  
  debug: false,
  showsAndCharacters : undefined,


  setFaveShow : function() {

    // Pick up which show is selected and call setFaveShow with the
    // appropriate values
    
    var showSelect = document.getElementById( this.FAVE_SHOW_SELECT_ELEMENT_ID );
    
    var showIndex = showSelect.selectedIndex;
    var showId = showSelect.options[showIndex].value;
    
    if( this.debug ) {
      alert( "You chose: " + showId );
    }
    
    var firstCharacter = this.showsAndCharacters[showIndex].characters[0];

    if( this.debug ) {
      alert( "Setting favourite character to " + firstCharacter.title );
    }
    
    this.handleFaveShowChanged( showIndex );
    this.handleFaveCharacterChanged( firstCharacter.homeImagePath,
                                     firstCharacter.otherImagePath );

    RemotedCustomisationService.setFaveShowAndCharacter( showId, firstCharacter.title );
    
    return false;
	  
  },

  
  setFaveCharacter : function() {
  
    var showSelect = document.getElementById( this.FAVE_SHOW_SELECT_ELEMENT_ID );
    var showIndex = showSelect.selectedIndex;
  
    var characterSelect = document.getElementById( this.FAVE_CHARACTER_SELECT_ELEMENT_ID );
    var characterIndex = characterSelect.selectedIndex;
  
    var character = this.showsAndCharacters[showIndex].characters[characterIndex];
  
    if( this.debug ) {
      alert( "You chose: " + character.title + " with homeImagePath: " + character.homeImagePath +
          " and otherImagePath: " + character.otherImagePath );
    }
  
    this.handleFaveCharacterChanged( character.homeImagePath, character.otherImagePath );

    RemotedCustomisationService.setFaveShowAndCharacter( character.showId, character.title );
    
    return false;
    
  },


	setFaveWallpaper : function( wallpaperStylesheetPath ) {

    if( this.debug ) {
      alert( "You chose: " + wallpaperStylesheetPath );
    }

    this.handleFaveWallpaperChanged( wallpaperStylesheetPath );

    RemotedCustomisationService.setFaveWallpaperStylesheet( wallpaperStylesheetPath );
    
    return false;
	
	},
	
	setLoopDoodle : function( doodleFilename ) {

    if( this.debug ) {
      alert( "You chose doodle: " + doodleFilename );
    }

    this.handleLoopDoodleChosen( doodleFilename );

    RemotedCustomisationService.setDoodleFilename( doodleFilename );
	  
	},
	
	refreshPage : function() {
	  window.location.reload();
	},
	
	handleFaveShowChanged : function( showIndex ) {
	
	  if( this.debug ) {
	    alert( "Populating the list of characters" );
	  }
	  
	  var characterSelect = document.getElementById( CustomisationInterface.FAVE_CHARACTER_SELECT_ELEMENT_ID );
    
    characterSelect.options.length = 0;
    
    var characters = showsAndCharacters[showIndex].characters;
      
    for( var i=0; i < characters.length; i++ ) { 
    
      var character = characters[i];
     
      if( this.debug ) {
        alert( "Appending option to character list: " + character.title );
      }                   
                         
      characterSelect.options[i] = new Option( character.title, character.title );
      
    }
	
	},

  adjustLeftLoopImage : function( imagePath, className ) {

    var leftLoopElement = $("#"+ this.LEFT_LOOP_ELEMENT_ID );

    leftLoopElement.fadeOut("slow", function() {
      leftLoopElement.css({ backgroundImage: "url("+imagePath+")" });
      leftLoopElement.attr("className", className);
      leftLoopElement.fadeIn("slow");      
    });

  },

  isDoodleLoopImage : function( doodleFilename ) {

    var leftLoopElement = document.getElementById( this.LEFT_LOOP_ELEMENT_ID );

    return (leftLoopElement.style.backgroundImage == ("url(/myboomerang/download/image/"+ doodleFilename+")"));

  },

  handleFaveCharacterChanged : function( homeImagePath, otherImagePath ) {

    var homepageIdentifierElement = document.getElementById( this.HOME_IDENTIFIER_ELEMENT_ID );

    if( homepageIdentifierElement ) {

      // Home page

      if( this.debug ) {
        alert( "Adjusting left loop image to home image: " + homeImagePath );
      }

      this.adjustLeftLoopImage( homeImagePath, "" );


    } else {

      // Not the home page

      if( this.debug ) {
        alert( "Adjusting left loop image to other image: " + otherImagePath );
      }

      this.adjustLeftLoopImage( otherImagePath, "" );

    }
	
	},

  handleLoopDoodleChosen : function( doodleFilename ) {

    if( this.debug ) {
      alert( "Adjusting left loop image to doodle: " + doodleFilename );
    }

    this.adjustLeftLoopImage( "/myboomerang/download/image/" + doodleFilename, "doodle" );

  },

  handleFaveWallpaperChanged : function( wallpaperStylesheetPath ) {
	
	  if( !document.getElementById ) return;
	  
	  if( this.debug ) {
	    alert( "Adjusting the stylesheet link to point to: " + wallpaperStylesheetPath );
	  }
	  
	  var stylesheetLink = document.getElementById( this.WALLPAPER_STYLESHEET_LINK_ID );
	  
	  stylesheetLink.href = '/customisestyles/' + wallpaperStylesheetPath;
	  
	  // Now we need to ensure the right link is selected
	  
	  var wallpaperList = document.getElementById( this.FAVE_WALLPAPER_LIST_ID );
	  
	  var wallpaperLinks = wallpaperList.getElementsByTagName( 'a' );
	  
	  for( var i=0; i < wallpaperLinks.length; i++ ) {
	  
	    var wallpaperLink = wallpaperLinks[i];
	    
	    if( wallpaperLink.id == wallpaperStylesheetPath ) {

	      // This one should be selected

	      if( wallpaperLink.className.indexOf( 'active' ) < 0 ) {
	        wallpaperLink.className = wallpaperLink.className + 'active';
	      }
	      
	    } else {
	    
	      // Should not be selected
	      
	      var index = wallpaperLink.className.indexOf( 'active' );
	      
	      if( index > -1 ) {
	        wallpaperLink.className = wallpaperLink.className.substring(0,index);
	      }
	      
	    }
	  
	  }
	
	},


	setDebug : function( debug ) {
    this.debug = debug;
  },
  
  // Required
  setShowsAndCharacters : function( showsAndCharacters ) {
    this.showsAndCharacters = showsAndCharacters;
  }  
			
};