jQuery(document).ready(function(){
            jQuery('#portoslider1').cycle({
                fx:     'scrollVert',
                prev:   '.prev1',
                next:   '.next1',
                timeout: 0
            });
            jQuery('#portoslider2').cycle({
                fx:     'scrollVert',
                prev:   '.prev2',
                next:   '.next2',
                timeout: 0
            });
            jQuery('#portoslider3').cycle({
                fx:     'scrollVert',
                prev:   '.prev3',
                next:   '.next3',
                timeout: 0
            });
            jQuery('#portoslider4').cycle({
                fx:     'scrollVert',
                prev:   '.prev4',
                next:   '.next4',
                timeout: 0
            });
            jQuery('#portoslider5').cycle({
                fx:     'scrollVert',
                prev:   '.prev5',
                next:   '.next5',
                timeout: 0
            });
            jQuery('#portoslider6').cycle({
                fx:     'scrollVert',
                prev:   '.prev6',
                next:   '.next6',
                timeout: 0
            });

            jQuery(".contactme , .mytweet").hover(function() {
        	jQuery(this).find("div").stop()
        	.animate({bottom: "30", opacity:1}, "fast")
        	.css("display","block")

            }, function() {
                jQuery(this).find("div").stop()
            	.animate({bottom: "0", opacity: 0}, "fast")
                .css("display","none")
            });

            //select all the a tag with name equal to modal
        	jQuery('a[name=modal]').click(function(e) {
        		//Cancel the link behavior
        		e.preventDefault();

        		//Get the A tag
        		var id = jQuery(this).attr('href');

        		//Get the screen height and width
        		var maskHeight = jQuery(document).height();
        		var maskWidth = jQuery(window).width();

        		//Set heigth and width to mask to fill up the whole screen
        		jQuery('#mask').css({'width':maskWidth,'height':maskHeight});

        		//transition effect
        		jQuery('#mask').fadeIn(400);
        		jQuery('#mask').fadeTo("fast",0.5);

        		//Get the window height and width
        		var winH = jQuery(window).height();
        		var winW = jQuery(window).width();

        		//Set the popup window to center
        		jQuery(id).css('top',  winH/2-jQuery(id).height()/2);
        		jQuery(id).css('left', winW/2-jQuery(id).width()/2);

        		//transition effect
        		jQuery(id).fadeIn(400);

        	});

            //if close button is clicked
        	jQuery('.window .close').click(function (e) {
        		//Cancel the link behavior
        		e.preventDefault();

        		jQuery('#mask').fadeOut(400);
        		jQuery('.window').fadeOut(400);
        	});

            jQuery("#rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 400000);

            var currentPosition = 0;
            var slideWidth = 680;
            var slides = jQuery('.slidez');
            var numberOfSlides = slides.length;

            jQuery('#slidesContainer').css('overflow', 'hidden');

            //  all .slides with #slideInner div
            slides
              .wrapAll('<div id="slideInner"></div>')
              // Float left to display horizontally, readjust .slides width
          	.css({
                'float' : 'left',
                'width' : slideWidth
              });

            // Set #slideInner width equal to total width of all slides
            jQuery('#slideInner').css('width', slideWidth * numberOfSlides);

            // Insert controls in the DOM
            jQuery('#slideshowz')
              .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
              .append('<span class="control" id="rightControl">Clicking moves right</span>');

            // Hide left arrow control on first load
            manageControls(currentPosition);

            // Create event listeners for .controls clicks
            jQuery('.control')
              .bind('click', function(){
              // Determine new position
          	currentPosition = (jQuery(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;

          	// Hide / show controls
              manageControls(currentPosition);
              // Move slideInner using margin-left
              jQuery('#slideInner').animate({
                'marginLeft' : slideWidth*(-currentPosition)
              });
            });

            // manageControls: Hides and Shows controls depending on currentPosition
            function manageControls(position){
              // Hide left arrow if position is first slide
          	if(position==0){ jQuery('#leftControl').hide() } else{ jQuery('#leftControl').show() }
          	// Hide right arrow if position is last slide
              if(position==numberOfSlides-1){ jQuery('#rightControl').hide() } else{ jQuery('#rightControl').show() }
            }




            //Speed of the slideshow
        	var speed = 5000;

        	//You have to specify width and height in #slider CSS properties
        	//After that, the following script will set the width and height accordingly
        	jQuery('#mask-gallery, #gallery li').width(jQuery('#slider').width());
        	jQuery('#gallery').width(jQuery('#slider').width() * jQuery('#gallery li').length);
        	jQuery('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height(jQuery('#slider').height());

        	//Assign a timer, so it will run periodically
        	var run = setInterval('newsscoller(0)', speed);

        	jQuery('#gallery li:first, #excerpt li:first').addClass('selected');

        	//Pause the slidershow with clearInterval
        	jQuery('#btn-pause').click(function () {
        		clearInterval(run);
        		return false;
        	});

        	//Continue the slideshow with setInterval
        	jQuery('#btn-play').click(function () {
        		run = setInterval('newsscoller(0)', speed);
        		return false;
        	});

        	//Next Slide by calling the function
        	jQuery('#btn-next').click(function () {
        		newsscoller(0);
        		return false;
        	});

        	//Previous slide by passing prev=1
        	jQuery('#btn-prev').click(function () {
        		newsscoller(1);
        		return false;
        	});

        	//Mouse over, pause it, on mouse out, resume the slider show
        	jQuery('#slider').hover(

        		function() {
        			clearInterval(run);
        		},
        		function() {
        			run = setInterval('newsscoller(0)', speed);
        		}
        	);



    	});

        function newsscoller(prev) {

    	//Get the current selected item (with selected class), if none was found, get the first item
    	var current_image = jQuery('#gallery li.selected').length ? jQuery('#gallery li.selected') : jQuery('#gallery li:first');
    	var current_excerpt = jQuery('#excerpt li.selected').length ? jQuery('#excerpt li.selected') : jQuery('#excerpt li:first');

    	//if prev is set to 1 (previous item)
    	if (prev) {

    		//Get previous sibling
    		var next_image = (current_image.prev().length) ? current_image.prev() : jQuery('#gallery li:last');
    		var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : jQuery('#excerpt li:last');

    	//if prev is set to 0 (next item)
    	} else {

    		//Get next sibling
    		var next_image = (current_image.next().length) ? current_image.next() : jQuery('#gallery li:first');
    		var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : jQuery('#excerpt li:first');
    	}

    	//clear the selected class
    	jQuery('#excerpt li, #gallery li').removeClass('selected');

    	//reassign the selected class to current items
    	next_image.addClass('selected');
    	next_excerpt.addClass('selected');

    	//Scroll the items
    	jQuery('#mask-gallery').scrollTo(next_image, 800);
    	jQuery('#mask-excerpt').scrollTo(next_excerpt, 800);

    }


jQuery('<style type="text/css"> #boxes #dialog {-webkit-border-radius: 7px; -opera-border-radius: 7px; -moz-border-radius: 7px; }</style>').appendTo('head');
jQuery('<style type="text/css"> #boxes #dialog .inner , input#name , input#e-mail , input#interest , textarea#message { -webkit-border-radius: 3px; -opera-border-radius: 3px; -moz-border-radius: 3px; }</style>').appendTo('head');