function mask_toggle(id, activator, state) {

   var rollover_mask = $get(id);
   var activator_btn = $get(activator);
       
   if( rollover_mask && rollover_mask != null )
   {    
       if( state == 1 ) 
       {
            rollover_mask.className = 'mask maskon';
            activator_btn.style.display = "block";
       }
       else
       {
            rollover_mask.className = 'mask maskoff';
            activator_btn.style.display = "none";
       }    
   }
}

function activator_toggle(src, state) {

    if( state == 0 ) 
    {
        src.className = 'quicklook_activator activator_off';
    }
    else if( state == 1 )
    {
        src.className = 'quicklook_activator activator_over';
    }
   else if( state == 2 )
   {
        src.className = 'quicklook_activator activator_down';
   } 
}

/*Quicklook Functions*/

var ActiveQuickLook;
function openQuicklook(sku, e) {    
    ActiveQuickLook = new quicklook(sku);
    ActiveQuickLook.show()
    
   return stopBubbling(e); //stop the parent container from firing event which redirects to detail page
}

function closeQuicklook(e) {
   
    if( ActiveQuickLook )
    ActiveQuickLook.hide()     
   
    return stopBubbling(e); //stop the parent container from firing event which redirects to detail page 
}

function buyNowRedirect(e) {

   var ddl_distance = ActiveQuickLook._get_quicklook_distance_ddl()
   var tbx_zipcode = ActiveQuickLook._get_quicklook_zipcode_tbx()
   
   var _errors = ''
   //*Validate that a zipcode has been entered
   if( tbx_zipcode.value == '' || !IsNumeric(tbx_zipcode.value) ) 
   {
        _errors = 'Invalid Zipcode.\n'
   }
   
    //*Validate that a distance has been selected
   if( ddl_distance[ddl_distance.selectedIndex].value == 0 ) 
   {
      _errors = _errors + 'Please select a distance.\n'
   }
   
   if( _errors == '' )
   {             
        var _zipcode, _distance;
        _zipcode = tbx_zipcode.value;
        _distance =   ddl_distance[ddl_distance.selectedIndex].value
        
        window.location = 'dealers.aspx?zipcode=' + _zipcode + '&distance=' + _distance;
        return false;
   }
   else
   {
        alert(_errors);
        stopBubbling(e);
        return false;
   }
}

function default_button(btnID, event)
{ 
 var btn = document.getElementById(btnID); 
 if (document.all)
 { 
   if (event.keyCode == 13)
   { 
         event.returnValue=false;
         event.cancel = true;
         btn.click();
         stopBubbling(event) 
    } 
 } 
 else if (document.getElementById)  
 { 
   if (event.which == 13)
   { 
        event.returnValue=false;
        event.cancel = true;
        btn.click();
        stopBubbling(event)  
    }
 } 
 else if (document.layers) 
 {
   if (event.which == 13)
   {
       event.returnValue=false;
       event.cancel = true;
       btn.click();
       stopBubbling(event) 
   }
 } 
}

/***********
* Update Position of quicklook if user scrolls down page
*
************/
function scrollQuicklook() {
    
     //Get to work at some point
         
}



/*** 
  * Quicklook Structure and Functionality
***/

quicklook = function(sku) {
      this._sku = sku;
      this._containerID = "quicklook"
      this._keyDownHandler = null;
}

