Grid = function() { //
  
  extend(Core, this, arguments);
  
  //define base variables here using 'this' keyword
  this._type = "Grid"; //for debugging purposes
  
  var master = this;
  
  var elementID = "grid";
  this.jElement = $("#"+elementID);
  var flashElementID = "flashGrid";
  var preloaderAnimation = this.jElement.find(".preloaderAnimation");
  
  var currentItemData;
  
  var leftGrid = false;
  
  //setup
  this.build = function() {
    
    if(flash){
      
      var flashvars = {};
      var params = { allowScriptAccess:"always", allowFullScreen:"false", allowNetworking:"true", wmode:"opaque", bgcolor:"#493723" };
      var attributes = {id:flashElementID, name:flashElementID};
      swfobject.embedSWF("/flash/grid.swf", flashElementID, "1", "1", "9.0.0", null, flashvars, params, attributes);
      
    } else {
      
      master.flashInitialised(); //call history and set the flashelement to point to the HTML
      
      this.flashElement.addClass("noFlash");
      
    }
  }
  
  this.flashInitialised = function(){
    this.flashElement = $("#"+flashElementID);
    main.initHistory();
  }
  
  this.flashThumbSelected = function(key, hasPre, preType){
    
    leftGrid = true;
    
    var itemData;
    
    if(hasPre == true){
      
      itemData = {
        key:key,
        type:preType,
        group:"preGrid"
      };
      
    } else {
      
      itemData = mediaData.getItemData(key);
      
    }
    
    main.closeMask(0, function(){
      master.superClass.hide.call(master);
      displayManager.itemSelected(itemData, false);
    });
    
  }
  
  this.displayManagerItem = function(key){
    
    leftGrid = true;
    
    currentItemData = mediaData.getParentFlip(mediaData.getItemData(key));
    
    if(flash){
      if(master.flashElement) master.flashElement.get(0).displayManagerItem(key);
    } else {
      this.setupHTML(currentItemData.key);
    }
    
    master.superClass.hide.call(master);
    
  }
  
  this.returnToGrid = function(){
    
    leftGrid = false;
    
    this.superClass.show.call(this);
    
    if(flash){
      main.openMask(0, function(){
        if(master.flashElement) master.flashElement.get(0).returnToGrid();
      });
    } else {
      main.openMask(1000, function(){
        if(currentItemData) main.setURI(currentItemData.key);
      });
    }
    
  }
  
  this.flipThumbs = function(key){
    
    currentItemData = mediaData.getItemData(key);
    
    if(flash){
      if(master.flashElement){
        master.flashElement.get(0).flipThumbs(key);
      } 
    } else {
      this.setupHTML(key);
    }
    
    displayManager.hide();
    
  }
  
  this.playSound = function(key){
    if(master.flashElement){
      if(master.flashElement.get(0).playSound) master.flashElement.get(0).playSound(key);
    }
  }
  
  this.playBackgroundSound = function(key){
    if(master.flashElement){
      if(master.flashElement.get(0).playBackgroundSound) master.flashElement.get(0).playBackgroundSound(key);
    }
  }
  
  this.stopAllSounds = function(){
    if(master.flashElement){
      if(master.flashElement.get(0).stopAllSounds) master.flashElement.get(0).stopAllSounds();
    }
  }
  
  this.itemSelectedSound = function(){
    if(master.flashElement){
      if(master.flashElement.get(0).itemSelectedSound) master.flashElement.get(0).itemSelectedSound();
    }
  }
  
  this.setupHTML = function(key){
    
    if(!leftGrid) main.setURI(key);
    
    master.flashElement.empty();
    
    if(currentItemData.type == "flipSmall"){
      this.flashElement.addClass("small");
    } else {
      this.flashElement.removeClass("small");
    }
    
    var itemsData = mediaData.getPositioned(currentItemData);
    
    if(itemsData[0].key != "BS") itemsData.unshift(mediaData.getItemData("BS"));
    
    for(var i = 0; i < itemsData.length; i++){
      this.createLi(itemsData[i]);
    }
    
  }
  
  this.createLi = function(itemData){
    //
    var newLi = $('<li class="'+itemData.key+'"></li>');
    newLi.hide();
    var container = newLi;
    
    if(itemData.key == "BS"){
      
      newLi.click(function(){
        var parent = mediaData.getParentFlip(currentItemData);
        if(parent && parent.enabled){
          master.flipThumbs(parent.key);
        }
      });
      
    } else {
      var newA = $('<a href="#'+itemData.key+'"></a>');
      newLi.append(newA);
      container = newA;
    }
    
    var newImg = $('<img src="'+itemData.thumb+'" />');
    container.append(newImg);
    
    newImg.load(function(){
      $(newLi).fadeIn(500);
    });
    this.flashElement.append(newLi);
    
    var grid = this;
    
  }
  
};