$(document).ready(function(){
	//PRELAOD CSS IMAGES
	$.preloadCssImages();
	//PLUS BUTTON
	$(".plus").click(function() { 
		var img_ID = $('.imgBox > *:visible').attr("id");
		img_ID = img_ID.split('_', 1);
		img_ID = parseInt(img_ID)+1;
		showImg(img_ID);
    });
	//MINUS BUTTON
	$(".minus").click(function() { 
		var img_ID = $('.imgBox > *:visible').attr("id");
		img_ID = img_ID.split('_', 1);
		img_ID = parseInt(img_ID)-1;
		showImg(img_ID);
    });
	//SHOW IMAGE,
	function showImg(img_ID){
		var folder_ID = $('.imgCont:visible').attr("id");
		folder_ID = folder_ID.split('_', 1);
		$('.imgCont:visible').fadeOut("fast", function(){
			var numImgs = $('#'+folder_ID+'_imgBox > *').length;
			$('#'+folder_ID+'_info, #'+folder_ID+'_imgBox > *, #'+folder_ID+'_cycleNav').hide();
			if(img_ID >= numImgs){
				img_ID = '0';
			}else if(img_ID < 0){
				img_ID = numImgs-1;
			}
			$("#"+img_ID+'_'+folder_ID).show();
			if(img_ID == 0){
				$('#'+folder_ID+'_info').show();
			}
			var chkClass = $("#"+img_ID+'_'+folder_ID).attr("class");
			if(chkClass == 'cycleBox'){
				if($("#0_cycle_"+folder_ID).length){
					var imgWidth = $("#0_cycle_"+folder_ID).attr('width')+30;
				} else {
					var imgWidth = 550;
				}
				$('#'+folder_ID+'_cycleNav').show();
			} else {
				var imgWidth = $("#"+img_ID+'_'+folder_ID).attr('width')+30;
			}
			$("#"+folder_ID+'_work').width(imgWidth).fadeIn("fast");
		});
	}
	//CREATE AJAXMANAGER 
	var myAjax = $.manageAjax.create('ajaxCall', { 
					queue		:	'clear',
					abortOld	:	true,
					queue		: 	'clear',
					maxRequests	:	1
				}); 
	//LOAD NEW WORK
	$(".workBttn").click(function (event) { 
		var folder_ID = $(this).attr("id");
		//$(".workBttn").css({'background-color': '', 'color': '', 'cursor' : 'pointer'});
		//$(this).css({'background-color' : '#333333', 'color' : '#FF1F3F', 'cursor' : 'default'});
		var curID = $('.imgCont:visible').attr("id");
		curID = curID.split("_",1)
		if(curID != folder_ID){
			$('.imgCont:visible').stop(true, true).fadeOut("slow", function(){
				$('.loader').hide().empty();
				if($('#'+folder_ID+'_imgBox').length){
					$('.imgCont, .imgBox > *, .cycleNav').hide();//.cycleBox???????
					$('#'+folder_ID+'_info, #'+folder_ID+'_imgBox , #0_'+folder_ID).show();
					$('#'+folder_ID+'_work').width(550).fadeIn("slow");
				} else {
					workLoad(folder_ID);
				}
			});
			$('html, body').animate({scrollTop:0}, 'slow');
		}
    });
	//AJAX REQUEST IMAGES & PRELOAD IMAGES
	function workLoad(folder_ID){
		$("#"+folder_ID+'_work').width(550);
		myAjax.add({
			data : {folderID:folder_ID},
			dataType: "json",
			success: function(data) {
				$('.imgCont').hide();
				var folderID = data[0].folderID;
				$('<div id="'+folderID+'_work" class="imgCont"><div class="imgTop"><div class="imgTopL"></div><div class="imgTopR"></div></div><div id="'+folderID+'_imgBox" class="imgBox"></div><div class="imgBottom"><div class="imgBottomL"></div><div class="imgBottomR"></div></div><div id="'+folderID+'_info" class="infoCont"></div></div>').insertAfter('.loader');
				//WORK INFO
				var workTitle = '<div class="infoHead">'+data[0].title+'</div>';
				var workInfo = data[0].info;
				var strMtch = workInfo.search(/www./);
				if(strMtch != -1){
					workInfo = '<a href="http://'+workInfo+'" target="_blank">'+workInfo+'</a>';
				} else {
					workInfo = '<div class="infoDet">'+workInfo+'</div>';
				}
				var workCopy = '<div class="infoCopy">'+data[0].copy+'</div>';
				$('#'+folderID+'_info').append(workTitle+workInfo+workCopy).show();
				//PRELOAD IMAGES
				$('#'+folderID+'_work').width(data[1].width + 30);
				var imgsLngth = data.length;
				var arr = new Array();
				var cycleArr = new Array();
				var k = 0;
				for (i=1; i<imgsLngth; i++) {
					if(data[i].cycle == 'true'){
						cycleArr.push({ src: 'images/'+data[i].folderID+'/'+data[i].name, id: k+'_cycle_'+folderID, width: data[i].width});
						k++;
					}else{
						arr.push({ src: 'images/'+data[i].folderID+'/'+data[i].name, id: data[i].imgID+'_'+data[i].folderID, width: data[i].width});
					}
				}
				$("#"+folderID+"_imgBox").imageLoader({
					images :	arr,
					loaderLoc : '.loader'
				}, function(){
					$('.imgCont').hide();
					$("#0_"+folderID).show();
					$("#"+folderID+"_work").fadeIn("slow");
					if(cycleArr != ''){
						$("#"+folderID+"_imgBox").append('<div id="'+arr.length+'_'+folderID+'" class="cycleBox"><div class="subLoader"></div></div>');
						$('<div id="'+folderID+'_cycleNav" class="cycleNav"><div id="'+folderID+'_cycleBack" class="cycleBack"></div><div id="'+folderID+'_cycleFwd" class="cycleFwd"></div><div id="'+folderID+'_cycleMrk" class="cycleMrk"></div><div class="cycleStep">Original Image</div></div>').insertAfter("#"+folderID+"_work > .imgBottom");
						$('#'+arr.length+'_'+folderID).imageLoader({
							images :	cycleArr,
							loaderLoc : '.subLoader'
						}, function(){
							if($("#4_"+folderID).is(":visible")){
								$("#"+folder_ID+'_work').width((cycleArr[0].width)+30);
							}
							for(i=cycleArr.length; i>0; i--){
								var posID = i - 1;
								$('#'+folderID+'_cycleNav').prepend("<div id='"+posID+"_cyclePos' class='cycleBttn'>"+i+"</div>");
							}
							//CYCLE NAV
							$('#'+folderID+'_cycleNav > #0_cyclePos').css({'color' : '#E01834'});
							$('.cycleBttn').bind({
								click: function() {
									$('#'+folderID+'_cycleNav > .cycleBttn').css({'color' : '#888888'});
									$(this).css({'color' : '#E01834'});
									var img_ID = $(this).attr("id");
									img_ID = img_ID.split('_', 1);
									var folder_ID = $('.imgCont:visible').attr("id");
									folder_ID = folder_ID.split('_', 1);
									var cycleBoxID = $('#'+folder_ID+'_imgBox').children().length;
									cycleBoxID = parseInt(cycleBoxID)-1;
									var numImgs = $('#'+cycleBoxID+'_'+folder_ID).children().length;
									numImgs = numImgs-2;
									$("#"+cycleBoxID+"_"+folder_ID+" > *").hide();//.cycleBox
									$("#"+img_ID+"_cycle_"+folder_ID).show();
									var bttnPos = (img_ID*27);
									$('#'+folder_ID+'_cycleMrk').animate({
											left: bttnPos
										  }, 'fast');
									if(img_ID == 0){
										$('#'+folder_ID+'_cycleNav > .cycleStep').empty().prepend('Original Image');
									} else if(img_ID == numImgs){
										$('#'+folder_ID+'_cycleNav > .cycleStep').empty().prepend('Final Image');
									}else {
										$('#'+folder_ID+'_cycleNav > .cycleStep').empty().prepend('Stage '+img_ID);
									}
								},
								mouseenter: function() {
								    $(this).css({'color' : '#E01834'});
								},
								mouseleave: function() {
									var bttnID = $(this).attr('id');
									bttnID = bttnID.split('_', 1);
									var cycleBoxID = $('#'+folderID+'_imgBox > div:visible').attr('id');
									var img_ID = $("#"+cycleBoxID+" > img:visible").attr('id');
									img_ID = img_ID.split('_', 1);
									img_ID = parseInt(img_ID)
									bttnID = parseInt(bttnID)
									if(bttnID != img_ID){
										$(this).css({'color' : '#888888'});
									}
								}
							});
							//CYCLE FWD/BCK
							$('.cycleBack, .cycleFwd').bind('click', function() {
								var cycleBoxID = $('#'+folder_ID+'_imgBox').children().length;
								cycleBoxID = parseInt(cycleBoxID)-1;
								var img_ID = $('#'+cycleBoxID+'_'+folder_ID+' > img:visible').attr("id");
								img_ID = img_ID.split('_', 1);
								var bttnClass = $(this).attr('class');
								if(bttnClass == 'cycleBack'){
									if(img_ID != 0){
										img_ID = parseInt(img_ID)-1;
										$('#'+folder_ID+'_cycleMrk').animate({
											left: '-=27'
										  }, 'fast');
									}
								} else {
									var bttnLgth = $('#'+folder_ID+'_cycleNav').children().length;
									bttnLgth = parseInt(bttnLgth)-5;
									if(img_ID != bttnLgth){
										img_ID = parseInt(img_ID)+1;
										$('#'+folder_ID+'_cycleMrk').animate({
											left: '+=27'
										  }, 'fast');
									}
								}
								$("#"+cycleBoxID+"_"+folder_ID+" > *").hide();
								$("#"+img_ID+"_cycle_"+folder_ID).show();
								var numImgs = $('#'+cycleBoxID+'_'+folder_ID).children().length;
								numImgs = numImgs-2;
								if(img_ID == '0'){
									$('#'+folder_ID+'_cycleNav > .cycleStep').empty().prepend('Original Image');
								} else if(img_ID == numImgs){
									$('#'+folder_ID+'_cycleNav > .cycleStep').empty().prepend('Final Image');
								} else {
									$('#'+folder_ID+'_cycleNav > .cycleStep').empty().prepend('Stage '+img_ID);
								}
								$('#'+folderID+'_cycleNav > .cycleBttn').css({'color' : '#888888'});
								$('#'+img_ID+'_cyclePos').css({'color' : '#E01834'});
							});
							$("#0_cycle_"+folderID).show();
						});
					}
				});
			},
			url: 'inc/workLoad.php'
		 });
	};
	//image cycle
	workLoad(0);
});