$(document).ready(function() {
//init();
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(init);

});

var total_items = 0;
var current_item = 3;
var contact_open = 0;

function init() {
    total_items = $("#items > ul > li").length;
    current_item = 3;
    turnon();
    turnoffdone();

    $("#left").click(function() {
        if (current_item > 1) {
            turnoff();
            current_item--;
            $("#items ul").animate({ marginLeft: "+=117px" }, 600,function() { turnoffdone() });
            //turnon();
        }

    });

    $("#right").click(function() {
        if (current_item < total_items) {
            turnoff();
            current_item++;
            $("#items ul").animate({ marginLeft: "-=117px" }, 600, function() { turnoffdone() });
            //turnon();
        }
    });

    $("#openclose").click(function() {
        if (contact_open == 0) {
            $("#contact").animate({
                marginLeft: "644px",
                marginTop: "0px"
            }, 1500);
            contact_open = 1;
        }
        else {
            $("#contact").animate({
                marginLeft: "890px",
                marginTop: "-215px"
            }, 1500);
            contact_open = 0;
        }


    });


   
}

function turnon() {
    $('#items ul li').eq(current_item - 1).fadeTo(600, 1);
    $('#headtext').fadeTo(600, 1);
    
    if (type == 0) {
        $('#main #left').fadeTo(600, 1);
        $('#main #right').fadeTo(600, 1);
    }
    else {
        $('#main #full').fadeTo(600, 1);
    }

}

function turnoff() {
    $('#items ul li').eq(current_item - 1).fadeTo(600, 0.15);
    $('#headtext').fadeTo(600, 0);

    if (type == 0) {
        $('#main #left').fadeTo(600, 0);
        $('#main #right').fadeTo(600, 0);
    }
    else {
        $('#main #full').fadeTo(600, 0);
    }
    
}

function turnoffdone() {
    var screenimage = $('#items ul li').eq(current_item-1).find("img").attr("src");
   
    var newimage;
    
    if(type==0) {
        newimage = screenimage.replace("thumbs", "screens");
    }
    else {
        newimage = screenimage.replace("thumbs", "designs");
    }
    

    var img = new Image();


    img.onload = function() {
        loaddetails();
        
        $('#imgscreen').attr("src", newimage);
    };


    img.src = newimage;


    
}

function loaddetails() {
    var item_id = $('#items ul li').eq(current_item - 1).find("img").attr("id");

    $.ajax({
        type: "POST",
        url: "/webservices/f2bws.asmx/GetPortfolioItem",
        data: "{ item_id: " + item_id + "}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
            //var return_value = ;
            $('#headtext').html('Client: <strong>' + msg.d[0] + '</strong><br />Project: ' + msg.d[1]);

            if (type == 0) { /* Web Design and Development */
                $('#main #right #summary').html(msg.d[2]);
                
                if (msg.d[3].length > 0) { /* Quote */
                    $('#main #right #extra').html(msg.d[3]);
                }
                else if (msg.d[4].length > 0) { /* Fact */
                $('#main #right #extra').html(msg.d[3]);
                }
                else {
                    $('#main #right #extra').html('');
                }

                $('#main #right #link').html(msg.d[5]);
            }
            else { /* Graphic Design and Marketing */
            }

            turnon();
        }
    });
}

function showitem(item, index) {

    turnoff();

  
    if (index+1 > current_item) {
        var diff = (index + 1) - current_item;
        amount = 117 * diff;
        current_item = index + 1;
        $("#items ul").animate({ marginLeft: "-=" + amount + "px" }, 600, function() { turnoffdone() });
    }
    else {
        var diff = current_item - (index + 1);
        amount = 117 * diff;
        current_item = index + 1;
        $("#items ul").animate({ marginLeft: "+=" + amount + "px" }, 600, function() { turnoffdone() });
    }

    
}