var array_file_name = [
"01 zumba PACK.jpg", "02 zumba ball.jpg", "03 zumba dadu.jpg", "04 zumba tadpole.jpg"];
var large_image_dir = "images/products/zumba";
var current_modal_image_id;
var next_position = 0;

$(document).ready(function(){
	initSlider1();
	initModal1();
	changeSizeAndPosition();
	$(window).resize(changeSizeAndPosition);
	setInterval(scrollLoop, 1);
});

function scrollLoop() {
	var position = $("div#product_scroller2").css("left");
	position = parseInt(position.substring(0, position.length-2));
	if (position < next_position-10) {
		$("div#product_scroller2").css("left", (position+4) + "px");
	} else if (position > next_position+10) {
		$("div#product_scroller2").css("left", (position-4) + "px");
	}
}

var product_scroller1_width;
var product_scroller2_width;
var max_scroll;

function initSlider1() {
	product_scroller1_width = $("div#product_scroller1").width();
	product_scroller2_width = $("div#product_scroller2").width();
	max_scroll = product_scroller1_width - product_scroller2_width;
	$("a#scroller_arrow_left").click(scrollLeft);
	$("a#scroller_arrow_right").click(scrollRight);
}

function scrollLeft() {
	var position = $("div#product_scroller2").css("left");
	position = position.substring(0, position.length-2);
	next_position = parseInt(position) + 250;
	if (next_position > 0) {
		next_position = 0;
	}
}

function scrollRight() {
	var position = $("div#product_scroller2").css("left");
	position = position.substring(0, position.length-2);
	next_position = parseInt(position) - 250;
	if (next_position < max_scroll) {
		next_position = max_scroll;
	}
}

function changeSizeAndPosition() {
	var modal_bg_width = $("div#modal_bg1").width();
	var modal_bg_height = $("div#modal_bg1").height();
	var modal_dialog_width;
	var modal_dialog_height;
	if (modal_bg_width > modal_bg_height) {
		modal_dialog_height = modal_bg_height - 100;
		modal_dialog_width = modal_dialog_height * 55 / 45;
	} else {
		modal_dialog_width = modal_bg_width - 100;
		modal_dialog_height = modal_dialog_width * 45 / 55;
	}
	$("div#modal_dialog1").css("width", modal_dialog_width + "px");
	$("div#modal_dialog1").css("height", modal_dialog_height + "px");
	
	var left = (modal_bg_width - modal_dialog_width) / 2;
	var top = (modal_bg_height - modal_dialog_height) / 2;
	$("div#modal_dialog1").css("top", top + "px");
	$("div#modal_dialog1").css("left", left + "px");
	
	var content_width = modal_dialog_width - 150;
	var content_height = modal_dialog_height;
	$("div#modal_content").css("width", content_width + "px");
	$("div#modal_content").css("height", content_height + "px");
	
	var image_height = content_width * 8 / 9;
	$("div#modal_content").children("img").css("width", content_width + "px");
	$("div#modal_content").children("img").css("height", image_height + "px");
	
	var arrow_margin_top = (modal_dialog_height - 177) / 2;
	$("a#modal_arrow_left").css("margin-top", arrow_margin_top + "px");
	$("a#modal_arrow_right").css("margin-top", arrow_margin_top + "px");
	
	$("a#modal_close_btn1").css("top", (top+10) + "px");
	$("a#modal_close_btn1").css("left", (left + modal_dialog_width - 22) + "px");
}

function initModal1() {
	$("a.image_scroller").click(modal_1_show);
	$("a#modal_close_btn1").click(modal_1_hide);
	
	$("a#modal_arrow_right").click(modal_1_nextImage);
	$("a#modal_arrow_left").click(modal_1_prevImage);
}

function modal_1_show() {
	$("div#modal_bg1").css("visibility", "visible");
	$("div#modal_bg1").css("opacity", 1);
	var id = this.id.substring(4);
	current_modal_image_id = id;
	var file_name = array_file_name[id-1];
	var content_width = $("div#modal_content").width();
	var content_height = $("div#modal_content").height();
	
	var image_height = content_width * 8 / 9;
	var caption = file_name.substring(file_name.indexOf(" ")+1, file_name.indexOf(".jpg")).toUpperCase();
	$("div#modal_content").html(
		"<img src='" + large_image_dir + "/" + file_name + "' width='" + content_width + "' height='" + image_height + "' />" +
		"<div style='float: left; width: 100%; text-align: center; font-weight: bold;'>" + caption + "</div>"
	);
}

function modal_1_hide() {
	$("div#modal_bg1").css("opacity", 0);
	$("div#modal_bg1").css("visibility", "hidden");
}

function modal_1_nextImage() {
	if (current_modal_image_id >= array_file_name.length) {
		current_modal_image_id = 1;
	} else {
		current_modal_image_id++;
	}
	var file_name = array_file_name[current_modal_image_id-1];
	var content_width = $("div#modal_content").width();
	var content_height = $("div#modal_content").height();
	
	var image_height = content_width * 8 / 9;
	var caption = file_name.substring(file_name.indexOf(" ")+1, file_name.indexOf(".jpg")).toUpperCase();
	$("div#modal_content").html(
		"<img src='" + large_image_dir + "/" + file_name + "' width='" + content_width + "' height='" + image_height + "' />" +
		"<div style='float: left; width: 100%; text-align: center; font-weight: bold;'>" + caption + "</div>"
	);
}

function modal_1_prevImage() {
	if (current_modal_image_id <= 1) {
		current_modal_image_id = array_file_name.length;
	} else {
		current_modal_image_id--;
	}
	var file_name = array_file_name[current_modal_image_id-1];
	var content_width = $("div#modal_content").width();
	var content_height = $("div#modal_content").height();
	
	var image_height = content_width * 8 / 9;
	var caption = file_name.substring(file_name.indexOf(" ")+1, file_name.indexOf(".jpg")).toUpperCase();
	$("div#modal_content").html(
		"<img src='" + large_image_dir + "/" + file_name + "' width='" + content_width + "' height='" + image_height + "' />" +
		"<div style='float: left; width: 100%; text-align: center; font-weight: bold;'>" + caption + "</div>"
	);
}