// javascript functions for making the trims drill down thing
// this is version 2, changed the drill down behaviour from the original spec

// global for last clicked subcat element
var subcat_last_clicked = null;

// my helper function that returns all items that have an attribute, optionally with value argument
// if we don't pass a value arg, then any use of the attribute is good enough
function getElementsByAttribute( attribute, value ){
    // inner function that returns true if the el has the attribute
    var f = function( el ){ 
        var attrib = getNodeAttribute( el, attribute );
        if( value == undefined && attrib != null ) return true;
        else if ( value != undefined && attrib == value ) return true;
        else return false;
    }
    // filter all elements in the document throught the above and return them in an array
    return ( filter( f, getElementsByTagAndClassName( null, null ) ) ); 
}

function getElementsByClassAndAttribute( class_name, attribute, value ){
    // inner function that returns true if the el has the attribute
    var f = function( el ){ 
        var attrib = getNodeAttribute( el, attribute );
        if( value == undefined && attrib != null ) return true;
        else if ( value != undefined && attrib == value ) return true;
        else return false;
    }
    // in this version we add the class name check
    return ( filter( f, getElementsByTagAndClassName( null, class_name ) ) ); 
}

// function for clicking a category
// oops, left hand cats are getting subcat displayed added to them, how?
function cat_click(){
    var height = parseInt( getNodeAttribute( this, 'height' ) );
    var depth = parseInt( getNodeAttribute( this, 'depth' ) );
    log("function cat_click, category:", this.id, "height of cat", height, "depth:", depth );
   
    // underlining of left hand categories
    // if another cat was selected, unselect and undisplay it and then select this one
    var selected = getElementsByTagAndClassName( 'div', 'cat_selected' );
    if( selected.length > 0 ){
        removeElementClass( selected[0], 'cat_selected' ); 
        removeElementClass( selected[0], 'cat_displayed' ); 
    }
    if( depth != 3 ){
        addElementClass( this, "cat_selected" );
    }else{
        // for height = 3, we don't want to underline the image too
        // find the child element that is a span
        //log("CAT CLICK: depth = 3");
        var span = getElementsByTagAndClassName( 'span', 'cat_span', this.id )[0];
        addElementClass( span, "cat_selected" );
    }
    //if( height == 2 ) addElementClass( this, "cat_displayed" );
    // V2, the clicked cats will be displayed no matter the height heights will be displayed
    addElementClass( this, "cat_displayed" );
    
    // we want to close all elements with a depth greater than the current one    
    var depth_to_close = parseInt( getNodeAttribute( this, "depth") ) + 1;
    var deeper_els = getElementsByTagAndClassName( 'div', 'catlist' );
    for( var i=0; i<deeper_els.length; i++ ){
        // skip closing the catlist we are on extraneously
        if( ( "catlist_"+this.id != deeper_els[i].id ) && 
          ( getNodeAttribute( deeper_els[i], 'depth' ) > getNodeAttribute( this, 'depth') ) ){
            addElementClass( deeper_els[i], "closed" );
        }
    } 
    
    // figure out id of sub list from name
    // if there is no sublist, all we needed to do was close the cousins
    var sublist_id = "catlist_" + this.id;
    if( $(sublist_id) ){ 
        var sublist = $(sublist_id); 
        if( hasElementClass( sublist, "closed" ) ){
            removeElementClass( sublist, "closed" );
        }else{
            addElementClass( sublist, "closed" );
        }
    }

    // now we need to get the product details and swatches widgets, which will vary with height
    // V2, we always get the headline and the products, and never get the subcat list
    log( "cat_click calling get_headline() ");
    get_headline( this );
    log( "cat_click calling get_swatches() ");
    get_swatches( this );
    
    /*
    if( height == 2 ){
        log( "function cat_click, height==2, calling get_products( this, 2 )");
        get_products( this, 2 );
        // on a cat click of height 2 we also un-underline subcats and underline the first
    }else if( height ==1 ){
        log( "function cat_click, height==1, calling get_products( this, 1 )");
        get_products( this, 1 );
        log( "function cat_click, calling get_swatches");
        get_swatches( this ); 
    }else{    
        log( "function cat_click, height==other, calling get_headline");
        get_headline( this );
    } */
    
    // in all cases, we wipe out whatever was last in the swatches
    $("acc_right_middle").innerHTML = "";
   
}

// onclick function for subcat click in the product widget
// need to underline this one, un-underline the others, 
// refresh products widget
function subcat_click(el){
    log("function subcat click on:", el.id, "calling get_products( el, 1 )" );
    get_products(el, 1);
    get_swatches(el);
    
    // set the global variable for the selected subcat
    selected_subcat = el;
}

// call back to underline the first subcat
// this can also get the swatches for the first subcat
function subcat_underline_first(){
    log( "function subcat_underline_first executing");
    var subcat_underlined = getElementsByTagAndClassName( null, 'subcat_displayed' );
    if( subcat_underlined.length ) removeElementClass( subcat_underlined[0], 'subcat_displayed' );
    var subcat_first = getElementsByTagAndClassName( null, 'subcat_first' );
    if( subcat_first.length ){
        log( "adding subcat_displayed to el:", subcat_first[0].id );
        addElementClass( subcat_first[0], 'subcat_displayed' );
    }
    // now get the swatches for the first subcat
    get_swatches( subcat_first[0] );
}

