var projects;
var myModel;
var innerhtml;
var c = 0;
var sel_project;
var sel_c;
clickable = true;

window.addEvent('domready', function() {
    var project_list = function(ICModel) { 
		myModel = ICModel;
		c=0;
	    myModel.each(function(row) {
			if(c == 0){
				sel_project = row.fields.slug;
			}
			c++;
		})
    }

	var request = new Request.JSON({
		url: '/getprojects/',
		method: 'post',
		onComplete: function(jsonObj) {
			project_list(jsonObj);
		}
	}).send();
	
	$("homeRight").addEvent("click", function(e){
		if(clickable == true){
			clickable = false;
			c=0;
		    myModel.each(function(row) {
				if(sel_project == row.fields.slug){
					sel_c = c;
				}
				c++;
			})
			if(sel_c == (c-1)){
				sel_c = 0;
			}else{
				sel_c = sel_c+1;
			}
			c = 0;
		    myModel.each(function(row) {
				if(sel_c == c){
					gotoProject("creation_" + row.fields.slug);
				}
				c++;
			});
		}
	});
	$("homeLeft").addEvent("click", function(e){
		if(clickable == true){
			clickable = false;
			c=0;
		    myModel.each(function(row) {
				if(sel_project == row.fields.slug){
					sel_c = c;
				}
				c++;
			})
			if(sel_c == 0){
				sel_c = c-1;
			}else{
				sel_c = sel_c-1;
			}
			c = 0;
		    myModel.each(function(row) {
				if(sel_c == c){
					gotoProject("creation_" + row.fields.slug);
				}
				c++;
			});
		}
	});

})

function gotoProject(slug){
	clickable = false;
	var scrollfx = new Fx.Scroll('homeImage', {
		wait: false,
		duration: 1500,
		offset: {'x': -3, 'y': 0},
		transition: Fx.Transitions.Sine.easeInOut,
		onComplete: function(){ clickable = true; },
	});

    myModel.each(function(row) {
		var fx = new Fx.Styles("creation_" + row.fields.slug + "_sel", {duration:500, wait:false, onComplete: function(e){

			if(slug == "creation_" + row.fields.slug){
				innerhtml = '<span class="homeProject"><strong>Project Name: </strong>' + row.fields.project_name + '</span>';
				if(row.fields.read_more == true){
					innerhtml += '<a href="/project/'+ row.fields.slug +'/"><img class="homeProject" src="/static/img/view.jpg"/></a>';
				}
				sel_project = row.fields.slug;
			}
			var fadeFx = new Fx.Style("project_desc", 'opacity', {wait: false, duration: 300, onComplete:function(){
				$("project_desc").innerHTML = innerhtml;
				var newfadeFx = new Fx.Style("project_desc", 'opacity', {wait: false, duration: 300}).set(0);
				newfadeFx.start(1);
			}}).set(1);
			fadeFx.start(0);

			var newfx = new Fx.Styles(slug + "_sel", {duration:500, wait:false});
			newfx.start({ "border":"7px solid #808080" });	
		}});
		fx.start({ "border":"7px solid #ccc" });
    })
    scrollfx.toElement(slug);	
}