var gimage_array = [];
var image_list = [];
var image_name = "";
var JSONModel;
var c;
var gname = "";
var gnumber = 0;
var myModel;
var open_box = false;
var gWidth = 300;
var gHeight = 300;

function openGallery(gallery_name){
	if(open_box == false){
		open_box = true;
		$("giClose").removeEvents("click");
		$("gSheet").removeEvents("dblclick"); 

		$("loadingmsg").innerHTML = "";

		$("gSheet").setStyles({
			'top': -$(window).getScroll().y,
			'height':$(window).getScrollSize().y+$(window).getScroll().y, 
			"display":"block" 
		});
				
		var fadeFx = new Fx.Style("gSheet", 'opacity', {wait: false, duration: 300}).set(0);
		fadeFx.start(0.8);

		$("giBox").style.display = 'block';
		$("giBox").setStyles({
			'top': $(window).getScroll().y+30,
			'left': (($(window).getScrollSize().x/2)-(665/2)) + "px",
			'width': "625px",
			'height': "560px",
		});5
		$("iFrame").setStyles({
			'width': "620px",
			'height': "540px",
		});

		$("iFrame").src = '/gallery/' + gallery_name + '/';

		$("gSheet").addEvent("dblclick", closeiBox);
		$("giClose").addEvent("click", closeiBox);
	}	
}


function openVideo(video_name){
	if(open_box == false){
		open_box = true;
		$("giClose").removeEvents("click");
		$("gSheet").removeEvents("dblclick"); 

		$("loadingmsg").innerHTML = "  Please be patient, this video may take a while to load.";

		$("gSheet").setStyles({ 'top': -$(window).getScroll().y,'height':$(window).getScrollSize().y+$(window).getScroll().y, "display":"block" });
		var fadeFx = new Fx.Style("gSheet", 'opacity', {wait: false, duration: 300}).set(0);
		fadeFx.start(0.8);

		$("giBox").style.display = 'block';
		$("giBox").setStyles({
			'top': $(window).getScroll().y+30,
			'left': (($(window).getScrollSize().x/2)-(550/2)) + "px",
			'width': "456px",
			'height': "380px",
		});
		$("iFrame").setStyles({
			'width': "450px",
			'height': "360px",
		});

		$("iFrame").src = '/video/' + video_name + '/';

		$("gSheet").addEvent("dblclick", closeiBox);
		$("giClose").addEvent("click", closeiBox);

	}
}

function openImage(gallery_name, image_number){

    var LoadBox = function(JSONModel) {	
		$("gClose").style.color = '#808080'; 
		gWidth = 300;
		gHeight = 300;

		c = 0;
		image_list["pk"] = [];
		image_list["image"] = [];		
        JSONModel.each(function(row) {
			image_list["pk"][c] = row["pk"];
			image_list["image"][c] = row["fields"]["image"];
			c++;
		})
		
		if(open_box == false){
			open_box = true;
			$("gClose").removeEvents("click");
			$("gSheet").removeEvents("dblclick"); 
			$("gNext").removeEvents("click");
			$("gPrevious").removeEvents("click");
		
			loadImage();
	
			$("gSheet").addEvent("dblclick", closeBox);
			$("gClose").addEvent("click", closeBox);
			
			$("gNext").addEvent("click", function(){
				gnumber++;
				if(gnumber == image_list["pk"].length){
					gnumber = 0;
				}
				loadImage();	
			});
			$("gPrevious").addEvent("click", function(){
				gnumber--;
				if(gnumber == -1){
					gnumber = image_list["pk"].length - 1;
				}
				loadImage();
			});
			
		}
	}

	gnumber = image_number;
	gname = gallery_name;
	
	$("gSheet").setStyles({ 'top': -$(window).getScroll().y,'height':$(window).getScrollSize().y+$(window).getScroll().y, "display":"block" });
	var fadeFx = new Fx.Style("gSheet", 'opacity', {wait: false, duration: 300}).set(0);
	fadeFx.start(0.8);

	$("gImage").style.display = 'block';
	$("gBox").style.display = 'block';
	$("gImage").src = '/static/img/ajax-loader.gif';
	$("gImage").style.width = '220px';
	$("gImage").style.height = '19px';
	$("gBox").style.width = '300px';
	$("gBox").style.height = '300px';
	$("gPresent").style.height = '250px';
	$("gBox").setStyle('top',$(window).getScroll().y+30);
	$("gBox").style.left = (($(window).getScrollSize().x/2)-(350/2)) + "px";

	var fadeFx = new Fx.Style("gBox", 'opacity', {wait: false, duration: 300}).set(0);
	fadeFx.start(1);

	
    var request = new Request.JSON({
        	url: '/gallery/list/' + gname + '/',
	        onComplete: function(jsonObj) {
	                LoadBox(jsonObj);
	        }
    }).send();
}

