$(document).ready(function(){

// ************** homepage: hover fade **************

//<![CDATA[

	//Append a div with hover class to all the LI
	$('ul.services li').append('<div class="hover"><\/div>');
	$('ul.services li').hover(	

		//Mouseover, fadeIn the hidden hover class	
		function() {			
			$(this).children('div').fadeIn('1000');			
		}, 	

		//Mouseout, fadeOut the hover class
		function() {		
			$(this).children('div').fadeOut('1000');			
	}).click (function () {
	
		//Add selected class if user clicked on it
		$(this).addClass('selected');
		
	});

//]]>



// ************** footer: image fade **************

    // wrap as a jQuery plugin and pass jQuery in to our anoymous function
    (function ($) {
        $.fn.cross = function (options) {
            return this.each(function (i) { 
                // cache the copy of jQuery(this) - the start image
                var $$ = $(this);
                
                // get the target from the backgroundImage + regexp
                var target = $$.css('backgroundImage').replace(/^url|[\(\)'"]/g, '');

                // nice long chain: wrap img element in span
                $$.wrap('<span style="position: relative;"></span>')
                    // change selector to parent - i.e. newly created span
                    .parent()
                    // prepend a new image inside the span
                    .prepend('<img>')
                    // change the selector to the newly created image
                    .find(':first-child')
                    // set the image to the target
                    .attr('src', target);

                // the CSS styling of the start image needs to be handled
                // differently for different browsers
                if ($.browser.msie || $.browser.mozilla) {
                    $$.css({
                        'position' : 'absolute', 
                        'left' : 0,
                        'background' : '',
                        'top' : this.offsetTop
                    });
                } else if ($.browser.opera && $.browser.version < 9.5) {
                    // Browser sniffing is bad - however opera < 9.5 has a render bug 
                    // so this is required to get around it we can't apply the 'top' : 0 
                    // separately because Mozilla strips the style set originally somehow...                    
                    $$.css({
                        'position' : 'absolute', 
                        'left' : 0,
                        'background' : '',
                        'top' : "0"
                    });
                } else { // Safari
                    $$.css({
                        'position' : 'absolute', 
                        'left' : 0,
                        'background' : ''
                    });
                }

                // similar effect as single image technique, except using .animate 
                // which will handle the fading up from the right opacity for us
                $$.hover(function () {
                    $$.stop().animate({
                        opacity: 0
                    }, 400);
                }, function () {
                    $$.stop().animate({
                        opacity: 1
                    }, 400);
                });
            });
        };
        
    })(jQuery);
    
    // note that this uses the .bind('load') on the window object, rather than $(document).ready() 
    // because .ready() fires before the images have loaded, but we need to fire *after* because
    // our code relies on the dimensions of the images already in place.
    $(window).bind('load', function () {
        $('img.fade').cross();
    });




// ************** about page: team - the story **************
 
 // hides the slickbox as soon as the DOM is ready (a little sooner that page load)
  $('.people .moreStory').hide();
  
 // slides down, up, and toggle the slickbox on click    

  $('a#more1').click(function() {
    $('.people #story1').slideToggle('400');
    return false;
  });

  $('a#more2').click(function() {
    $('.people #story2').slideToggle('400');
    return false;
  });

  $('a#more3').click(function() {
    $('.people #story3').slideToggle('400');
    return false;
  });

  $('a#more4').click(function() {
    $('.people #story4').slideToggle('400');
    return false;
  });

  $('a#more5').click(function() {
    $('.people #story5').slideToggle('400');
    return false;
  });



// *************** sidebar - hover text *************     

    $("a.shover").hover(
      function () {
        $(this).append($("<span class='lMore'> → 介绍</span>"));
      }, 
      function () {
        $(this).find("span:last").remove();
      }
    );
	
    $("a.shoverEn").hover(
      function () {
        $(this).append($("<span class='lMore'> → what's it</span>"));
      }, 
      function () {
        $(this).find("span:last").remove();
      }
    );



// ************ toggle trigger *********	

	$(".toggle_container").hide();

	$(".trigger").toggle(function(){
		$(this).addClass("active"); 
		}, function () {
		$(this).removeClass("active");
	});
	
	$(".trigger").click(function(){
		$(this).next(".toggle_container").slideToggle("slow,");
	});



// ******** animate effects for Form ***************

    $(".animate").hover(function() {
        $(this).addClass("obHover").animate({ opacity: .6 }, 1000);
    },
    function() {
        $(this).removeClass("obHover");
        $(this).animate({ opacity: 1 }, 1000);
    })
	$(".animate").click(function() { $(this).animate({ opacity: 1 }, 250)})
	


// ******** homepage: animate effects for slideshow p2 p3 ***************	
	
    $("#slideshow .panel").hover(function() {
        $(".panel .pageNav").addClass("showOb").animate({ opacity: .8 }, 1000);
        $("#slideshow .p1").addClass("p1Hover");
    },
    function() {
    	$(".panel .pageNav").removeClass("showOb");
        $(".panel .pageNav").animate({ opacity: 0 }, 1000);
    	$("#slideshow .p1").removeClass("p1Hover");
    })
	


//end document .ready()
});