$(function () {


    var cat   = $('#worldzone');
    var el    = $('#country');
    var attr  = $('#city');
    var state = $('#state');
    
    
    /* V1   
                  
    el.selectChain({
            target: state,
            url: 'index.php',
            data: { ajaxState: true } ,
            spec: 1
    });  
    
    el.selectChain({
            target: attr,
            url: 'index.php',
            data: { ajax2: true } ,
            spec: 0
    }); */
    
    
    /* V2 */ 
    el.selectChain({
            target: attr,
            url: 'index.php',
            data: { ajax2: true } ,
            spec: 0
    }).selectChain({ 
            target: state,
            url: 'index.php',
            data: { ajaxState: true } ,
            spec: 1
    });     
    

    state.selectChainUp({
            target: attr,
            url: 'index.php',
            data: { ajaxStateToCity: true } ,
            spec: 2
    });
    
    // note that we're assigning in reverse order
    // to allow the chaining change trigger to work
    cat.selectChain({
            target: el,
            url: 'index.php',
            data: { ajax: true },
            spec: 0
    }).trigger('change');
        
    attr.selectShop({
        	data: $('#city')
    })
    
    
    
    
});