// callback that underlines the last clicked subcat
function subcat_underline_clicked(){
    log("function subcat_underline_clicked");
    log("subcat_last_clicked:", subcat_last_clicked.id );
    addElementClass( subcat_last_clicked.id, "subcat_displayed" );
}

// ajax call for the products view
function get_products( cat_el, height ){
    var cat_num = cat_el.id.split('_')[1];
    log("getting products. El:", cat_el.id, "cat_num:", cat_num );
    
    var tgr = new Date().getTime()
    // var d = loadJSONDoc( q_string, {tg_random: tgr} );
 
    var d = loadJSONDoc( "product_list/" + cat_num, {tg_random: tgr} );
    d.addCallback( update_product_list );
    
    //V2, getting rid of this subcat underline stuff
    /*if( height==2 ){
        log( "function get_products, height==2, adding underline_subcat_first callback" );
        d.addCallback( subcat_underline_first );
    }else if( height==1 ){
        log( "function get_products, height==1, adding underline_subcat_clicked callback, subcat: ", cat_el.id );
        subcat_last_clicked = cat_el;
        d.addCallback( subcat_underline_clicked );
    }*/
}

function get_headline( cat_el ){
    var cat_num = cat_el.id.split('_')[1];
    log("getting headline. El:", cat_el.id, "cat_num:", cat_num );
   
    var tgr = new Date().getTime()
    var d = loadJSONDoc( "product_headline/" + cat_num, {tg_random: tgr}  );
    d.addCallback( update_product_list );
}

// call back that receives the widget html for the products list
function update_product_list(response){
    //log("received product widget response:", response['products_widget'] );
    $("trims_products_container").innerHTML = response['products_widget'];
}

// ajax function to retrieve swatches
// May 4, adding pagination page arg to this
function get_swatches( cat_el, page_num ){
    // default value for pagination number is 1
    if( page_num == null ) page_num = 1;
    
    var cat_num = cat_el.id.split('_')[1];
    //log("getting swatches. El:", cat_el.id, "cat_num:", cat_num );
   
    var tgr = new Date().getTime()
    var d = loadJSONDoc( "product_swatches/" + cat_num + "/" + page_num, {tg_random: tgr}  );
    d.addCallback( update_product_swatches );
}

// pagination version of get_swatches, uses cat_id and page_num for args
function get_swatch_batch( cat_num, page_num ){
    var tgr = new Date().getTime()
    var d = loadJSONDoc( "product_swatches/" + cat_num + "/" + page_num, {tg_random: tgr}  );
    d.addCallback( update_product_swatches );
}



// function get_swatches( cat_el ){
//  var cat_num = cat_el.id.split('_')[1];
//    //log("getting swatches. El:", cat_el.id, "cat_num:", cat_num );
//   
//    var d = loadJSONDoc( "product_swatches/" + cat_num );
//    d.addCallback( update_product_swatches );
//}

// call back that receives the widget html for the products list
function update_product_swatches(response){
    //log("received swatches widget response:", response['swatches_widget'] );
    $("acc_right_middle").innerHTML = response['swatches_widget'];
}

// mouseover/out functions for the cats and subcats
function cat_mouseover(){ addElementClass( this, "cat_mouseover" ); }
function cat_mouseout(){ removeElementClass( this, "cat_mouseover" ); }
function subcat_mouseover(){ addElementClass( this, "subcat_mouseover" ); }
function subcat_mouseout(){ removeElementClass( this, "subcat_mouseover" ); }

function swatch_mouseover(el){ 
    //log("function swatch_mouseover, this:", el.id );
    addElementClass( el, "swatch_mouseover" ); 
}

function swatch_mouseout(el){ 
    //log("function swatch_mouseout, this:", el.id );
    removeElementClass( el, "swatch_mouseover" ); 
}

function swatch_click(id){
    log("function swatch click, id:", id );
    get_swatch_popup( id );  
}
   
function swatch_popup_click(){  
    addElementClass( 'acc_swatch_popup', 'closed');
}
 
function get_swatch_popup( id ){
    log("getting swatch_popup. product id:", id );
   
    var tgr = new Date().getTime()
    var d = loadJSONDoc( "product_swatch_popup/" + id, {tg_random: tgr}  );
    d.addCallback( update_product_swatch_popup );
}
// call back that receives the widget html for the products list
function update_product_swatch_popup(response){
    log("received swatch_popup widget response:", response['swatch_popup_widget'] );
    $("acc_swatch_popup").innerHTML = response['swatch_popup_widget'];
    removeElementClass( 'acc_swatch_popup', 'closed');
}   

function initialize_trims(){
    function connect_onclick( el ){ connect( el, 'onclick', el, cat_click ); } 
    map( connect_onclick, getElementsByTagAndClassName( "div", "cat" ) );

    function connect_cat_onmouseover( el ){ connect( el, 'onmouseover', el, cat_mouseover ); } 
    map( connect_cat_onmouseover, getElementsByTagAndClassName( "div", "cat" ) );
    function connect_cat_onmouseout( el ){ connect( el, 'onmouseout', el, cat_mouseout ); } 
    map( connect_cat_onmouseout, getElementsByTagAndClassName( "div", "cat" ) );

    // shortcut for testing
    //get_products( $("cat_33") );
}