function loadImage(){
	var sitImage = function(JSONModel){
		JSONModel = JSONModel;
		if(JSONModel["x"] == 0 || JSONModel["y"] == 0 || image_list["pk"].length == 0){
			$("gCount").innerHTML = "Error!";
			$("gImage").src = '/static/img/ajax-loader.gif';
			$("gImage").style.width = '220px';
			$("gImage").style.height = '19px';
			$("gBox").style.width = '300px';
			$("gBox").style.height = '300px';
			$("gPresent").style.height = '250px';
			$("gBox").style.top = ($(window).getScroll().y+10)+"px";
			$("gBox").style.left = (($(window).getScrollSize().x/2)-(350/2)) + "px";
		}else{
			var images = [JSONModel["path"]];
		    var loader = new Asset.images(images, {
		        onProgress: function(counter,index) {
					$("gCount").innerHTML = "Loading...";
					$("gImage").src = '/static/img/ajax-loader.gif';
					$("gImage").style.width = '220px';
					$("gImage").style.height = '19px';
					$("gBox").style.width = '300px';
					$("gBox").style.height = '300px';
					$("gPresent").style.height = '250px';
					$("gBox").style.top = ($(window).getScroll().y+10)+"px";
					$("gBox").style.left = (($(window).getScrollSize().x/2)-(300/2)) + "px";
		        },
		        onComplete: function() {
		            images.each(function(im) {
						if(Number(JSONModel["x"]) > 800){
							gWidth = 800;
							gHeight = (800/Number(JSONModel["x"])) * Number(JSONModel["y"]);
						}else{
							gWidth = Number(JSONModel["x"]);
							gHeight = Number(JSONModel["y"]);
						}

						$("gCount").innerHTML = (gnumber+1) + "/" + image_list["pk"].length + " Images";

						$("gImage").src = '/static/' + image_name;

						var fx = new Fx.Styles("gBox", {duration:500, wait:true})
						fx.start({ 
							"width":gWidth + 20 + "px", 
							"height": gHeight + 80 + "px", 
							"left": (($(window).getScrollSize().x/2)-(gWidth/2)) + "px", 
							"top": $(window).getScroll().y+10
						});

						var fx = new Fx.Styles("gImage", {duration:500, wait:true})
						fx.start({ 
							"width":gWidth  + "px", 
							"height": gHeight + "px", 
						});
						var fx = new Fx.Styles("gPresent", {duration:500, wait:true})
						fx.start({ 
							"height": gHeight + "px", 
						});
		            });
		        }
		    });
			
		}
		
	}

	try{
		image_name = image_list["image"][gnumber];
	}catch(error){
		image_name = "";
		image_list["pk"] = [];
	}
	full_path = '/static/' + image_name;
		
	$("gCount").innerHTML = "Loading...";
	$("gImage").src = '/static/img/ajax-loader.gif';
	$("gImage").style.width = '220px';
	$("gImage").style.height = '19px';
	$("gBox").style.width = '300px';
	$("gBox").style.height = '300px';
	$("gPresent").style.height = '250px';
	$("gBox").style.top = ($(window).getScroll().y+10)+"px";
	$("gBox").style.left = (($(window).getScrollSize().x/2)-(350/2)) + "px";
	
	var request = new Request.JSON({
		url: '/gallery/sit/' + image_list["pk"][gnumber] + "/",
		onComplete: function(jsonObj) {
			sitImage(jsonObj);
		}
	}).send();

}

function closeBox(){
	$("gBox").style.color = '#fff';
	var fadeFx = new Fx.Style("gBox", 'opacity', {wait: false, duration: 500, onComplete: closeSheet}).set(1);
	fadeFx.start(0);
}

function closeiBox(){
	$("giBox").style.display = 'none';
	$("iFrame").src = '/video/null/';
	var fadeFx = new Fx.Style("gSheet", 'opacity', {wait: false, duration: 300, onComplete: function(){open_box = false} }).set(0.8);
	fadeFx.start(0);
}
function closeSheet(){
	var fadeFx = new Fx.Style("gSheet", 'opacity', {wait: false, duration: 300, onComplete: function(){open_box = false} }).set(0.8);
	fadeFx.start(0);
}