$(document).ready(function(){	
	$monitor = $manage = $mobile = $('ul.slider li');
	
	$('ul.slider li').each(function (i){
		$(this).css('left',680);
		if(i == 0){
			$(this).css('left',0);
			$(this).addClass('first').addClass('sliding');
		}
		if($(this).hasClass('monitor')){
			$monitor = $(this);
		} else if($(this).hasClass('manage')){
			$manage = $(this);
		} else if($(this).hasClass('mobile')){
			$mobile = $(this);
		}
		$('.last').removeClass('last');
		$(this).addClass('last');
	});
	
	$('ul.slider-nav li').each(function (i){
		if(i == 0){;
			$(this).addClass('first').addClass('active');
		}
		var $tmp = $('ul.slider-nav li');
		if($(this).hasClass('monitor')){
			$tmp = $monitor;
		} else if($(this).hasClass('manage')){
			$tmp = $manage;
		} else if($(this).hasClass('mobile')){
			$tmp = $mobile;
		}
		$(this).click( function(){
			if(!$tmp.hasClass('sliding')){
				$('ul.slider-nav li.active').removeClass('active');
				$(this).addClass('active');
				$(".sliding").addClass('tmpslide').stop().animate({left: 680}, 500 );
				$tmp.css('left',-680).stop().animate({left: 0}, 500 );
				$tmp.addClass('sliding');
				$('.tmpslide').removeClass('sliding').removeClass('tmpslide');	
			}
			clearTimeout($t);
			$t = setTimeout(function(){at();}, 20000);
		});
        
	});
	
	function at(){
		$tmpl = $('ul.slider-nav li.active');
		$('ul.slider-nav li.active').removeClass('active');				
		$(".sliding").addClass('tmpslide').stop().animate({left: 680}, 500 );
		if($(".sliding").hasClass('last')){
			//$(".slider-nav .first").addClass('active');
			$(".slider .first").css('left',-680).stop().animate({left: 0}, 500 );
			$(".slider .first").addClass('sliding');
            $next = $(".slider .first");
		} else {
			//$tmpl.next().addClass('active');
			$(".sliding").next('li').css('left',-680).stop().animate({left: 0}, 500 );
			$(".sliding").next('li').addClass('sliding');
            $next = $(".sliding").next('li');
		}
        $slideclass = $next.attr("class");        
        $slideclass = $slideclass.replace("first","");
        $slideclass = $slideclass.replace("last","");
        $slideclass = $slideclass.replace("sliding","");
        $slideclass = $slideclass.replace("tmpslide","");
        $slideclass = $.trim($slideclass);        
        $(".slider-nav ."+$slideclass).addClass('active');
		$('.tmpslide').removeClass('sliding').removeClass('tmpslide');		
		clearTimeout($t);
		$t = setTimeout(function(){at();}, 20000);
	}
	$t = setTimeout(function(){at();}, 20000);
	
	$('.subpage').each(function (i){
		if(i == 0){
			$(this).addClass('fix').css('display','block');
		} else {
			$(this).addClass('fix').css('display','none');
		}
		$(this).data("d", {num: i});
	});
	$('.subpage-nav').css('display','block');
	
	$('.subpage-nav li').each(function (i){
		if(i == 0){
			$(this).addClass('acitve');
		}
		$(this).data("d", {num: i});		
		$(this).click( function(){
			$('.subpage-nav .acitve').removeClass('acitve');
			$(this).addClass('acitve');
			nextPage(i);
		});
	});
	
    
    $(".nextSlide,.prevSlide").click(function(){
		clearTimeout($t);
        var direction = $(this).hasClass('nextSlide');
        var current = $(".slider .sliding");
        if(direction == true) {
            var next = $(current).next();
            next = (next.length == 0) ? $(".slider .first") : next;
            $(current).addClass('tmpslide').stop().animate({left: -680}, 500 );
            $(next).css('left',680).stop().animate({left: 0}, 500 );
        } else {
            var next = $(current).prev();
            next = (next.length == 0) ? $(".slider .last") : next;
            $(current).addClass('tmpslide').stop().animate({left: 680}, 500 );
            $(next).css('left',-680).stop().animate({left: 0}, 500 );
        }
        $(next).addClass('sliding');
        $(current).removeClass('sliding').removeClass('tmpslide');	
		$t = setTimeout(function(){at();}, 20000);
        return false;
    });
    $(".block.slider").hover(function(){
        $(".nextSlide,.prevSlide").stop().fadeTo(300,1);
        },function(){
        $(".nextSlide,.prevSlide").stop().fadeTo(300,0);
        })
    
	function nextPage(i){
		$cpage = $npage = $('.subpage');
		$('.subpage').each(function (n){
			if($(this).css('displ') == 'block'){
				$cpage = $(this);
			}
			if(i == n){
				$npage = $(this);
			}
		});
		$cpage.css('display','none');
		$npage.css('display','block');
	}
	
	$('.item').addClass('fix').css('opacity',0);
	
	$('.item').each(function (i){
		$(this).addClass('mini');
		if(i == 0){
			$(this).removeClass('fix').css('opacity',1);
			$(this).addClass('first').addClass('vis');
		}
		$(this).clone().appendTo('.col.right');
		$(this).removeClass('mini');
		$(this).children('.vidi').remove();
		$tp = $(this);
		$tl = $('.mini:last');
		$tl.children('.vid').remove();
		$tl.data("d", {tp: $tp});
		$tl.click(function(){
			$('.vis').removeClass('vis').addClass('fix').stop().animate({opacity: 0}, 400 );
			$(this).data("d").tp.addClass('vis').removeClass('fix').stop().animate({opacity: 1}, 400 );
		});
	});
	$('.mini').removeClass('fix').removeClass('vis').css('opacity',1);
});


