//////////////////////////////////////////////////////////////////////////////////
//All code for the client details display area. Scrollbar, content scroll etc/////
//////////////////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////////////////////////
//Author:   Stephen Zsolnai///////////////////////////////////////////////////////
//Date:     22/10/2009////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////

/// <reference path="jquery-1.3.2-vsdoc2.js" />
var newPosition;
var itemsHeight;
var increment;
var content;
var sliderIntervalID; //the variable to hold the setInterval event for the slider when arrows are clicked.

$(document).ready(function() {
    var container = $("div.windowWrap");
    content = $("div.scrolling");

    //If the contained ul height is smaller than it's container, match the container hweight to that of the content.
    if (content.innerHeight() < container.outerHeight()) {
        container.css({ height: content.innerHeight() }); // -5 to negate the last image's right hand padding
    }

    //the Number of times the arrow button needs to be clicked for all the content to be scrolled.
    var steps = 10;

    //the actual height in pixels of the client details content.
    itemsHeight = content.innerHeight() - container.outerHeight() + 30;

    //This value will be created to represent the amount of pixels to be moved on each click of an arrow.
    increment = Math.round(itemsHeight / steps);

    //Round the height back up or down to a whole number divisable exactly by the increment.
    //This is necessary to ensure the the final values applied never break the bounds
    itemsHeight = increment * steps

    // The pixel position that the content is to be moved to on click.
    newPosition = 1;

    //The slidebar plugin
    $("#slider").slider({
        orientation: "vertical",
        min: 0,
        max: itemsHeight,
        value: itemsHeight, //This will place the slider's handle at the top.
        slide: function(event, ui) {
            content.css('bottom', (ui.value * -1) + itemsHeight);
        }
    });

    //Down arrow is clicked, so the client info needs to be moved up and the handle moved down in increments of (steps).
    $("#slideUp").mousedown(function(event) {
        //slideUp();
        sliderIntervalID = setInterval("slideUp()", 50);
    });
    $("#slideUp").mouseup(function(event) {
        clearInterval(sliderIntervalID);
    });


    //Up arrow is clicked, so the client info needs to be moved down and the handle moved up in increments of (steps).
    $("#slideDown").mousedown(function(event) {
        //slideDown();
        sliderIntervalID = setInterval("slideDown()", 50);
    });
    $("#slideDown").mouseup(function(event) {
        clearInterval(sliderIntervalID);
    });





    //OLD SLIDER ARROW FUNTIONALITY//////////////////////////////////////////////////////////////////////////////////////////////////////
    //    //Up arrow is clicked, so the client info needs to be moved up and the handle moved down in increments of 20.
    //    $("#slideUp").click(function(event) {
    //        if (newPosition < itemsHeight) {
    //            //add the increment to set the new position variable.
    //            newPosition = increment + content.css('bottom').replace("px", "") * 1;

    //            //Now get the current slider handle position and the current content position.
    //            var handlePos = $("#slider").slider("option", "value");
    //            var contentPos = content.css('bottom').replace("px", "") * 1;

    //            //Now set the new slider handle position and the new content position based on the values above and the increment.
    //            $("#slider").slider("option", "value", (handlePos * 1) - increment);
    //            content.css('bottom', newPosition);
    //        } else {

    //            //If the new position has incremented to higher than the slider height(itemsHeight)
    //            //then set it to equal the slider height. This way, when the newposition is decremented, 
    //            //it has the correct starting point .   
    //            newPosition = itemsHeight;
    //            $("#slider").slider("option", "value", 0);
    //            content.css('bottom', itemsHeight);
    //        }
    //    });

    //    //Up down is clicked, so the client info needs to be moved up and the handle moved down in increments of (steps).
    //    $("#slideDown").click(function(event) {
    //        if ((newPosition - increment) > 0) {

    //            //subtract the increment to set the new position variable.
    //            newPosition = (content.css('bottom').replace("px", "") * 1) - increment;

    //            //Now get the current slider handle position and the current content position.
    //            var handlePos = $("#slider").slider("option", "value");
    //            var contentPos = content.css('bottom').replace("px", "") * 1;

    //            //set the new values, but make sure that the decremented values do not push the content or
    //            //the handle out of their bounds! (itemsHeight and 0 respectively)

    //            $("#slider").slider("option", "value", (handlePos * 1) + increment);
    //            content.css('bottom', newPosition);
    //        } else {
    //            newPosition = 0;
    //            $("#slider").slider("option", "value", itemsHeight);
    //            content.css('bottom', 0);
    //        }
    //    });
    //OLD SLIDER ARROW FUNTIONALITY//////////////////////////////////////////////////////////////////////////////////////////////////////





    //Scrolling plugin
    $(function() {
        $("div.scrollable").scrollable({
            size: 1,
            loop: false

        });
    });

    //Animate the project name container when a project link is scrolled over
    $("a.projLink").mouseover(function() {
        var content = $(this).attr('title');
        var elem = $("#projNamesWrap");

        //elem.css({ display: 'inline' });
        elem.stop(true, true).fadeIn(400);
        elem.html(content);
    });
    $("a.projLink").mouseout(function() {
        var elem = $("#projNamesWrap");
        //elem.css({ display: 'none' });
        elem.stop(true, true).fadeOut(200);
    });

    //Slide the client information in and out from the right of screen
    $("#hideClientInfo").click(function() {
        $("#clientInfo").stop().animate({ left: '980px' }, { duration: 800, easing: 'easeInOutBack' });

        $("#hideClientInfo").fadeOut("slow");
        //setTimeout(function() { $("#showClientInfo").fadeIn("slow"); }, 1000);

        setTimeout(function() { $("#showClientInfo").animate({ right: '-21px' }, { duration: 800, easing: 'easeInOutBack' }); }, 400);

        //$("#showClientInfo").css({ display: 'block' });
    });
    $("#showClientInfo").click(function() {
        //$(this).css({ display: 'none' });
        //$("#hideClientInfo").css({ display: 'block' });
        $("#hideClientInfo").fadeIn("slow");

        $("#showClientInfo").animate({ right: '-42px' }, { duration: 800, easing: 'easeInOutBack' });
        setTimeout(function() {
            $("#clientInfo").stop().animate({ left: '600px' }, { duration: 800, easing: 'easeInOutBack' });
        }, 400);
    });


});


