// Gallery for XY Girl
var canvas;
var CANVAS_WIDTH = 488;
var CANVAS_HEIGHT = 310;

var images = [];
var links = [];
var imageDisplays = [];
var imageIndex = 0;
var previousImageIndex = 0;
var imageCount = 0;
var total;

var ANIMATE_TIME = 300;
var playTimeoutId = 0;
var playing = false;
var TIME_PER_IMAGE = 3000;

var buttons = [];
var buttonText = [];
var BUTTON_WIDTH = 20;
var BUTTON_HEIGHT = 20;
var BUTTON_GUTTER = 2;
var BUTTON_RIGHT_MARGIN = 10;

var MORE_LINK_IMAGE = "images/girl-more.gif";
var MORE_LINK_IMAGE_OVER = "images/girl-more_over.gif";
var moreButton;
var moreButtonOver;


$(document).ready(initGallery);


function initGallery()
{
	getImageList();
	drawCanvas();
	drawImages();
	drawGalleryControls();
	drawMoreButton();
	updateButtonStates();
	play();
}

function getImageList()
{
	$('.galleryListSet li').each(function(){
		links.push($('a', $(this)).attr('href'));
		images.push($('img', $(this)).attr('src'));
	});
}

function drawCanvas()
{
	canvas = Raphael("galleryCanvas",CANVAS_WIDTH,CANVAS_HEIGHT);
}

function drawImages()
{
	for (var i=images.length-1; i > -1; i--) {
		var imageDisplay = canvas.image(images[i], i == 0 ? 0 : CANVAS_WIDTH, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
		imageDisplays[i] = imageDisplay;
	};
	imageCount = imageDisplays.length;
}


function play()
{
	playing = true;
	clearTimeout(playTimeoutId);
	playTimeoutId = setTimeout(next,TIME_PER_IMAGE);
};

function pause()
{
	playing = false;
	clearTimeout(playTimeoutId);
};

function next()
{
	setImageIndex(imageIndex+1);
};

function prev()
{
	setImageIndex(imageIndex-1);
};

function animate()
{
	animateOut(previousImageIndex);
	animateIn(imageIndex);
};

function animateIn(index)
{
	var image = imageDisplays[index];
	image.attr({x:CANVAS_WIDTH});
	image.animate({x:0}, ANIMATE_TIME, "<>");
};

function animateOut(index)
{
	var image = imageDisplays[index];
	image.animate({x: -CANVAS_WIDTH}, ANIMATE_TIME, "<>");
};

function setImageIndex(index)
{
	var prevIndex = 0;
	if(index == imageCount){
		index = 0;
	}
	else if(index == -1){
		index = imageCount-1;
	}
	previousImageIndex = imageIndex;
	imageIndex = index;
	animate();
	updateButtonStates();
	if(playing){
		clearTimeout(playTimeoutId);
		playTimeoutId = setTimeout(next,TIME_PER_IMAGE);
	}
};

function applyGalleryControlInteraction(node,data)
{
	node.index = data.index;
	$(node).bind('click',data,galleryControlClickHandler).bind('mouseover',data,galleryControlMouseOverHandler).bind('mouseout',data,galleryControlMouseOutHandler);
};

function applyMoreButtonInteraction(node,data)
{
	$(node).bind('click',data,moreButtonClickHandler).bind('mouseover',data,moreButtonMouseOverHandler).bind('mouseout',data,moreButtonMouseOutHandler);
}

function updateButtonStates()
{
	for (var i=0; i < buttons.length; i++){
		var button = buttons[i];
		var text = buttonText[i];
		if(button.node.index == imageIndex){
			fadeToColor(button,"white");
			fadeToColor(text,"#ff24b9");
		}
		else{
			fadeToColor(button,"black");
		 	fadeToColor(text,"white");
		}
	}
};

function galleryControlClickHandler(event)
{
	setImageIndex(event.data.index);
}

function galleryControlMouseOverHandler(event)
{
	fadeToColor(event.data.button,"white");
	fadeToColor(event.data.text,"#ff24b9");
}

function galleryControlMouseOutHandler(event)
{
	if(event.data.index != imageIndex){
	 	fadeToColor(event.data.button,"black");
	 	fadeToColor(event.data.text,"white");
	}
};


function moreButtonClickHandler(event)
{
	moreLink();
};

function moreButtonMouseOutHandler(event) 
{
	event.data.over.animate({opacity:0},100,"<");
};

function moreButtonMouseOverHandler(event)
{
	event.data.over.attr({opacity:1});
};

function fadeToColor(element,color)
{
	element.animate({fill:color},200,"<");
};

function moreLink()
{
	window.location = (links[imageIndex]);
};


function drawMoreButton()
{
	moreButton = canvas.image(MORE_LINK_IMAGE,20,261,113,29);
	moreButtonOver = canvas.image(MORE_LINK_IMAGE_OVER,20,261,113,29).attr({opacity:0});
	applyMoreButtonInteraction(moreButton.node,{over:moreButtonOver});
	applyMoreButtonInteraction(moreButtonOver.node,{over:moreButtonOver});
};

function drawGalleryControls()
{
	var buttonX = CANVAS_WIDTH - (imageDisplays.length*(BUTTON_GUTTER + BUTTON_WIDTH) + BUTTON_RIGHT_MARGIN);
	var buttonY = CANVAS_HEIGHT - BUTTON_HEIGHT;
	for (var i=0; i < imageDisplays.length; i++) {
		var button = canvas.rect(buttonX,buttonY,BUTTON_WIDTH,BUTTON_HEIGHT).attr({fill: "black",stroke:"none"});
		var text = canvas.text(buttonX+10,buttonY+10,(i+1)).attr({fill:"white","font-size":11,"font-family":"Arial"});
		var data = {index:i,button:button,text:text};
		applyGalleryControlInteraction(button.node,data);
		applyGalleryControlInteraction(text.node,data);
		buttons.push(button);
		buttonText.push(text);
		buttonX += BUTTON_WIDTH + BUTTON_GUTTER;
	};
};