QuickSpotView.prototype.Model = null;
QuickSpotView.prototype.ContentContainer = null;
QuickSpotView.prototype.CategorySelector = null;
QuickSpotView.prototype.CategoryInfo = null;
QuickSpotView.prototype.Title = null;
QuickSpotView.prototype.CategorySelectedHandler = null;
QuickSpotView.prototype.SelectedIndex = null;

QuickSpotView.prototype.createCategoryContent = function(category, zoneId)
{
    if( this.Model == null ) return null;
    if( category == null ) return null;
    if( category.Zones.length == 0 ) return null;
        
    var newCategoryContent = document.createElement("div");
    newCategoryContent.id = "contentContainer" + zoneId;
    newCategoryContent.className="qsCategoryContent";
    
    var newCategoryDoc = document.createElement("iframe");
    newCategoryDoc.className="qsZone";
    newCategoryDoc.setAttribute("marginWidth", "0");
    newCategoryDoc.setAttribute("marginHeight", "0");
    newCategoryDoc.setAttribute("frameBorder", "0");
    newCategoryDoc.setAttribute("scrolling", "no");
    newCategoryDoc.setAttribute("width", this.Model.ContentWidth.toString());
    newCategoryDoc.setAttribute("height", this.Model.ContentHeight.toString());
    for(idxZone=0; idxZone < category.Zones.length; idxZone++)
    {
        if( category.Zones[idxZone].Id == zoneId )
        {
            newCategoryDoc.setAttribute("src", category.Zones[idxZone].ZoneUrl);
            break;
        }
    }    
    newCategoryContent.appendChild(newCategoryDoc);
    return newCategoryContent;
}
QuickSpotView.prototype.getContentContainer = function(id)
{
    return document.getElementById("contentContainer" + id);
}
QuickSpotView.prototype.getCurrentContentContainer = function()
{
    if( this.Model == null ) return null;
    return this.getContentContainer(this.Model.CurrentZoneId);
}
QuickSpotView.prototype.setCurrentCategory = function(categoryId, zoneId)
{
    if( this.Model == null ) return;
    if( this.ContentContainer == null ) return;
    if( this.CategoryInfo == null ) return;
    
    var currentCategory = this.getCurrentContentContainer();
    var newCategory = this.getContentContainer(zoneId);
    
    if( currentCategory != null ) {
        this.ContentContainer.removeChild(currentCategory);
        currentCategory = null;
    }
    if( newCategory == null ) {
        var category = this.Model.getCategory(categoryId);        
        if( category == null || category == "undefined" ) return;
        if( category.Zones.length == 0 ) return;
        if( !this.Model.zoneExists(category, zoneId) ) {
            zoneId = category.Zones[0].Id;
        }
        newCategory=this.createCategoryContent(category, zoneId);
        if( newCategory != null && newCategory != "undefined" ) {  
            this.ContentContainer.appendChild(newCategory);
        }
    }
    this.CategoryInfo.innerHTML = this.Model.getCategory(categoryId).Title;
    this.Model.CurrentCategoryId = categoryId;
    this.Model.CurrentZoneId = zoneId;
}
QuickSpotView.prototype.onCategorySelected = function(categorySelect, viewParam)
{            
    var view = null;
    if( categorySelect != null ) 
    {
        view = categorySelect.target.View;
    }
    else
    {
        if( viewParam != null && viewParam != "undefined" ) {
            view = viewParam;
        } else {        
            view = this.View;
        }
    }
    if( view == null || view == "undefined" ) return;
    if( view.CategorySelector == null ) return;
    if( view.CategorySelectedHandler == null ) return;
    if( view.CategorySelectedHandler.categorySelectedHandler == null || view.CategorySelectedHandler.categorySelectedHandler == "undefined") return;
    if( view.CategorySelector.selectedIndex > 0 )
    {
        var selectedIndex = view.CategorySelector.selectedIndex;
        var zoneId = view.CategorySelector.options[selectedIndex].value;
        var categoryId = 0;
        
        // The category we want is the previous disabled option in the categoryselector
        for( idxOption = selectedIndex-1; idxOption > 0; idxOption-- )
        {
            if( view.CategorySelector.options[idxOption].disabled )
            {
                categoryId = view.CategorySelector.options[idxOption].value;
                break;
            }
        }
        if( categoryId > 0 && zoneId > 0 )
        {
            view.CategorySelectedHandler.categorySelectedHandler(categoryId, zoneId);
        }
    }
}
QuickSpotView.prototype.initCategories = function()
{
    var idxCategory;

    if( this.CategorySelector == null ) return;
    if( this.Model == null ) return;
    
    var defaultOption = document.createElement("option");
    this.CategorySelector.appendChild(defaultOption);    
    defaultOption.text = this.Model.ChooseText;
    defaultOption.value = 0;
    defaultOption.selected = true;
   
    for( idxCategory = 0; idxCategory < this.Model.Categories.length; idxCategory++ )
    {
        var currentCategory = this.Model.Categories[idxCategory];
        var newOption = document.createElement("option");                    
        this.CategorySelector.appendChild(newOption);    
                        
        newOption.text = currentCategory.Title;
        newOption.value = currentCategory.Id;
        newOption.disabled = "disabled";
        newOption.style.color = "graytext";
        for( idxZone = 0; idxZone < currentCategory.Zones.length; idxZone++ )
        {
            var currentZone = currentCategory.Zones[idxZone];
            newOption = document.createElement("option");
            this.CategorySelector.appendChild(newOption);
            newOption.text = "   " + currentZone.Title;
            newOption.value = currentZone.Id;
            newOption.style.color = "menutext";
        }
    }         
    this.CategorySelector.onchange = this.onCategorySelected;
    this.CategorySelector.View = this;
}
QuickSpotView.prototype.initView = function(model)
{
    this.Model = model;
    this.CategoryInfo = document.getElementById("categoryInfo");
    this.CategorySelector = document.getElementById("categorySelector");
    this.ContentContainer = document.getElementById("qsContent");
    this.Title = document.getElementById("qsTitle");
    this.Title.innerHTML = model.Title;
    this.initCategories();
    this.setCurrentCategory(this.Model.DefaultCategoryId, this.Model.DefaultZoneId);
}
function QuickSpotView()
{
}