////////////////////////////////////////////////////
//Functions/////////////////////////////////////////
////////////////////////////////////////////////////

function slideUp() {
    if (newPosition < itemsHeight) {
        //add the increment to set the new position variable.
        newPosition = increment + content.css('bottom').replace("px", "") * 1;

        //Now get the current slider handle position and the current content position.
        var handlePos = $("#slider").slider("option", "value");
        var contentPos = content.css('bottom').replace("px", "") * 1;

        //Now set the new slider handle position and the new content position based on the values above and the increment.
        $("#slider").slider("option", "value", (handlePos * 1) - increment);
        content.css('bottom', newPosition);
    } else {

        //If the new position has incremented to higher than the slider height(itemsHeight)
        //then set it to equal the slider height. This way, when the newposition is decremented, 
        //it has the correct starting point .   
        newPosition = itemsHeight;
        $("#slider").slider("option", "value", 0);
        content.css('bottom', itemsHeight);
    }
    //console.log("newposition: " + newPosition);
}

function slideDown() {
    if ((newPosition - increment) > 0) {

        //subtract the increment to set the new position variable.
        newPosition = (content.css('bottom').replace("px", "") * 1) - increment;

        //Now get the current slider handle position and the current content position.
        var handlePos = $("#slider").slider("option", "value");
        var contentPos = content.css('bottom').replace("px", "") * 1;

        //set the new values, but make sure that the decremented values do not push the content or
        //the handle out of their bounds! (itemsHeight and 0 respectively)

        $("#slider").slider("option", "value", (handlePos * 1) + increment);
        content.css('bottom', newPosition);
    } else {
        newPosition = 0;
        $("#slider").slider("option", "value", itemsHeight);
        content.css('bottom', 0);
    }
    //console.log("newposition: " + newPosition);

}