// JavaScript Document

var xmlData = "/megastarXMLData.aspx?RequestType=Galleries&&visLang=";

if (ddl_session_time_lang == 1) {
	xmlData += "1";
} else {
	xmlData += "2";
}

var htmlData = "";
var albumsSize = 0;

$(document).ready(function() {
	
	$.get(xmlData,function(data) {  
		xuLyXMLData(data);
	},"xml");

});

function xuLyXMLData(data) {
	var boxTitle = "";
	if(ddl_session_time_lang == 1) boxTitle = "Thư viện phim ảnh";
	else boxTitle = "Galleries";


	htmlData += "";
	htmlData +=	'<div class="standard_box">';
	htmlData +=	'	<div class="header">';
	htmlData +=	'		<div class="insidel">';
	htmlData +=	'			<div class="insider">';
	htmlData +=	'			   <div class="left_header">'+boxTitle+'</div>';
	htmlData +=	'			   <div class="right_header">';
	htmlData +=	'					<a id="albums_next" class="next_btn_gray" href="javascript:void(0);">Next</a>';
	htmlData +=	'					<a id="albums_back" class="back_btn_gray" href="javascript:void(0);">Back</a>';
	htmlData +=	'				</div>';
	htmlData +=	'			</div>';
	htmlData +=	'		</div>';
	htmlData +=	'	</div>';
	htmlData +=	'</div>';
	
	
htmlData += '<div class="lastest">';
htmlData += '	<div id="albums_div" style="height:170px;" class="content">';
	
// big loop here
var albums = $(data).find('album');
albumsSize = $(albums).size();

$(albums).each(function(albumIndex){

var albumName = $(this).find('album_title').text();

htmlData += '<div class="film" >';
htmlData += '<div class="wallpaper">';
htmlData += '    <div class="heading">';
htmlData += '        <span class="title">'+albumName+'</span>';
htmlData += '        <span id="wall_back_'+albumIndex+'"><a class="next" href="javascript:void(0);"><span>Back</span></a></span>';
htmlData += '        <span id="wall_next_'+albumIndex+'"><a class="back" href="javascript:void(0);"><span>Next</span></a></span>';
htmlData += '    </div>';


htmlData += '    <div id="slider_'+albumIndex+'" class="preview">';	
			// wallpaper loop here
			var tempImgSrcArray = [];
			var tempDownloadLinkArray = [];
			var TypeArray = [];
			var TitleArray = [];
			var count = 0;
			
			
			var photos = $(this).find('photo');
			var photosSize = $(photos).size();
			$(photos).each(function(index){
				var imgSrc = $(this).find('photo_thumbnail').text();
				var downloadLink = $(this).find('photo_thumbnail').attr('downloadLink');
				var type = $(this).find('photo_thumbnail').attr('type');
				var title = $(this).find('photo_description').text();			
				
				tempImgSrcArray.push(imgSrc);
				tempDownloadLinkArray.push(downloadLink);
				TypeArray.push(type);
				TitleArray.push(title);
				
				count ++ ;
				if(count >= 4 || index == (photosSize - 1)) {					
htmlData += '        <div class="wall_box" style="display:block">';
					for(i= 0; i < tempImgSrcArray.length; i ++) {
						var description = albumName;
						if(TitleArray[i] != ""){
							description += ' - ' + TitleArray[i];
						}
						if(TypeArray[i] == "image"){
							htmlData += '<a href="'+ tempDownloadLinkArray[i] +'" rel="gallery" title="' + description + '"><img src="'+ tempImgSrcArray[i] +'"/></a>';
						}
						else{
							htmlData += '<a href="'+ tempDownloadLinkArray[i] +'" rel="video" title="' + description + '"><img src="'+ tempImgSrcArray[i] +'"/><div class="video_status"></div></a>';
						}
					}
htmlData += '        	<div class="clearfloats"></div>';					
htmlData += '        </div>';
					count = 0;
					tempImgSrcArray = [];
					tempDownloadLinkArray = [];		
					TypeArray = [];
					TitleArray = [];
				} // this block is to make a block of 4 images inside a <div style="display:block"> </div>.				
			
			}); // end of Wallpaper loop

htmlData += '    </div>';
    
htmlData += ' </div>'; 
htmlData += '<div class="clearfloats"></div>';

htmlData += '</div>';

}); // end of big loop here

htmlData += '	</div>';
htmlData += '</div>';
	
	// write htmlData taken from the xml file to the div with id = "#promo_left".
	$("#promo_left").prepend(htmlData);
	$("#promo_left a[rel='gallery']").colorbox({
		width:"60%"
	});
	$("#promo_left a[rel='video']").colorbox({
		iframe:true,
		innerWidth:625,
		innerHeight:344, 
		onComplete:function(){
			var html_ = $("#cboxCurrent").html();
			html_ = html_.replace("image","Video");
			html_ = html_.replace("of","/");
			$("#cboxCurrent").html(html_)
		}
	});
	
	// now add animation to the HTML data.
	$('#albums_div').cycle({
		fx: 'fade',// choose your transition type, ex: fade, scrollUp, shuffle, etc...
		timeout:  90000,
		prev: '#albums_back',
		next: '#albums_next'
	});
	
	for (j=0 ; j < albumsSize;  j++) {
		$('#slider_'+j).cycle({
			fx: 'fade',// choose your transition type, ex: fade, scrollUp, shuffle, etc...
			timeout:  20000,
			prev: '#wall_back_'+j,
			next: '#wall_next_'+j
		});
	}
}