/// <reference path="~/js/jquery-1.3.2-vsdoc.js" />
var currentBaseCategory = 0;

$(function() {
    if ($.browser.version == '7.0') {
        if(document.getElementById('containerPhoto'))
            document.getElementById('containerPhoto').style.lineHeight='45px';
    }
    $('.Categories').each(function() {
        $('#' + this.id).live('click', function() {
            currentBaseCategory = this.id;
            onCategoryClick(this.id);
        });

        $('#' + this.id).live('mouseover', function() {
            //currentBaseCategory = this.id;	    
            onCategoryHover(this.id);
        });

        $('#' + this.id).live('mouseout', function() {
            //currentBaseCategory = this.id;	    
            onCategoryOut(this.id);
        });
    });


    var categoryId = getQueryVariable('cid');
    currentBaseCategory = categoryId;

    if (categoryId) {
        onCategoryClick(categoryId);

        $('#ProjectsDiv_' + categoryId).show();
        $('#' + categoryId).css('color', '#55DD5F');
        //$('#'+categoryId+" img").attr('src',$('#'+categoryId+" img")[0].src.replace('_Black','_Green'));
        $('#' + categoryId + " .hoverImage").show();
        $('#' + categoryId + " .outImage").hide();
    }
});

function onCategoryHover(hoveredCategory) {
    $('#' + hoveredCategory + " .hoverImage").show();
    $('#' + hoveredCategory + " .outImage").hide();
}

function onCategoryOut(hoveredCategory) {
    $('#' + hoveredCategory + " .hoverImage").hide();
    $('#' + hoveredCategory + " .outImage").show();
}

function onCategoryClick(clickedCategoryId) {
    if ($('#child_' + clickedCategoryId + ' .CategoriesChildren').html() != null && $('#child_' + clickedCategoryId + ' .Projects').html() != null && $('#child_' + clickedCategoryId + ' .CategoriesChildren').html().replace(/^\s+|\s+$/g, '') == '' && $('#child_' + clickedCategoryId + ' .Projects').html().replace(/^\s+|\s+$/g, '') == '') {
        $.ajax({
            type: "POST",
            url: "_Services/GlobalService.asmx/GetChildrens",
            data: "{'categoryId':'" + clickedCategoryId + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(msg) {
                if (msg.d[0] == "1") //isCategory
                {
                    for (var i = 1; i < msg.d.length; i++) {
                        var categoryId = msg.d[i].split('|')[0];
                        var categoryName = msg.d[i].split('|')[1];
                        var categoryType = msg.d[i].split('|')[2];
                        var parentId = msg.d[i].split('|')[3];
                        var hoverImage = msg.d[i].split('|')[5];
                        var outImage = msg.d[i].split('|')[6];
                        $('#CategoriesChildren_' + parentId).append($("<div id=type_" + categoryType + "><p><a id='" + categoryId + "' class='Categories'>" + "<img class='outImage' alt='" + categoryName + "' src='img/Menu/" + outImage + "' /><img class='hoverImage' alt='" + categoryName + "' src='img/Menu/" + hoverImage + "' style='display:none;' />" + "</a></p><div id='child_" + categoryId + "' class='Children'><div id='CategoriesChildren_" + categoryId + "' class='CategoriesChildren'></div><div   id='ProjectsDiv_" + categoryId + "' class='Projects'></div></div></div>"));
                        $('#CategoriesChildren_' + parentId).next().remove();
                        $('#CategoriesChildren_' + parentId).parent().show();

                        $('#' + categoryId).live('click', function() { onCategoryClick(this.id); });
                        $('#' + categoryId).live('mouseover', function() { onCategoryHover(this.id); });
                        $('#' + categoryId).live('mouseout', function() { onCategoryOut(this.id); });
                    }
                    var categoryId = getQueryVariable('cid');
                    var childId = getQueryVariable('c');
                    if (childId != categoryId) {
                        $('#' + childId).css('color', '#55DD5F');
                        $('#' + childId + " .hoverImage").show();
                        $('#' + childId + " .outImage").hide();
                        if ($('#' + childId).attr('class') != null)
                            onCategoryClick(childId);
                    }
                }
                else //isProject
                {
                    for (var i = 1; i < msg.d.length; i++) {
                        var projectId = msg.d[i].split('|')[0];
                        var projectName = msg.d[i].split('|')[1];
                        var projectCategory = msg.d[i].split('|')[2];
                        var type = msg.d[i].split('|')[3];
                        var hoverImage = msg.d[i].split('|')[4];
                        var outImage = msg.d[i].split('|')[5];

                        if (type == 1) {
                            $('#ProjectsDiv_' + projectCategory).append($("<a href='' id='Project_" + projectId + "' class='ProjectLink'>" + projectName + "</a>"));
                        }
                        else {
                            $('#ProjectsDiv_' + projectCategory).append($("<a href='' id='Project_" + projectId + "' class='ProjectLink'><img class='outImage' src='img/Menu/" + outImage + "' alt='" + projectName + "' /><img class='hoverImage' src='img/Menu/" + hoverImage + "' alt='" + projectName + "' style='display:none;' /></a>"));
                            $('#ProjectsDiv_' + projectCategory).append('<br/>');
                            $('#Project_' + projectId).live('mouseover', function() {
                                $('#' + this.id + " .hoverImage").show();
                                $('#' + this.id + " .outImage").hide();
                            });
                            $('#Project_' + projectId).live('mouseout', function() {
                                $('#' + this.id + " .hoverImage").hide();
                                $('#' + this.id + " .outImage").show();
                            });
                        }
                        $('#ProjectsDiv_' + projectCategory).prev().remove();
                        $('#Project_' + projectId).attr("href", 'Projects.aspx?id=' + projectId + '&cid=' + currentBaseCategory + '&type=' + type + '&c=' + projectCategory);
                    }

                    var id = getQueryVariable('id');
                    $('#Project_' + id).css('color', '#55DD5F');
                    $('#Project_' + id + " .outImage").hide();
                    $('#Project_' + id + " .hoverImage").show();
                }
            }
        });
    }
    $('.Children').hide();
    $('#child_' + clickedCategoryId).show();
    $('#child_' + clickedCategoryId).parent().parent().parent().show();
}

function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
            return pair[1];
        }
    }
    return null;
}

function showBigImage(file) {
    $('#bigImage').attr('src', file.replace('Small', 'Resized'));
}

var imagesCounter = 1;
function nextImage() {
    var images = $('.containerPhotoDiv img');

    if (images.length > imagesCounter) {
        showBigImage(images[imagesCounter].src);
        imagesCounter++;
    }
}

function previousImage() {
    var images = $('.containerPhotoDiv img');

    if (imagesCounter > 1) {
        imagesCounter--;
        showBigImage(images[imagesCounter - 1].src);

    }
}

function scrollUp() {
    if ($('#containerPhoto img').length > 44) {
        var top = document.getElementById('containerPhoto').style.top;
        top = top.replace('px', '');
        if (parseInt(top) < 0) {
            top = parseInt(top) + 45;
            top += "px";
            document.getElementById('containerPhoto').style.top = top;
        }
    }
}

function scrollDown() {
    if ($('#containerPhoto img').length > 44) {
        var top = document.getElementById('containerPhoto').style.top;
        top = top.replace('px', '');
        if ((parseInt(top)) > ((parseInt($('#containerPhoto img').length) * 45 * -1) / 4) + 540)
            top = parseInt(top) - 45;
        top += "px";
        document.getElementById('containerPhoto').style.top = top;
    }
}