// JavaScript Document

$(function() {

loadProducts();
loadBoards();
loadArrowListeners();

});

function loadProducts()
{
    var cacheBuster = Date.parse(new Date());

    $.ajax({
        type: "GET",
        url: "/app/website/products/view?cb="+cacheBuster,
        dataType: "xml",
        success: function(xml) {
			
			var counter = 0;

            $(xml).find('product').each(function(){
				
                var uri = $(this).find('uri').text();
                var image = $(this).find('image').text();

				if(uri.indexOf("park") != -1 || uri.indexOf("ramp") != -1 || uri.indexOf("lab") != -1){
					
					if(counter < 3) {
                
						$('.park_slider').append('<li><a href="/app/website/products?uri='+uri+'"><img src="/images/products/small/'+image+'" border="0" /></a></li>');
					
						counter++;
					
					}
											
				}

            });            
            
        },
        error: function(xhr, textStatus, error) {
            $('.board_slider ul').html("Sorry, there was a problem loading the product:" + xhr.status);
        }
    });
}

function loadBoards()
{    
    // remote call: load boards
    $.ajax({
        type: "GET",
        url: "/app/website/collection/boards",
        data: "sc=collection_board_id&so=desc&limit=10",
        dataType: "xml",
        success: function(xml) {
            board_xml = xml;
        },
        complete: function() {
            var thumbnail;
            var board_number;
            var counter = 0;
            var html = "";
            $('.slider_arrow_left').show();
            $('.slider_arrow_right').show();
            $('.loading_text').hide();
            $(board_xml).find('board').each(function(){
                thumbnail = $(this).find('thumbnail').text();
                board_number = $(this).find('number').text();
                html += "<li>"
                      + "<a href=\"/app/website/products/collection\" class=\"board_item\" alt=\""+(counter++)+"\" id=\""+board_number+"\">"
                      + "<img width=\"30\" src=\"/collection/board_thumbs/"+thumbnail+"\" border=\"0\" /></a></li>";
            });
            $('.board_slider_list').append(html);
            loadBoardListeners();
        },
        error: function(xhr, textStatus, error) {
            $('.board_slider ul').html("Sorry, there was a problem loading the boards:" + xhr.status);
        }
    });
    return false;

}


function loadArrowListeners()
{
    var total_boards = 0;
    var board_mask_width = 400;
    var offset = 0;
    var num_boards = 10;
    var data_location = 10; // this keeps track of the amount of boards that have been loaded
    $('.slider_arrow_left').hide();
    
    // get total of boards loaded
    $.get("/app/website/collection/boards/count", function(data) {
        total_boards = data;
    });
    
    // pan right and maybe load more boards
    $('.slider_arrow_right').click(function() {
        
        if (offset >= (total_boards - (num_boards * 2)))
            return false;
        else 
            offset += num_boards;
            
        // only load more boards if the end of current boards has been reached
        if (offset == data_location) {
            $('.loading_text').show();
            $('.slider_arrow_right').hide();
        
            var board_xml;
            $.ajax({
                type: "GET",
                url: "/app/website/collection/boards",
                data: "sc=collection_board_id&so=desc&limit=10&offset="+offset,
                dataType: "xml",
                success: function(xml) {
                    board_xml = xml;
                },
                complete: function() {
                    data_location += num_boards;
                    var thumbnail;
                    var board_number;
                    var counter = 0;
                    var html = '';
                    $(board_xml).find('board').each(function(){
                        thumbnail = $(this).find('thumbnail').text();
                        board_number = $(this).find('number').text();
                        html = '<li><a href="/app/website/products/collection" class=\"board_item\" alt=\"'+(counter++)+'\" id=\"'+board_number+'\">'
                             + '<img width="30" src="/collection/board_thumbs/'+ thumbnail+'" border="0" /></a></li>';
                        $('.board_slider ul').append(html);
                    });
            
                    $('.loading_text').hide();
                    $('.board_container ul').animate({left: '-=' + board_mask_width},500,function(){ });
                    $('.slider_arrow_right').show();
                    loadBoardListeners();
                },
                error: function(msg) {
                    $('.board_slider ul').html("Sorry, there was a problem loading the boards.");
                }
        
            });
        }
        else {
            // just pan right
            $('.board_container ul').animate({left: '-=' + board_mask_width},500,function(){ });
        }
                
        return false;
    });
    
    // just pan left
    $('.slider_arrow_left').click(function() { 
        if (offset <= 0) {
            return false;
        }
        else {
            $('.board_container ul').animate({left: '+=' + board_mask_width},500,function(){ });
            offset -= num_boards;
        }
                
        return false;
    });
}


var ajaxRequest;

function loadBoardListeners()
{
    $('.board_item').hover( function() {
		
		try{
			if(ajaxRequest != null) ajaxRequest.abort();
		}
		catch(error) {
			
		}
		
        var board_id  = $(this).attr('id');
        var board_pos = $(this).attr('alt');
		
		var bLeft = (board_pos * 40) + 85;
		$(".board_overlay").css({
			left: bLeft + "px"
		});
		
		$('.board_overlay').html('<img id="loading_bar" src="/images/loading_bar.gif" />');
		
		$(".board_overlay").css("opacity", 0);
		$(".board_overlay").css("display", "block");
		$(".board_overlay").stop(true).fadeTo("fast", 1, function(){
		
			ajaxRequest = $.ajax({
				
				type: "GET",
				url: "/app/website/collection/boards",
				data: "limit=1&board="+board_id,
				dataType: "xml",
				success: function(xml) {
					
					$(".board_overlay #loading_bar").fadeOut("fast", function(){
					
						$(xml).find('board').each(function(){
							
							var html      = "";
							var thumbnail = $(this).find('thumbnail').text();
							var brand     = $(this).find('brand').text();
							var skater    = $(this).find('skater').text();
							var mix       = $(this).find('mix').text();
							var year      = $(this).find('year').text();
							var series    = $(this).find('series').text();
							var product   = $(this).find('product_type').text();
							
							html += "<div class='board_image' style='background-image:url(/collection/board_thumbs/"+thumbnail+")'></div>";
							html += '<ul>';
							html += '<li><strong>'+product_translations[0]+':</strong> '+brand+'</li>';
							html += '<li><strong>'+product_translations[1]+':</strong> '+skater+'</li>';
							html += '<li><strong>'+product_translations[2]+':</strong> '+mix+'</li>';
							html += '<li><strong>'+product_translations[3]+':</strong> '+year+'</li>';
							html += '<li><strong>'+product_translations[4]+':</strong> '+series+'</li>';
							html += '<li><strong>'+product_translations[5]+':</strong> '+product+'</li>';
							html += '</ul>';
							
							$('.board_overlay').html(html);					
							
						});
					
					});
					
				},
				
				error: function(xhr, textStatus, error) {
					// display error message
				}
				
			});
			
        });
    },
	
    function() {
		
        // on mouse out
		if(ajaxRequest != null) ajaxRequest.abort();
		
		$(".board_overlay").stop().fadeTo("fast", 0, function(){ $(".board_overlay").hide(); });

    });
}