var rootPath = "js/peyoteJS";
var uiRootView = document.getElementById('toolbar');
var uiWidth = "800px";

var videoPage = "<iframe width=\"800\" height=\"400\" src=\"http://www.youtube.com/embed/w31D5Ly4QL0\" frameborder=\"0\" allowfullscreen></iframe>";

var slideShowPage = "<img src=\"images/card.png\" \" > ";

var homePage = "<img src=\"images/card.png\" \" > ";

var currentImageNumber = 0;

var slideShowGo = 1;

var Animation = function(name,frame,type,src)
{
	this.type = type;
	this.frame = frame;
	this.name = name;
	this.array = src;
	this.frameCount = src.length;
	this.framerate = 2500;
	this.lock = 1;
	this.currentFrame = 0; 
	
	this.init = function()
	{
		
	};
	
	this.buffer = function()
	{
		
	};

	this.togglePlayback = function()
	{

		if(this.lock == 1)
		{
			this.lock = 0;
			return;
		}
		else 
			this.lock = 1;		
		
		return;
	};
	
	this.pause = function()
	{
		this.lock = 1;
	};
	
	this.play = function()
	{
		this.lock = 0;
		this.Go();
	};
	
	this.nextFrame  = function()
	{
		if(this.currentFrame < this.frameCount - 1)
		{
			this.Draw();
			return;
		}
		else
		{
			this.currentFrame = 0;
			this.Draw();
		};
	};

	this.faster = function()
	{
		if(this.framerate > 0)
			this.framerate = this.framerate - 200;
	};
	
	this.slower = function()
	{
		
		this.framerate = this.framerate + 200;		
	};
	
	this.previousFrame = function()
	{
		if(this.currentFrame > 2)
		{
			this.currentFrame = this.currentFrame - 2;
			this.Draw();
			return;
		}
		else
		{
			this.currentFrame = this.frameCount - 1;
			this.Draw();
			return;
		}
		return;
	};
	
	this.callFrame = function(frame)
	{
		this.currentFrame = frame;
	};
	
	this.controlBar = "		<b onclick=\"gallery.previousFrame()\" > Previous Picture</b> | \
							<b onclick=\"gallery.nextFrame()\">Next Picture</b>";
	
	this.videoControlBar = "<b onclick=\"gallery.togglePlayback()\"> play/pause </b> | \
							<b onclick=\"gallery.slower()\"> Slower </b> | \
							<b onclick=\"gallery.faster()\"> Faster </b>"
	
	//for POP effect
	this.aWindow = 0;
	this.bWindow = 0;
	this.cWindow = 0;
	
	this.aOpt = 0;
	this.bOpt = 0;
	this.cOpt = 0;
	
	this.aPhase = 0;
	this.bPhase = 0;
	this.cPhase = 0;
	
	this.Draw = function()
	{
		if(this.type == "SLIDESHOW" )
		{			
			var imageName = this.array[this.currentFrame]+"<br>";
			
			if(this.galleryMode)
				var imageCode = "<br>"+"<div id=\"imageBox\"> <img height=\"80%\" src=\"images/wedding/"+this.array[this.currentFrame]+"\"></div>"+"<br>"+this.videoControlBar+this.controlBar;
			else
				var imageCode = "<br>"+"<div id=\"imageBox\"> <img height=\"80%\" src=\"images/wedding/"+this.array[this.currentFrame]+"\"></div> "+"<br>"+this.controlBar;
			document.getElementById(this.frame).innerHTML = imageCode;	
			this.currentFrame++;
		}
		if(this.type == "POP" )
		{
			/*
			var trayFrame ;//= new BFrame(300,520,50,300);
			trayWindow = new BDirectWindow(trayFrame,"trayWindow",0,"TRAY_VIEW",0);
			trayMenu();
			trayWindow.Show();		
			
			barFrame = new BFrame(0,0,10,800);
			barWindow = new BDirectWindow(barFrame,"barWindow",0,"TRAY_VIEW",0);
			barMenu();
			barWindow.Show();
			*/
			
		};
	}
	
	this.galleryMode = 1;
	
	this.Go = function()
	{
		this.Draw();		

		if(this.currentFrame < this.frameCount - 1 && !this.lock)//
		{

			this.currentFrame++;			
			setTimeout(this.Go,this.framerate);
		}
		else
		{
			if(this.lock == 0)
			{
				this.currentFrame = 0;
				setTimeout(this.Go,this.framerate);
				document.getElementById("toolbar").innerHTML = "locked";
			}
			return;
		};	
		
	};
};

var gallery = 0;

function slideShow()
{
	if(gallery.currentFrame < images.length - 1 && !gallery.lock)
	{
		gallery.Draw();
		setTimeout(slideShow,gallery.framerate);
		return;
	}
	else
	{
		setTimeout(slideShow,gallery.framerate);
		return;
	};
	return;
};

function loadHomePage()
{
	gallery.galleryMode = 1;
	gallery.play();
};

function loadVideoPage()
{
	gallery.pause();
	document.getElementById("title_card").innerHTML = videoPage;
};

function loadImagePage()
{
	gallery.pause();
	gallery.galleryMode = 0;
	gallery.Draw();		
};

function loadMessagePage()
{
	gallery.pause();
	document.getElementById("title_card").innerHTML = messagesPage;		
};

function loadSlideShowPage()
{
	gallery.galleryMode = 1;
	gallery.play();
};

function main()
{
    detectSystem();
	
    if(system_mode == "TV")
    {
        screen_mode == "PORTRAIT";
    }
    else if(system_mode == "MOBILE")
    {
        screen_mode == "LANDSCAPE";    
    }
    else if(system_mode == "DESKTOP")
    {
        screen_mode == "PORTRAIT";    
    }    
    else if(system_mode == "TERMINAL")
    {
        screen_mode == "PORTRAIT";    
    }    
    else if(system_mode == "AUTO")
    {
        screen_mode == "PORTRAIT";    
    }     
	
    loadJS(peyoteFilePath+"/corekit/BBase.js");
	
    peyote.appkit();
    peyote.gamekit();
	peyote.inputkit();
    peyote.mediakit();
    peyote.storagekit();
	peyote.themekit();
    peyote.uikit();
    peyote.animationkit();   
	
	toolInit();
	
	gallery = new Animation("Wedding Album","title_card","SLIDESHOW",images);
	gallery.lock = 0;
	slideShow();
	
	gallery2 = new Animation("Wedding Album","body","POP",images);	
	gallery2.Draw();
	
	
};