// JavaScript Document
/*
Image Slider 1.2
Stephen Au Yeung
http://tintat.net

$.fn.initPhotoSlider = function(frameWidth,          //frame width 
								frameHeight,         //frame height
								photo_src_path,      //path of source images(large images)
								photo_thumb_path,    //path of thumbnail images(small images)
								arrVideoData,        //*array of images and captions
								showPicNum,          //display image no. 
								showThumbs,          //display thumbnail images
								bg_color,            //background color of large image
								bg_img,              //background image of large image
								text_align)          //the alignment of caption, 0:left, 1:center, 2:right
*/
function getEmbedVidCode(nType, sVideoCode, nMaxWidth, nMaxHeight) {
   var strHtml = '' ;
   switch (nType)
   {
        case 0 : //YouTube
          strHtml = '<object width="' + nMaxWidth + '" height="' + nMaxHeight + '">' + 
                    '<param name="movie" value="http://www.youtube.com/v/' + sVideoCode + '=en_US&fs=1&rel=0&hd=0"></param>' +
	                '<param name="allowFullScreen" value="true"></param>' +
                    '<param name="allowscriptaccess" value="always"></param>' +
                    '<embed src="http://www.youtube.com/v/' + sVideoCode +'&hl=en_US&fs=1&rel=0' + 
					'&hd=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="' + 
					nMaxWidth + '" height="' +nMaxHeight + '"></embed>' + '</object>' ;
	      break
	   case 1 : //Tudou
	      strHtml = '<embed src="http://www.tudou.com/v/' + sVideoCode + '/v.swf" width="' + nMaxWidth + '" height="' + nMaxHeight + 
                    '" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" quality="high" align="middle" wmode="opaque" ></embed>' ;
		  break
        case 2 : //YouKu
	      strHtml = '<embed src="http://player.youku.com/player.php/sid/' + sVideoCode +  '/v.swf" width="' + nMaxWidth + '" height="' + nMaxHeight + 
                    '" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" quality="high" align="middle" wmode="opaque" ></embed>' ;
		  break
	    case 3 : //KU6
	      strHtml = '<embed src="http://player.ku6.com/refer/' + sVideoCode + '/v.swf" width="' + nMaxWidth + '" height="' + nMaxHeight + 
                    '" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" quality="high" align="middle" wmode="opaque" ></embed>' ;
		  break
	    case 4 : //Google
          strHtml = '<embed id=VideoPlayback src=http://video.google.com/googleplayer.swf?docid=' + sVideoCode + '&hl=en&fs=true style=width:' + nMaxWidth + 'px;height:' + nMaxHeight + 'px allowFullScreen=true allowScriptAccess=always type=application/x-shockwave-flash> </embed>' ;
		  break
		case 8 : //VDO.NEXT minimum width 570
            strHtml = '<embed name="vdoplayer" src="http://vc3.vdonext.com/VC_PROG/vdoplayerV3.swf" flashvars="videoClip=' + sVideoCode + '" width="' + nMaxWidth + '" height="' + nMaxHeight + '" quality="high" allowfullscreen="true" allowscriptaccess="always" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> </embed>' ;
			break 
	    case 100 : //YouTube(new)
          strHtml = '<iframe class="youtube-player" type="text/html" width="' + nMaxWidth + '" height="' + nMaxHeight + '" src="http://www.youtube.com/embed/' + sVideoCode + '" frameborder="0"></iframe>' ;
		  break 
    }
	return strHtml ;
}
$.fn.sliderLoadVideo = function(rootID, nMaxWidth, nMaxHeight) {
    var nNewWidth, nNewaHeight ;
    var nOrgWidth, nOrgHeight ;
	var nOrgRatio, nNewRatio ;
	var sVideoType, sVideoCode, sVideoTitle ;
	var newObj;
	var n = 0 ;
	var strHtml = '' ;
	$(rootID).find('li').removeClass('vid_thumbnail_selected') ;
    sVideoType  = $(this).find('span.vid_slider_data_type').text() ;
    sVideoCode  = $(this).find('span.vid_slider_data_code').text() ;
    sVideoTitle = $(this).find('span.vid_slider_data_title').text() ;
    $(rootID).find('div#vid_slider_content').html('') ;
$(this).addClass('vid_thumbnail_selected') ;
   n = sVideoType - 0 ;
   switch (n)
   {
        case 0 : //YouTube
          strHtml = '<object width="' + nMaxWidth + '" height="' + nMaxHeight + '">' + 
                    '<param name="movie" value="http://www.youtube.com/v/' + sVideoCode + '=en_US&fs=1&rel=0&hd=0"></param>' +
	                '<param name="allowFullScreen" value="true"></param>' +
                    '<param name="allowscriptaccess" value="always"></param>' +
                    '<embed src="http://www.youtube.com/v/' + sVideoCode +'&hl=en_US&fs=1&rel=0' + 
					'&hd=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="' + 
					nMaxWidth + '" height="' +nMaxHeight + '"></embed>' + '</object>' ;
	      break
	   case 1 : //Tudou
	      strHtml = '<embed src="http://www.tudou.com/v/' + sVideoCode + '/v.swf" width="' + nMaxWidth + '" height="' + nMaxHeight + 
                    '" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" quality="high" align="middle" wmode="opaque" ></embed>' ;
		  break
        case 2 : //YouKu
	      strHtml = '<embed src="http://player.youku.com/player.php/sid/' + sVideoCode +  '/v.swf" width="' + nMaxWidth + '" height="' + nMaxHeight + 
                    '" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" quality="high" align="middle" wmode="opaque" ></embed>' ;
		  break
	    case 3 : //KU6
	      strHtml = '<embed src="http://player.ku6.com/refer/' + sVideoCode + '/v.swf" width="' + nMaxWidth + '" height="' + nMaxHeight + 
                    '" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" quality="high" align="middle" wmode="opaque" ></embed>' ;
		  break
	    case 4 : //Google
          strHtml = '<embed id=VideoPlayback src=http://video.google.com/googleplayer.swf?docid=' + sVideoCode + '&hl=en&fs=true style=width:' + nMaxWidth + 'px;height:' + nMaxHeight + 'px allowFullScreen=true allowScriptAccess=always type=application/x-shockwave-flash> </embed>' ;
		  break
		case 8 : //VDO.NEXT minimum width 570
            strHtml = '<embed name="vdoplayer" src="http://vc3.vdonext.com/VC_PROG/vdoplayerV3.swf" flashvars="videoClip=' + sVideoCode + '" width="' + nMaxWidth + '" height="' + nMaxHeight + '" quality="high" allowfullscreen="true" allowscriptaccess="always" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> </embed>' ;
			break 
	    case 100 : //YouTube(new)
          strHtml = '<iframe class="youtube-player" type="text/html" width="' + nMaxWidth + '" height="' + nMaxHeight + '" src="http://www.youtube.com/embed/' + sVideoCode + '" frameborder="0"></iframe>' ;
		  break 
    }
    $(rootID).find('div#vid_slider_content').append(strHtml) ;
};

