// set global variable
var tslider;

// init 
$(document).ready(function(){

    $("#show_code_btn").attr("disabled", false);
    
    $('#buildSlides_btn').attr('disabled', false);
    
    $('#hideSlides_btn').attr('disabled', true);	
    
    $('#loadData_btn').attr("disabled", false);
    
    $('#hideData_btn').attr("disabled", true);	
    
    $('#loadGrid_btn').attr("disabled", false);	
    
    $('#hideGrid_btn').attr("disabled", true);
    
    $.ajaxSetup ({
        cache: false
    });    
    
});

// Sample 1 - Function to Show/Hide DIV with image
$( '#showDiv_btn' ).click(function(event){	 
    
    if($('#h_area').css('display') == 'block'){
        
        $('#h_area').slideToggle(1000);
        
        $(this).val('Show DIV with Image');
    
    }else{
        
        $('#h_area').fadeToggle(1000);			
        
        $(this).val('Hide DIV with Image');
    }
});

// Sample 2 - Function to Load Raw HTML Data via JAX   
$('#loadData_btn').click(function(){
    
    var ajax_load = '<img src="images/ajax-loader.gif" alt="loading..." />';	
    
    var loadUrl = 'ajax/test.html';
    
    $('#ajaxData').html(ajax_load).load(loadUrl);
    
    $('#loadData_btn').attr("disabled", true);
    
    $('#hideData_btn').attr("disabled", false);
	
});


// Sample 2 -  Function to hide AJAX raw HTML Data
$('#hideData_btn').click(function(){
	
    $('#ajaxData').html('');
    
    $('#loadData_btn').attr("disabled", false);
    
    $('#hideData_btn').attr("disabled", true);
		
});

// Sample 3 - Function that builds and loads jqGrid
$('#loadGrid_btn').click(function(){

    $("#list2").jqGrid({
        
        url: "ajax/test.json",
        
        datatype: "json",
        
        jsonReader: {repeatitems: false, root: function (obj) { return obj; }},
        
        colNames:['id','Company', 'Price', 'Change','perchange','Last Updated'],
        
        colModel:[
        
            {name:'companyid',index:'companyid', key:true, width:100,editable:true,editoptions:{size:10}, align:'center'},
            
            {name:'company',index:'company', width:100,editable:true},
            
            {name:'price',index:'price', width:100,editable:true,editoptions:{size:10}, formatter:'currency', formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$"}},
            
            {name:'Change',index:'Change', width:100,editable:true,editoptions:{size:25}, formatter:'currency', formatoptions:{decimalSeparator:".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$"}},
            
            {name:'perchange',index:'perchange', width:100, align:"right",editable:true,editoptions:{size:10}, align:'center'},
            
            {name:'LastUpdated',index:'LastUpdated', width:200, align:"right",editable:true,editoptions:{size:10}, align:'center'},
        ],
        
        rowNum: 4,
        
        scrollerbar:true,
        
        loadonce: true,
        
        pager: '#pager2',
        
        sortname: 'companyid',
        
        sortorder: "asc",
        
        height: "75",
         
        shrinkToFit: true,
        
        forceFit: true,	
            
        autowidth: true,
    
        onSelectRow: function(id) {
            
            var getID = $(this).jqGrid('getCell', id, 'companyid');
            
        },
        
        viewrecords: true,
        
        caption:"jqGrid JSON Example"
        
    });

    // Function Dynamically resizes grid
    $(window).bind('resize', function() {
        
        var width = $('#gridData').width();
    
        if (width == null || width < 1){
            
            width = $('#gridData').attr('offsetWidth');
        }
        width = width - 2; 
        
        if (width > 0 &&
        
            Math.abs(width - $("#list2").width()) > 5)
        {
            $("#list2").setGridWidth(width);
        }
    
    }).trigger('resize');	
    
    $('#loadGrid_btn').attr("disabled", true);	
    
    $('#hideGrid_btn').attr("disabled", false);	    
    
});

// Sample 3 - Function that unloads jqGrid
$('#hideGrid_btn').click(function(){
	
    $("#list2").GridUnload();
    
    $(window).unbind('resize');
    
    $('#loadGrid_btn').attr("disabled", false);	
    
    $('#hideGrid_btn').attr("disabled", true);		

});

// Function to Select code sample
function selectCode(){

    if (document.selection) document.selection.empty(); 
    
    else if (window.getSelection) window.getSelection().removeAllRanges();   
    
    if (document.selection) {
        
        var range = document.body.createTextRange();
        
        range.moveToElementText(document.getElementById("codetext"));
            
        range.select();
    
    }
    else if (window.getSelection) {
        
        var range = document.createRange();
        
        range.selectNode(document.getElementById("codetext"));
        
        window.getSelection().addRange(range);
        
    }

}

// Function to display code sample
function displayCode() {
    
    $("#code").show();	
    
    $("#show_code_btn").attr("disabled", "disabled");
}

// Function to Build and display bxSlider Slide Show
$('#buildSlides_btn').click(function(){	
    
    $('#slider_container').show();
    
    tslider = $('.bxslider').bxSlider({
        
            preloadImages: 'all',
            
            slideWidth: 700,
                    
            slideMargin:10,
            
            auto: true,	
            
            autoHover:true,
            
            pause: 3500,
            
            speed: 1500	
                
    });	
    
    $('#buildSlides_btn').attr('disabled', true);

});


// Sample 4 - Function to hide and destroy Slide Show
$('#hideSlides_btn').click(function(){	
    
    tslider.destroySlider();
    
    $('#slider_container').hide();	
    
    $('#buildSlides_btn').attr('disabled', false);

});