// - YouTubeBlock ---------------------------------------------------------------------------------
function DisplayYouTubeBlock(client, vid){

	var ytItem = $('<div id="YouTubeItem"></div>').css('opacity', 0.00).appendTo('#youtube_base_' + client);
	if(client == 'iphone'){
		var ytImgSrc = 'http://i.ytimg.com/vi/' + vid + '/0.jpg';
		var ytImgElem = '<div class="cnt"><img id="img_' + vid + '" width="530" height="397" /></div>';
		ytImgElem += '<div class="play"><a href="http://www.youtube.com/v/' + vid + '?autoplay=1">';
		ytImgElem += '<img src="../../preview/youtube/js/youTubeEmbed/img/play.png" width="106" height="102" /></a></div>';
		ytItem.append(ytImgElem);
		$('#img_' + vid).attr('src', ytImgSrc).bind('load', function(){
			ytItem.animate({opacity: 1.00}, 200);
		});
	}else if(client == 'macsafari'){
		var ytTag = '<iframe title="YouTube video player" class="youtube-player" type="text/html" width="530" height="298" src="http://www.youtube.com/embed/' + vid + '?rel=0" frameborder="0" allowFullScreen></iframe>';
		ytItem.append(ytTag).animate({opacity: 1.00}, 200);;
	}else{
		ytItem.youTubeEmbed({
			video			: 'http://www.youtube.com/watch?v=' + vid,
			width			: 530, 		// Height is calculated automatically
			progressBar	: false		// Hide the progress bar
		}).delay(1000).animate({opacity: 1.00}, 200);
	}
}

$(function(){

	var ua = navigator.userAgent;
	var ytClient;
	var yt_number = ytVidAry.length;
	var slide_number = Math.ceil(yt_number / 3);
	var li_cnt = -1;
	var div_cnt = 0;

// - UserAgent Check ---------------------------------------------------------------------------------
	if(ua.indexOf('iPhone') > -1 || ua.indexOf('iPad') > -1 || ua.indexOf('Android') > -1){
//		ytClient = 'normal';
		ytClient = 'iphone';
	}else if(ua.indexOf('Macintosh') > -1 && ua.indexOf('Safari') > -1){
		if(ua.indexOf('PPC') > -1){
			ytClient = 'macsafari';
		}else{
			ytClient = 'normal';
		}
	}else{
		ytClient = 'normal';
//		ytClient = 'macsafari';
//		ytClient = 'iphone';
	}


// - YouTubeBlock Publish ---------------------------------------------------------------------------------
	$('<div id="youtube_base_' + ytClient + '"></div>').appendTo('#youtube_base');
	DisplayYouTubeBlock(ytClient, ytVidAry[0]);

// - YouTubeSlideList Publish ---------------------------------------------------------------------------------
	$('<ul></ul>').appendTo('#youtube_slide .slide_wrapper');
	for(var idx1=0;idx1<yt_number;idx1++){

		if(div_cnt == 0){
			li_cnt++;
			$('<li id="slide-' + li_cnt + '"></li>').appendTo('#youtube_slide .slide_wrapper ul');
		}

		var thumb_id;
		if(ytVidAry[idx1] == 'r3HbFTtG3Uc'){
			thumb_id = '2';
		}else{
			thumb_id = '1';
		}

		var slider_Html = '<div class="sumbnail" id="item_' + li_cnt + '_' + div_cnt + '"><a href="#">';
		slider_Html += '<img src="http://i.ytimg.com/vi/' + ytVidAry[idx1] + '/' + thumb_id + '.jpg" alt="" id="' + ytVidAry[idx1] + '" /></a></div>';
		$(slider_Html).appendTo('#youtube_slide .slide_wrapper #slide-' + li_cnt);
		
		div_cnt = (++div_cnt == 3) ? 0 : div_cnt;

	}

// - YouTube List Slider -----------------------------------------------------------------------------
	var sldtime = 400;

	var slide_wrapper_width = parseFloat( $('#youtube_slide .slide_wrapper').css('width') );
	var slider_width = slide_wrapper_width * slide_number;

	$('#youtube_slide ul').css({
		width: slider_width + 'px',
		left: '0px'
	});

	// LeftButton ClickEvent
	$('#youtube_slide .left_btn img').click(function(){
		var sliderObj = $('#youtube_slide ul:not(:animated)');
		if(slide_number > 1 && sliderObj){
			var leftPoint = parseFloat( sliderObj.css('left') );
			if(leftPoint == 0){
				leftPoint = (slider_width - slide_wrapper_width) * -1;
				sliderObj.find('li:first').appendTo(sliderObj);
				sliderObj.css('left', leftPoint + 'px');
			}
			leftPoint += slide_wrapper_width;
			sliderObj.animate( { left: leftPoint + 'px' }, sldtime, null );
		}
		return false;
	});

	// RightButton ClickEvent
	$('#youtube_slide .right_btn img').click(function(){
		var sliderObj = $('#youtube_slide ul:not(:animated)');	
		if(slide_number > 1 && sliderObj){
			var leftPoint = parseFloat( sliderObj.css('left') );
			if(leftPoint == (slider_width - slide_wrapper_width) * -1){
				leftPoint = 0;
				sliderObj.find('li:last').prependTo(sliderObj);
				sliderObj.css('left', '0px');
			}
			leftPoint -= slide_wrapper_width;
			sliderObj.animate( { left: leftPoint + 'px' }, sldtime, null );
		}
		return false;
	});

	// ListSelect ClickEvent
	$('#youtube_slide .sumbnail img').click(function(ev){

		$('#youtube_base_' + ytClient + ' #YouTubeItem').remove();
		DisplayYouTubeBlock(ytClient, ev.target.id)
		return false;

	});


});