$.fn.clickToLoadVideo = function(rootID, newWidth, newHeight) { 
    var objClicked = this ;
	var newObj;
    $(objClicked).sliderLoadVideo(rootID, newWidth, newHeight) ;


}

$.fn.initVideoSlider = function(frameWidth, frameHeight,thumbSize, arrVideoData, showPicNum) {
    var rootObj ;
    var newPanelWidth = 0 ;
	var numThumbs = 0 ;
	var containerWidth, containerHeight ;
	var newThumbsWrapperWidth = 0 ;
	var i, thumbdata ;
	var thumbFrame ;
	var numOfPic ;
	var showArrow = true ;
	var new_html_element, ext_html_element ;
	var strPicNum ;
	var thumb_font_size ;
	var thumbWidth, thumbHeight ;
	
	rootObj = this ;

	if ((thumbSize == undefined) || (thumbSize == null) || (thumbSize == '') || (thumbSize <= 0)) {
		thumbSize = 50 ;
	}
	thumbFrame = thumbSize + 16 ;

    // frame width and height
	if (frameWidth == undefined || frameWidth <= 0 ) {
	   frameWidth = 540 ;	
	}
	if (frameHeight == undefined || frameHeight <= 0 ) {
	   frameHeight = 598 ;	
	}
	if (showPicNum == undefined) {
	   showPicNum = false ;
	}

	numOfPic = arrVideoData.length ;
    //IE8 array bug!!??
	numOfPic = arrVideoData.length ;
	if (arrVideoData[numOfPic - 1] == undefined) {
	   numOfPic-- ;
	}

	if ( ((numOfPic * thumbFrame) + 20) <= frameWidth) {
	   showArrow = false ;
	   numThumbs = numOfPic ;
	   newPanelWidth = thumbFrame * numOfPic ;
       newThumbsWrapperWidth = newPanelWidth + 16 ;
	}
	else
	{
	   numThumbs = Math.floor((frameWidth - 60) / thumbFrame) ;
	   newPanelWidth = (numThumbs * thumbFrame) ;
       newThumbsWrapperWidth = newPanelWidth + 60 ;	
	}
    thumb_font_size = Math.floor(thumbSize/5) ;
    $(rootObj).css('width',frameWidth + 'px')
              .css('height',frameHeight + 'px') ; 
			  
   thumbHeight = Math.floor(thumbSize * 0.75) ;
	containerWidth = frameWidth ;
	containerHeight = (frameHeight - thumbHeight - 60) ;	
   if (navigator.appName == 'Microsoft Internet Explorer') {
      ext_html_element = getEmbedVidCode(arrVideoData[0][2],arrVideoData[0][0],containerWidth, containerHeight) ;
   }
   new_html_element = '<div id="vid_slider_bkg">' + 
'      <div id="vid_slider_loading">' + 
'         <div id="vid_slider_container">' + 
'            <div id="vid_slider_video_title"></div>' + 
'            <div id="vid_slider_content">'  + 
'			</div>' + 
'         </div>' + 
'      </div>' + 
'   </div>' + 
'   <div id="vid_slider_thumbnail_wrapper">' + 
'      <div id="vid_slider_panel">' + 
'         <ul id="vid_slider_thumbnails">' + 
'         </ul>' + 
'      </div>' + 
'      <div id="vid_slider_prev_page">' + 
'<div id="vid_slider_prev_page_button"></div>' +
'      </div>' + 
'      <div id="vid_slider_next_page">' + 
'<div id="vid_slider_next_page_button"></div>' +
'      </div>' + 
'   </div>' ;

	$(rootObj).html(new_html_element) ;
	
    new_html_element ='' ;
	ext_html_element = '' ;
    for (i=0;i<numOfPic;i++) {
		thumbdata = '' ;
	    ext_html_element = '' ;
		strPicNum = i + 1 ;
			if (arrVideoData[i][1] != '') {
			   if (!showPicNum) {strPicNum = '';}
//               thumbdata = '<img id="vid_slider_thumb" title="" alt="" src="' + arrVideoData[i][1] + '"/>'  + 
//			   '<span class="vid_slider_data_main_title">' + arrVideoData[i][3] + '</span>'; 
			   thumbdata = '<div id="vid_slider_thumbnail_pic_content">' + '<img src="' + arrVideoData[i][1] + '"/>' + '</div><div id="vid_slider_thumbnail_caption">' + arrVideoData[i][3] + '</div>'
			}
			else {
			   ext_html_element = ' class="vid_no_thumbnail" ' ;
			}
        new_html_element = new_html_element + '<li>' + 
						  '<span class="vid_slider_data_type">' + arrVideoData[i][2] +'</span>' + 
						  '<span class="vid_slider_data_code">' + arrVideoData[i][0] + '</span>' + 
						  '<span class="vid_slider_data_title">' + arrVideoData[i][3] +'</span>' + 
						  '</a>' + 
						  '<div id="vid_slider_thumbnail_pic">' +
						  thumbdata + 
						  '<div id="vid_slider_thumbnail_num"' + ext_html_element + '>' + (i + 1) + '</div>' + 
						  '<div id="vid_slider_thumbnail_cover">' + '</div>' + 
						  '</div>'  +
		                   '</li>' ;						  

    }

   $(rootObj).find('ul#vid_slider_thumbnails').html(new_html_element) ;
  

   $(rootObj).find('div#vid_slider_bkg')
              .css('width',frameWidth + 'px')
              .css('height',(frameHeight - thumbHeight - 60) + 'px') ;

    $(rootObj).find('div#vid_slider_loading')
              .css('width',frameWidth + 'px')
              .css('height',(frameHeight - thumbHeight - 60) + 'px') ;
	
    $(rootObj).find('div#vid_slider_container')
             .css('width',frameWidth + 'px') 
             .css('height',(frameHeight - thumbHeight - 60) + 'px') ;
    $(rootObj).find('div#vid_slider_content')
             .css('width',frameWidth + 'px') 
             .css('height',(frameHeight - thumbHeight - 60) + 'px') ;

	
    $(rootObj).find('div#vid_slider_thumbnail_wrapper')
              .css('width',newThumbsWrapperWidth + 'px')
              .css('height',(thumbHeight + 60) + 'px') ;

    $(rootObj).find('div#vid_slider_panel')
              .css('width',newPanelWidth + 'px')
              .css('height',(thumbHeight + 60) + 'px') ;
    if (showArrow) {
       $(rootObj).find('div#vid_slider_panel').css('left','30px') 
	}
    else {  
	   $(rootObj).find('div#vid_slider_panel').css('left','10px') ;
       $(rootObj).find('div#vid_slider_prev_page').css('display','none') ;
	   $(rootObj).find('div#vid_slider_next_page').css('display','none') ;
    }
    $(rootObj).find('ul#vid_slider_thumbnails')
              .css('height',thumbHeight + 50  + 'px') 
	           .css('width',(thumbFrame * numOfPic) + 'px') ;

    $(rootObj).find('div#vid_slider_prev_page')
	          .css('height',thumbHeight + 50  + 'px') 
              .css('left','10px') ;

   $(rootObj).find('div#vid_slider_prev_page_button')
	         .css('height',thumbHeight + 50  + 'px') ;
			 
    $(rootObj).find('div#vid_slider_next_page')
	          .css('height',thumbHeight + 50  + 'px') 
              .css('left',newPanelWidth + 30 + 'px') ;

   $(rootObj).find('div#vid_slider_next_page_button')
	         .css('height',thumbHeight + 50 + 'px') ;


  $(rootObj).find('li').css('width',thumbSize + 16 + 'px') ;	
  $(rootObj).find('div#vid_slider_thumbnail_pic').css({width : thumbSize + 16 , height : thumbHeight + 50}) ;
  $(rootObj).find('div#vid_slider_thumbnail_pic_content').css({width : thumbSize, height : thumbHeight, top: 0, left:8}) ;
  $(rootObj).find('div#vid_slider_thumbnail_pic_content img').css({width : thumbSize, height : thumbHeight}) ;
  $(rootObj).find('div#vid_slider_thumbnail_caption').css({width : thumbSize , height : 50, top : thumbHeight,left:8}) ;
  $(rootObj).find('img#vid_slider_thumb').css({width : thumbSize, height : thumbHeight}) ;
  $(rootObj).find('div#vid_slider_thumbnail_num').css('font-size',thumb_font_size + 'px') ;
  $(rootObj).find('.vid_no_thumbnail')
            .css('backgroud-color','#ffffff')
            .css('width',thumbSize + 'px')
            .css('height',thumbSize + 'px')
            .css('top','0px')
            .css('left','8px') 
            .fadeTo(0,1) ;

   $(function(){$(rootObj).find('li').click(function(){
      newObj = this ;														   
     $(newObj).clickToLoadVideo(rootObj, containerWidth, containerHeight) ;
      return false;
       });
  });	
	if (showPicNum ) {
  	   $(rootObj).find('div#vid_slider_thumbnail_num').css('display','block');
	}
    //change width of thumbnails container
	i = arrVideoData.length * 54 ;
	//$(thumbnailObj).width(i) ;

    //reset thumbnail panel position
	$(rootObj).find('div#vid_slider_panel').stop().scrollTo('0px', 0,{ axis:'x' });

    //add click event for 'Previous' button
    $(function(){$(rootObj).find('div#vid_slider_prev_page').click(function(){$(rootObj).find('div#vid_slider_panel').stop().scrollTo('-=' + newPanelWidth +'px', 500,{ axis:'x' });});});
	
    //add click event for 'Next' button
    $(function(){$(rootObj).find('div#vid_slider_next_page').click(function(){$(rootObj).find('div#vid_slider_panel').stop().scrollTo('+=' + newPanelWidth +'px', 500,{ axis:'x' });});});

 $(document).ready(function() {
	$(rootObj).find('li:first').clickToLoadVideo(rootObj, containerWidth, containerHeight) ;
 });


}