WEB.Portfolio = function(config) {

    // Apply config
	TVI.apply(this, config);
	
	// Create unique id if one doesn't already exist
	TVI.createID(this);
	
	// Register with the component manager
	TVI.ComponentManager.register(this.id, this);

	
	// Run the initialize method
	this.initialize();
}


// PORTFOLIO
$(document).ready(function() {

    WEB.mainPortfolio = new WEB.Portfolio({
        imageContainer: $('#portfolioMainImgLoader'),
        textContainer: $('.portfolioContentContainer'),
        galleryItems: $('#portfolioGallery li'),
        galleryItemsWrapper: $('#portfolioNavigationMiddleWrapper UL'),
        galleryContainer: $('#portfolioNavigationMiddleWrapper'),
        pointer: $('#portfolioNavigationPointer'),
        upButton: $('#portfolioUp'),
        downButton: $('#portfolioDown')
    });

    WEB.mainPortfolio.showNewItem({
        itemToShow: 0
    });

});




WEB.Portfolio.prototype = {


    /**
    * initialize (public)
    * initializes the portfolio
    */
    initialize: function() {

        var component = this;

        component.heightTotal = component.galleryItemsWrapper.height();
        component.heightContainer = component.galleryContainer.height();
        component.numberItems = component.galleryItemsWrapper.children().size();
        component.currentPosition = 0;

        // Attach event for when the user clicks the up button
        component.upButton.click(function() {

            component.moveUp(1);

            // Prevent default behaviour
            return false;
        });

        // Attach event for when the user clicks the up button
        component.downButton.click(function() {

            component.moveDown(1);

            // Prevent default behaviour
            return false;
        });

        // Move gallery when image is clicked
        component.galleryItems.click(function() {

            // Find which item was clicked
            var moveTo = component.numberItems - 1;

            $(this).nextAll().each(function() {
                moveTo--;
            });

            // Move to correct item
            component.moveToItem(moveTo);

            // Prevent default behaviour
            return false;
        });


    },

    /**
    * showNewItem (public)
    * shows a new item when it is selected
    */
    showNewItem: function(params) {

        var component = this;

        // Get the item we need to show
        var itemToShow = params.itemToShow;
        var portfolioContent = component.galleryItems.eq(itemToShow).find('.portfolioContent').clone();

        // The item we cloned was hidden so display it
        portfolioContent.css({ display: 'inline-block' });

        /*****************************************/
        /************* Show the Text *************/
        /*****************************************/

        // Empty the text container
        component.textContainer.empty();
        
        // Copy the text from the gallery and hide it
        component.textContainer.append(portfolioContent);        
        component.textContainer.hide();
        
        // Then fade it back in again
        component.textContainer.fadeIn('fast');

        var contentHeight = portfolioContent.height();

        component.textContainer.css({ height: contentHeight });


        /*****************************************/
        /************* Show the image ************/
        /*****************************************/

        // Remove the current image
        component.imageContainer.find('IMG').remove();

        // Get the url of the image to load from the gallery using some cleverness
        var imageURL = component.galleryItems.eq(itemToShow).find('IMG').attr('src').replace('thumbnail', 'image');

        // Create an object to hold the new image
        var img = new Image();

        // Load the image and run a callback function
        $(img).load(function() {

            // set the image hidden by default    
            $(this).hide();
            
            // Remove the current image
            component.imageContainer.find('IMG').remove();

            // Append the image to the container
            component.imageContainer.append(this);

            // Remove loading gif
            component.imageContainer.addClass('loaded');

            // fade our image in to create a nice effect
            $(this).fadeIn('fast', function() {

                // Add loading gif
                component.imageContainer.removeClass('loaded');
            });
        }).attr('src', imageURL); // *finally*, set the src attribute of the new image to our image


    },


    /**
    * moveToItem (public)
    * Moves the carousel to the chosen item
    */
    moveToItem: function(itemNumber) {

        var component = this;

        // Is the item clicked above or below the current item?
        if (itemNumber < component.currentPosition) {

            // Move up the right number of places
            component.moveUp(component.currentPosition - itemNumber);

        } else if (itemNumber > component.currentPosition) {

            // Move down the right number of places
            component.moveDown(itemNumber - component.currentPosition);
        }

    },


    /**
    * moveUp (public)
    * Moves the carousel up one position
    */
    moveUp: function(positions) {

        var component = this;

        // Check that we're not alreaty at the top
        if (component.currentPosition == 0) {
            return;
        }

        // Get the height of the current gallery item
        var listHeight = component.galleryItems.eq(component.currentPosition).outerHeight(true);

        // Are we in the second position or the last position?
        if (component.currentPosition == 1 || component.currentPosition == (component.numberItems - 1)) {

            // Move pointer up one position
            component.pointer.animate({ top: '-=' + listHeight + 'px' }, function() {

                // Check to see if we need to move up any further
                if (positions > 1) {
                    component.moveUp(positions - 1);
                }
            });

        } else {

            // Get the current scroll position of the  gallery container
            var currentPos = component.galleryContainer.css('top').replace('px', '');

            // Scroll the gallery container up
            component.galleryContainer.animate({ top: '+=' + listHeight + 'px' });

            // Move pointer up one position
            component.pointer.hide();
            component.pointer.animate({ top: '-=' + listHeight + 'px' }, function() {

                // Check to see if we need to move up any further
                if (positions > 1) {
                    component.moveUp(positions - 1);
                }
            });
            component.pointer.fadeIn();

        }

        // Update the position variable
        component.currentPosition--;

        // Show the new content
        component.showNewItem({
            itemToShow: component.currentPosition
        });

    },

    /**
    * moveDown (public)
    * Moves the carousel down one position
    */
    moveDown: function(positions) {

        var component = this;

        // Check that we're not alreaty at the top
        if (component.currentPosition == component.numberItems - 1) {
            return;
        }

        // Get the height of the current gallery item
        var listHeight = component.galleryItems.eq(component.currentPosition).outerHeight(true);

        // Are we in the first position or the second to last position?
        if (component.currentPosition == 0 || component.currentPosition == (component.numberItems - 2)) {

            // Move pointer down one position
            component.pointer.animate({ top: '+=' + listHeight + 'px' }, function() {

                // Check to see if we need to move down any further
                if (positions > 1) {
                    component.moveDown(positions - 1);
                }

            });

        } else {

            // Get the current scroll position of the  gallery container
            var currentPos = component.galleryContainer.css('top').replace('px', '');

            // Scroll the gallery container down
            component.galleryContainer.animate({ top: '-=' + listHeight + 'px' }, function() {

                // Check to see if we need to move down any further
                if (positions > 1) {
                    component.moveDown(positions - 1);
                }
            });

            // Move pointer down one position
            component.pointer.hide();
            component.pointer.animate({ top: '+=' + listHeight + 'px' });
            component.pointer.fadeIn();

        }

        // Update the position variable
        component.currentPosition++;

        // Show the new content
        component.showNewItem({
            itemToShow: component.currentPosition
        });

    }



}