quicklook.prototype = {

    init: function() {
   
                  
    },
    
   dispose: function() {
   
        var _quicklook_container = this._get_quicklook_container();
        
        while (_quicklook_container.hasChildNodes())
	    {
	      _quicklook_container.removeChild(_quicklook_container.firstChild);
	    }
	    
   },     
   
   show: function() {
   
       this.init();
   
       try
       { 
           this._get_data()       
       }
       catch (error)
       {

       }            
      
       var _quicklook_container = this._get_quicklook_container();
       var _visible_screen_top = document.documentElement .scrollTop;          

        _quicklook_container.style.display = 'block';
        _quicklook_container.style.left = '15px';       
        _quicklook_container.style.top = _visible_screen_top + 'px';
        _quicklook_container.style.position = "absolute"          
        _quicklook_container.focus();
        
   }, 

    hide: function() {
   
           var _quicklook_container = this._get_quicklook_container();
        _quicklook_container.style.display = "none"
        
        this.dispose();
    
   }, 
   
  
   /***********
   * Properties
   *
   ************/
    get_containerID: function() {
        return this._containerID;
    },
    
    get_sku: function() {
        return this._sku;
    },
    set_sku: function(value) {
        this._sku = value;
    },
   
    _get_quicklook_container: function() {
        return $get(this.get_containerID());
    },
   
    _get_quicklook_content_container: function() {
        return $get('quicklook_content');
    }, 
   
   _get_quicklook_distance_ddl: function() {
        return $get('quicklook_distance_ddl');
    }, 
   
   _get_quicklook_zipcode_tbx: function() {
        return $get('quicklook_zipcode_tbx');
    },   
   
    _get_quicklook_buynow_btn: function() {
        return $get('quicklook_buynow_btn');
    },       
   
    _get_quicklook_title_div: function() {
        return $get('quicklook_title');
    },  
 
  
   /***********
   * Product Retrieval Functions
   *
   ************/
    _get_data: function() {
        keen.products.GetProduct(this.get_sku(),this._get_data_ONSUCCESS,this._get_data_ONERROR, "GETPRODUCT");        
   },
   
   _get_data_ONSUCCESS: function(result, eventArgs) {
        
        //Build Resulting View
        var _quicklook_container = ActiveQuickLook._get_quicklook_container();
       
       var _html 
       _html = ActiveQuickLook._get_html_header_row(result.name);
       _html = _html + ActiveQuickLook._get_html_seperator_row();
       _html = _html + ActiveQuickLook._get_html_buynow_row()
       _html = _html + ActiveQuickLook._get_html_seperator_row(); 
       _html = _html + ActiveQuickLook._get_html_tabs_row(); 

      _html = _html + ActiveQuickLook._get_html_content_row(ActiveQuickLook._get_html_tabs_color_view(result.sku)
      + ActiveQuickLook._get_html_tabs_description(result)
      + ActiveQuickLook._get_html_tabs_product_care(result))
    
     _quicklook_container.innerHTML = _html
        
     var pt = new tabs();   
     pt.add( new tab('ql_tab_color_view', 'pnl_color_view', pt) );   
     pt.add( new tab('ql_tab_description', 'pnl_description', pt) );   
     pt.add( new tab('ql_tab_product_care', 'pnl_product_care', pt) );   
     pt.init();   
     pt.tab_activate('ql_tab_color_view');
     
     var swf = new deconcept.SWFObject('flash/prod_detail/prod_detail_right.swf',"ql_flash",'550', '500', '8', '#FFFFFF');
     swf.addParam('wmode', 'transparent');
     swf.addVariable('sku', result.sku);
     swf.write('pnl_color_view');
            
   },
   
   _get_data_ONERROR: function(result) {   
   
        var _html 
       _html = ActiveQuickLook._get_html_header_row('');
       _html = _html + ActiveQuickLook._get_html_seperator_row();
       _html = _html +  "Error while searching for product. <br />"
        + 'Message: ' + result.message
       
        var _quicklook_container = ActiveQuickLook._get_quicklook_container();
        _quicklook_container.innerHTML = _html
   },
   
   _get_html_header_row: function(title) {
        return "<div class='header_row'>"
        + "  <span class='prod_title' id='quicklook_title'>" + title + "</span>"
        + "  <a href='javascript:void(0)' onclick='closeQuicklook(event)' class='close_btn'><img src='css/product_wall/btn_close.gif' width='41' height='13'/></a>"
        + "</div>"
   },
   
   _get_html_seperator_row: function() {
        return "<div class='seperator_row'>&nbsp;</div>"
   },
   
   _get_html_buynow_row: function() {
        return "<div class='buynow_row'> "
        + " <span> "
        + "      Find this product near you: "
        + " </span> "
        + " <input id='quicklook_zipcode_tbx' type='text' class='textbox' value='Enter Zip Code' size='15'  onclick=\"this.value = \'\' ;\" onkeypress=\"default_button(\'quicklook_buynow_btn\',event)\" /> "
        + "  <select id='quicklook_distance_ddl' class='dropdownlist'> "
        + "    <option selected='selected' value='0'>Distance</option> "
        + "     <option value='5'>5 Miles</option> "
        + "     <option value='10'>10 Miles</option> "
        + "     <option value='20'>20 Miles</option> "
        + "     <option value='50'>50 Miles</option> "
        + "     <option value='100'>100 Miles</option> "
        + " </select> "
        + " <input type='image' src='css/product_wall/btn_buynow.gif' width='123' height='20' style='position:relative; bottom: -4px;' onclick='return buyNowRedirect(event);' id='quicklook_buynow_btn'/>"
        + " </div> "
   },
  
   _get_html_tabs_row: function() {
        return "<div class='tabs' style='background-color: #eeeeee;'>"
        + "<ul class='groups'>"
        + " <li class='group' id='ql_tab_color_view'>"
        + "<img src='css/product_wall/tab_colorsviews.gif' width='92' height='20' class='offstate'/>"
        + "<img src='css/product_wall/tab_colorsviews_on.gif' width='92' height='20' class='onstate'/>" 
        + " </li>" 
        + " <li class='group seperator'>&nbsp;</li>"
        + " <li class='group' id='ql_tab_description'>"
        + "<img src='css/product_wall/tab_description.gif' width='73' height='20' class='offstate'/>" 
        + "<img src='css/product_wall/tab_description_on.gif' width='73' height='20' class='onstate'/>" 
        + " </li>" 
        + " <li class='group seperator'>&nbsp;</li>" 
        + " <li class='group' id='ql_tab_product_care'>"
        + "<img src='css/product_wall/tab_prodcare.gif' width='82' height='20' class='offstate'/>"
        + "<img src='css/product_wall/tab_prodcare_on.gif' width='82' height='20' class='onstate'/>"
        + " </li>" 
        + "</ul>"
        + "</div>"
   },   
   
  
   _get_html_tabs_color_view: function() {
        return "<div id='pnl_color_view' class='tab_panel' style='width: 550px; '>"
        + " </div>"
   },
  
   _get_html_tabs_description: function(product) {     
        var _content = "<div id='pnl_description' class='tab_panel' style='width: 550px;'>" 
        + " <table width='550' border='0' cellspacing='0' cellpadding='0'>"
        + " <tr>"
        + " <td width='224'><img src='" + product.thumbnail + "' width='224' height='156' /></td>"
        + " <td class='text'>" + product.description + "</td>"
        + " </tr>"
        + " </table>"
        + ActiveQuickLook._get_html_seperator_row()
        + " <table width='550' border='0' cellspacing='0' cellpadding='0'>"
        + " <tr>"
        + " <td width='275' valign='top'>"
        
        /*Build Spec List*/
        if( product.specs && product.specs.length > 0 )
        {
        
            _content = _content + " <p>"
            + " <img src='css/product_wall/title_specs.gif' width='38' height='12' /></p>"
            + " <table width='275' border='0' cellspacing='5' cellpadding='0'>"                  
            
            for( var x = 0; x < product.specs.length; ++x )
            {
                _content = _content + " <tr>"         
                + " <td align='right' valign='top' class='bold'>" + product.specs[x].key + "</td>"
                + " <td valign='top' class='text'>" + product.specs[x].value + "</td>"
                + "</tr>" 
            }           
            
            _content = _content +  " </table>"
        
        }
        
        _content = _content + " </td>"   
        + "  <td valign='top' class='text'>"      
        
        /*Build Features List*/
        if( product.features && product.features.length > 0 )
        {        
            _content = _content  + " <td valign='top' class='text'>"
            + " <p>"
            + " <img src='css/product_wall/title_features.gif' width='58' height='12' /></p>"
            + " <table width='275' border='0' cellspacing='5' cellpadding='0'>"
            + " <tr>"
            + " <td valign='top' class='text'>"                
        
            for( var x = 0; x < product.features.length; ++x )
            {
                _content = _content + product.features[x] + "<br />"     
             }
            
             _content = _content  +  " </td>"
            + " </tr>"
            + " </table>"        
        }
        
        _content = _content + " </td>"
        + " </tr>"
        + " </table>"
        + " </div>"

        return _content
   },
   
   _get_html_tabs_product_care: function(product) {
        var _content = "<div id='pnl_product_care' class='tab_panel' style='width: 550px; '>" 
        
        if( product.product_care.key  != '' )
        {
            _content = _content + "<b>" + product.product_care.key + "</b><br />"        
        }
        
        _content = _content + product.product_care.value
        + "</div>"
        
        return _content
   },
   
   _get_html_tabs_sizing_info: function() {
        return ""
   },   
   
    _get_html_content_row: function(content) {   
        return "<div class='content_row' id='quicklook_content'>"
        + " <div id='panels'>"
        +     content
        + " </div>"
        + "</div>"
   }
      
}