loadMe = true;
google.load("jquery", "1.2.6");
google.load("jqueryui", "1.5.3");

google.setOnLoadCallback(function(){
    portfolio.handleEvents();
    (loadMe) ? getItem("") : null;
    getPagedItems(null);
})

function getItem(pName){
    $.ajax({
        type: "POST",
        url: "/home/JsonDetail/" + pName,
        data: "",
        dataType: "json",
        success: function(data){
            portfolio.populatePortfolio(data);
        }
    });
}

// returns the following object
// title
// imgsrc - large image
// goal
// description
// solution
// previousTitle - previous link
// nextTitle - next link
//Url

function getPagedItems(page){
    $.ajax({
        type: "POST",
        url: "/home/PagedItems/" + page,
        data: "",
        dataType: "json",
        success: function(data){
            portfolio.populateThumbnails(data);
            $('#portfolioGallery .previous').attr({
                'href': data[0].Previous,
                'rel': data[0].Previous
            })
            $('#portfolioGallery .next').attr({
                'href': data[0].Next,
                'rel': data[0].Next
            })
        }
    });
}

// returns the following object
// Title
// ImgPath - thumb
// Previous - previous link
// Next - next link

var portfolio = {
    populatePortfolio: function(data){
        $('#portfolio img:eq(0)').remove();
        $('#leftContent h3').text("Loading " + data.title);
        var img = new Image();
        $(img).load(function(){
            $(this).hide();
            $('#loader').css('display', '');
            $(this).fadeIn('slow', function(){
                $('#loader').css('display', 'none');
                $('#leftContent h3').html(data.title);
                $('#leftContent h3').after(img)
                document.title = data.title;
                $('#description').text('');
                $('#description').append(data.description);
                $('#description').append(data.solution);
                if(data.nextTitle != null){
                    $('.pager .next a').attr({
                        'rel': data.nextTitle,
                        'href': 'http://lab.matrixwebs.net/Home/Detail/' + data.nextTitle,
                        'title': data.nextTitle.replace(/-/g, ' ')
                    });
                }
                if(data.previousTitle != null){
                    $('.pager .previous a').attr({
                        'href': 'http://lab.matrixwebs.net/Home/Detail/' + data.previousTitle,
                        'title': data.previousTitle.replace(/-/g, ' ')
                    });
                }
            });
        }).attr({
            'src': 'http://www.matrixwebs.com/webresources/images/portfolio/' + data.imgsrc,
            'alt': data.title
        });
        var url = data.Url;
        if(url){
            $('.pager .view a').attr('href',url);
            $('.pager .view').css('display','block');
        }
        else{
            $('.pager .view').css('display','none');
        }
    },
	
    populateThumbnails: function(data){
        if (data.length > 0) {
            $('#rightContent ul').remove();
            $('#thumbnailLoader').css('display', '');
            var ul = $('<ul></ul>');
			
            for (var i = 0; i < data.length; i++) {
                var li = $('<li></li>');
                var className;
                if(i%2==0){
                    className = 'left';
                }
                else{
                    className = 'right';
                }
                $(li).attr('class',className);
                var link = $('<a></a>').attr({
                    'href': data[i].Title,
                    'rel': data[i].Title,
                    'title': 'Visit ' + data[i].Title.replace(/-/g, ' ')
                })
                var image = new Image();
                $(image).load(function(){
                    $(this).fadeIn('slow', function(){
						
						
                        })
                }).attr({
                    'src': 'http://www.matrixwebs.com/webresources/images/portfolio/' + data[i].ImgPath,
                    'alt': data[i].Title.replace(/-/g, ' '),
                    'class': 'thumb'
                });
						
                /*
                var image = $('<img />').attr({
                    'src': 'http://www.matrixwebs.com/webresources/images/portfolio/' + data[i].ImgPath,
                    'alt': data[i].Title.replace(/-/g, ' '),
					'class': 'thumb'
                })*/
				
                $(link).append(image);
                $(li).append(link);
                $(ul).append(li);
                if (i == data.length - 1) {
                    $('#portfolioGallery').append(ul);
                    $('#thumbnailLoader').css('display', 'none');
                }
				
            }
        }
    },
    
    handleEvents: function(){
        $('#leftContent').click(function(event){
            var target = $(event.target);
            if ($(target).attr('nodeName').toLowerCase() == 'a') {
                if ($(target).parents('ul').attr('class') == 'pager') {
                    if($(target).parents('li').attr('class') != 'view'){
                        getItem($(target).attr('rel'));
                        return false;
                    }
                } 
            }
        })
        $('#rightContent').click(function(event){
			
            var target = $(event.target);
            if ($(target).attr('nodeName').toLowerCase() == 'a') {
                if ($(target).attr('class') == 'previous' || $(target).attr('class') == 'next') {
                    getPagedItems($(target).attr('rel'));
                    return false;
                } 
            }
            else if ($(target).attr('nodeName').toLowerCase() == 'img'){
                var parent = $(target).parent();
                getItem($(parent).attr('rel'));
                return false;
            }
        })
    }
}