// JavaScript Document
function overloadJQueryBrowserUtility() {
	var userAgent = navigator.userAgent.toLowerCase();
	// Figure out what browser is being used
	jQuery.browser = {
		version: (userAgent.match( /.+(?:rv|it|ra|ie|me)[\/: ]([\d.]+)/ ) || [])[1],
		chrome: /chrome/.test( userAgent ),
		safari: /webkit/.test( userAgent ) && !/chrome/.test( userAgent ),
		opera: /opera/.test( userAgent ),
		msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
		mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
	};
}

function loadSlideShow(controlID) {
	switch (controlID) {
		case "#showCase":
			if ($(controlID).attr("loaded") != "true") {
				$(controlID).showcase({
					// is the array that defines the imageset. Each object must be in the form: { url: "path to image", description: "description of the image, used as titlebar", link: "link to an url for the click on the image" } 
					images: [{ url: "images/home_rotator/01.jpg", description: "BUN VENIT", link: "#" }, 
							 { url: "images/home_rotator/02.jpg", description: "BUN VENIT", link: "#" }, 
							 { url: "images/home_rotator/03.jpg", description: "BUN VENIT", link: "#" },
							 { url: "images/home_rotator/04.jpg", description: "BUN VENIT", link: "#" }],
					width: "848px", // width of the container (and of each image)
					height: "429px", // height of the container (and of each image)
					// type: indicates the animation's type. You can choose: horizontal-slider, vertical-slider, fade
					// interval: sets the interval in millisenconds between the transitions
					// stopOnHover: the plugin must stop on iterate when mouse is hover the showcase
					animation: { type: "fade", interval: 4500, stopOnHover: true }, 
					// css width and height of navigation item
					navigator: { item: { width: "4px", height: "4px", borderRounded: false }, position: "top-right" },
					//  css bg color and font color of title bar
					titleBar: { css: { backgroundColor: "#000", fontColor: "#ccc" } }
				});
				$(controlID).attr("loaded", "true");
			}
			break;
		case "#projects1":
			if ($(controlID).attr("loaded") != "true") {
				$(controlID).showcase({
					// is the array that defines the imageset. Each object must be in the form: { url: "path to image", description: "description of the image, used as titlebar", link: "link to an url for the click on the image" } 
					images: [{ url: "images/projects_pictures/project1/01.jpg", description: "FADE TRANSITION ON", link: "#" }, 
							 { url: "images/projects_pictures/project1/02.jpg", description: "FADE TRANSITION ON", link: "#" }, 
							 { url: "images/projects_pictures/project1/03.jpg", description: "FADE TRANSITION ON", link: "#" },
							 { url: "images/projects_pictures/project1/04.jpg", description: "FADE TRANSITION ON", link: "#" }],
					width: "848px", // width of the container (and of each image)
					height: "429px", // height of the container (and of each image)
					// type: indicates the animation's type. You can choose: horizontal-slider, vertical-slider, fade
					// interval: sets the interval in millisenconds between the transitions
					// stopOnHover: the plugin must stop on iterate when mouse is hover the showcase
					animation: { type: "fade", interval: 4500, stopOnHover: true }, 
					// css width and height of navigation item
					navigator: { item: { width: "4px", height: "4px", borderRounded: false }, position: "top-left" },
					//  css bg color and font color of title bar
					titleBar: { css: { backgroundColor: "#000", fontColor: "#ccc" } }
				});
				$(controlID).attr("loaded", "true");
			}
			break;
		case "#projects2":
			if ($(controlID).attr("loaded") != "true") {
				$(controlID).showcase({
					// is the array that defines the imageset. Each object must be in the form: { url: "path to image", description: "description of the image, used as titlebar", link: "link to an url for the click on the image" } 
					images: [{ url: "images/projects_pictures/project2/01.jpg", description: "VERTICAL SLIDER ON", link: "#" }, 
							 { url: "images/projects_pictures/project2/02.jpg", description: "VERTICAL SLIDER ON", link: "#" }, 
							 { url: "images/projects_pictures/project2/03.jpg", description: "VERTICAL SLIDER ON", link: "#" },
							 { url: "images/projects_pictures/project2/04.jpg", description: "VERTICAL SLIDER ON", link: "#" }],
					width: "848px", // width of the container (and of each image)
					height: "429px", // height of the container (and of each image)
					// type: indicates the animation's type. You can choose: horizontal-slider, vertical-slider, fade
					// interval: sets the interval in millisenconds between the transitions
					// stopOnHover: the plugin must stop on iterate when mouse is hover the showcase
					animation: { type: "vertical-slider", interval: 4500, stopOnHover: true }, 
					// css width and height of navigation item
					navigator: { item: { width: "4px", height: "4px", borderRounded: false }, position: "top-left" },
					//  css bg color and font color of title bar
					titleBar: { css: { backgroundColor: "#000", fontColor: "#ccc" } }
				});
				$(controlID).attr("loaded", "true");
			}
			break;
		case "#projects3":
			if ($(controlID).attr("loaded") != "true") {
				$(controlID).showcase({
					// is the array that defines the imageset. Each object must be in the form: { url: "path to image", description: "description of the image, used as titlebar", link: "link to an url for the click on the image" } 
					images: [{ url: "images/projects_pictures/project3/01.jpg", description: "PROJECT 1", link: "#" }, 
							 { url: "images/projects_pictures/project3/02.jpg", description: "PROJECT 2", link: "#" }, 
							 { url: "images/projects_pictures/project3/03.jpg", description: "PROJECT 3", link: "#" },
							 { url: "images/projects_pictures/project3/04.jpg", description: "PROJECT 4", link: "#" }],
					width: "848px", // width of the container (and of each image)
					height: "429px", // height of the container (and of each image)
					// type: indicates the animation's type. You can choose: horizontal-slider, vertical-slider, fade
					// interval: sets the interval in millisenconds between the transitions
					// stopOnHover: the plugin must stop on iterate when mouse is hover the showcase
					animation: { type: "horizontal-slider", interval: 4500, stopOnHover: true }, 
					// css width and height of navigation item
					navigator: { item: { width: "4px", height: "4px", borderRounded: false }, position: "top-left" },
					//  css bg color and font color of title bar
					titleBar: { css: { backgroundColor: "#000", fontColor: "#ccc" } }
				});
				$(controlID).attr("loaded", "true");
			}
			break;
		case "#projects4":
			if ($(controlID).attr("loaded") != "true") {
				$(controlID).showcase({
					// is the array that defines the imageset. Each object must be in the form: { url: "path to image", description: "description of the image, used as titlebar", link: "link to an url for the click on the image" } 
					images: [{ url: "images/projects_pictures/project4/01.jpg", description: "PROJECT DESCRIPTION", link: "#" }, 
							 { url: "images/projects_pictures/project4/02.jpg", description: "PROJECT DESCRIPTION", link: "#" }, 
							 { url: "images/projects_pictures/project4/03.jpg", description: "PROJECT DESCRIPTION", link: "#" },
							 { url: "images/projects_pictures/project4/04.jpg", description: "PROJECT DESCRIPTION", link: "#" }],
					width: "848px", // width of the container (and of each image)
					height: "429px", // height of the container (and of each image)
					// type: indicates the animation's type. You can choose: horizontal-slider, vertical-slider, fade
					// interval: sets the interval in millisenconds between the transitions
					// stopOnHover: the plugin must stop on iterate when mouse is hover the showcase
					animation: { type: "fade", interval: 4500, stopOnHover: true }, 
					// css width and height of navigation item
					navigator: { item: { width: "4px", height: "4px", borderRounded: false }, position: "top-left" },
					//  css bg color and font color of title bar
					titleBar: { css: { backgroundColor: "#000", fontColor: "#ccc" } }
				});
				$(controlID).attr("loaded", "true");
			}
			break;
		case "#projects5":
			if ($(controlID).attr("loaded") != "true") {
				$(controlID).showcase({
					// is the array that defines the imageset. Each object must be in the form: { url: "path to image", description: "description of the image, used as titlebar", link: "link to an url for the click on the image" } 
					images: [{ url: "images/projects_pictures/project5/01.jpg", description: "DESCRIPTION", link: "#" }, 
							 { url: "images/projects_pictures/project5/02.jpg", description: "DESCRIPTION", link: "#" }, 
							 { url: "images/projects_pictures/project5/03.jpg", description: "DESCRIPTION", link: "#" },
							 { url: "images/projects_pictures/project5/04.jpg", description: "DESCRIPTION", link: "#" }],
					width: "848px", // width of the container (and of each image)
					height: "429px", // height of the container (and of each image)
					// type: indicates the animation's type. You can choose: horizontal-slider, vertical-slider, fade
					// interval: sets the interval in millisenconds between the transitions
					// stopOnHover: the plugin must stop on iterate when mouse is hover the showcase
					animation: { type: "fade", interval: 4500, stopOnHover: true }, 
					// css width and height of navigation item
					navigator: { item: { width: "4px", height: "4px", borderRounded: false }, position: "top-left" },
					//  css bg color and font color of title bar
					titleBar: { css: { backgroundColor: "#000", fontColor: "#ccc" } }
				});
				$(controlID).attr("loaded", "true");
			}
			break;
		case "#projects6":
			if ($(controlID).attr("loaded") != "true") {
				$(controlID).showcase({
					// is the array that defines the imageset. Each object must be in the form: { url: "path to image", description: "description of the image, used as titlebar", link: "link to an url for the click on the image" } 
					images: [{ url: "images/projects_pictures/project6/01.jpg", description: "PROJECT 1", link: "#" }, 
							 { url: "images/projects_pictures/project6/02.jpg", description: "PROJECT 2", link: "#" }, 
							 { url: "images/projects_pictures/project6/03.jpg", description: "PROJECT 3", link: "#" },
							 { url: "images/projects_pictures/project6/04.jpg", description: "PROJECT 4", link: "#" }],
					width: "848px", // width of the container (and of each image)
					height: "429px", // height of the container (and of each image)
					// type: indicates the animation's type. You can choose: horizontal-slider, vertical-slider, fade
					// interval: sets the interval in millisenconds between the transitions
					// stopOnHover: the plugin must stop on iterate when mouse is hover the showcase
					animation: { type: "fade", interval: 4500, stopOnHover: true }, 
					// css width and height of navigation item
					navigator: { item: { width: "4px", height: "4px", borderRounded: false }, position: "top-left" },
					//  css bg color and font color of title bar
					titleBar: { css: { backgroundColor: "#000", fontColor: "#ccc" } }
				});
				$(controlID).attr("loaded", "true");
			}
			break;
		case "#projects7":
			if ($(controlID).attr("loaded") != "true") {
				$(controlID).showcase({
					// is the array that defines the imageset. Each object must be in the form: { url: "path to image", description: "description of the image, used as titlebar", link: "link to an url for the click on the image" } 
					images: [{ url: "images/projects_pictures/project7/01.jpg", description: "PROJECT 1", link: "#" }, 
							 { url: "images/projects_pictures/project7/02.jpg", description: "PROJECT 2", link: "#" }, 
							 { url: "images/projects_pictures/project7/03.jpg", description: "PROJECT 3", link: "#" },
							 { url: "images/projects_pictures/project7/04.jpg", description: "PROJECT 4", link: "#" }],
					width: "848px", // width of the container (and of each image)
					height: "429px", // height of the container (and of each image)
					// type: indicates the animation's type. You can choose: horizontal-slider, vertical-slider, fade
					// interval: sets the interval in millisenconds between the transitions
					// stopOnHover: the plugin must stop on iterate when mouse is hover the showcase
					animation: { type: "fade", interval: 4500, stopOnHover: true }, 
					// css width and height of navigation item
					navigator: { item: { width: "4px", height: "4px", borderRounded: false }, position: "top-left" },
					//  css bg color and font color of title bar
					titleBar: { css: { backgroundColor: "#000", fontColor: "#ccc" } }
				});
				$(controlID).attr("loaded", "true");
			}
			break;
		case "#projects8":
			if ($(controlID).attr("loaded") != "true") {
				$(controlID).showcase({
					// is the array that defines the imageset. Each object must be in the form: { url: "path to image", description: "description of the image, used as titlebar", link: "link to an url for the click on the image" } 
					images: [{ url: "images/projects_pictures/project8/01.jpg", description: "PROJECT 1", link: "#" }, 
							 { url: "images/projects_pictures/project8/02.jpg", description: "PROJECT 2", link: "#" }, 
							 { url: "images/projects_pictures/project8/03.jpg", description: "PROJECT 3", link: "#" },
							 { url: "images/projects_pictures/project8/04.jpg", description: "PROJECT 4", link: "#" }],
					width: "848px", // width of the container (and of each image)
					height: "429px", // height of the container (and of each image)
					// type: indicates the animation's type. You can choose: horizontal-slider, vertical-slider, fade
					// interval: sets the interval in millisenconds between the transitions
					// stopOnHover: the plugin must stop on iterate when mouse is hover the showcase
					animation: { type: "fade", interval: 4500, stopOnHover: true }, 
					// css width and height of navigation item
					navigator: { item: { width: "4px", height: "4px", borderRounded: false }, position: "top-left" },
					//  css bg color and font color of title bar
					titleBar: { css: { backgroundColor: "#000", fontColor: "#ccc" } }
				});
				$(controlID).attr("loaded", "true");
			}
			break;
	}
}

function loadCarousel(carousel) {
    if ($("#" + carousel).attr("loaded") != "true") {
        jQuery('#' + carousel).jcarousel({
            auto: 0, /*Specifies how many seconds to periodically autoscroll the content. If set to 0 (default) then autoscrolling is turned off.*/
            wrap: 'both', /*Specifies whether to wrap at the first/last item (or both) and jump back to the start/end. Options are "first", "last" or "both" as string. If set to null, wrapping is turned off (default).*/
            visible: 4, /*If passed, the width/height of the items will be calculated and set depending on the width/height of the clipping, so that exactly that number of items will be visible.*/
            scroll: 2, /*The number of items to scroll by.*/
            initCallback: mycarousel_initCallback
        });
        // carousel was loaded, unset flag so it will not be loaded again
        $("#" + carousel).attr("loaded", "true");
    }
}

function mycarousel_initCallback(carousel) {
    // Disable autoscrolling if the user clicks the prev or next button.
    carousel.buttonNext.bind('click', function () {
        carousel.startAuto(0);
    });

    carousel.buttonPrev.bind('click', function () {
        carousel.startAuto(0);
    });

    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function () {
        carousel.stopAuto();
    }, function () {
        carousel.startAuto();
    });
}