/* MacPannel by Rob Sheldrake (www.forkoff.co.uk) for DevMac Systems UK (http://www.devmac.co.uk) */

window.addEvent('domready', function(){

	// If you are setting up a different overall size, set to true to find out the size of each individual image.
	alert_required_dimensions = false ; // SET TRUE TO SEE SIZES <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

	how_man_pannels = 4 ;
	how_many_columns = 4 ;
	use_effect = 'fade' ; // can be 'cascade' , 'bounce' , 'fade' or 'none'
	cascade_origin = 3 ; // This states which sqaure you would like the cascade effect to start from.
	image_margin = 10 ; // How much padding around images

	// All these times are in millisecconds / 1000 ms = 1 sec
	load_effect_time = 1000 ;
	mouse_over_fadein = 250 ; // How long will the top image (link image) take to fade IN
	mouse_over_fadeout = 1000 ; // How long will the top image (link image) take to fade OUT

	image_swap_delay = 2500 ; // How long is the image held before swapping to the previous.
	image_swap_trasition = 1000 ; // How long does it take to swap from a to b
	image_2_display_length = 2000 ; // How long does it take to swap from a to b

// ================================================================================================================

	if(use_effect=='none'){load_effect_time=0;}
	invisible_opacity = 0.00001 ;

	// Functions
	function random_number(top_number){
		rn_val = Math.random()*top_number ;
		return Math.ceil(rn_val) ;
	}
	// Build the timeline offset array
	var tracker_array = new Array() ;
	var timeline_array = new Array() ;
	for(i=1;i<=how_man_pannels;i++){
		tracker_array[i] = (image_swap_delay+image_swap_trasition)*i ;
	}
	thelist = '' ;
	for(i=1;i<=how_man_pannels;i++){
		this_value = 0 ;
		do {
			tehnumber = random_number(how_man_pannels) ;
			this_value = tracker_array[tehnumber] ;
		} while (this_value==0)
		thelist = thelist + ' ' + this_value ;
		timeline_array[i] = this_value ;
		tracker_array[tehnumber] = 0 ;
	}

	// Timeline Vars
	total_available_timeline = ((image_swap_delay+image_swap_trasition)*2)*how_man_pannels ;
	half_timeline = total_available_timeline/2 ;

	total_rows = how_man_pannels/how_many_columns ;
	total_height = parseFloat($('macpannel').getStyle('height')) ;
	total_width = parseFloat($('macpannel').getStyle('width')) ;

	individual_height = (((total_height-image_margin)-(image_margin*total_rows))/total_rows).round() ;
	individual_width = (((total_width-image_margin)-(image_margin*how_many_columns))/how_many_columns).round() ;

	if(alert_required_dimensions==true){
		alert('Dimensions Required:\nwidth :' + individual_width + ' height :' + individual_height) ;
	}

	if(use_effect=='cascade'||use_effect=='bounce'){
		total_counter = 0 ;
		conter_column = 0 ; // Starts at zero to allow for restting after full loop
		conter_row = 1 ; // Starts at 1 to initialise properly
		$('macpannel').getElements('div').each(function (element){
			conter_column = conter_column + 1 ;
			total_counter = total_counter + 1 ;
			if(total_counter==cascade_origin){
				this_left_margin = ((conter_column-1)*individual_width)+(conter_column*image_margin) ;
				this_top_margin = ((conter_row-1)*individual_height)+(conter_row*image_margin) ;
				$$('#macpannel div').setStyles({'margin-left':this_left_margin,'margin-top':this_top_margin}) ;
			}
			// Track columns
			if( conter_column==how_many_columns ){ conter_column=0 ; conter_row=conter_row+1 }
		}) ;

	} // End cascade starting point

	conter_column = 0 ; // Starts at zero to allow for restting after full loop
	conter_row = 1 ; // Starts at 1 to initialise properly
	total_counter = 0 ;

	$('macpannel').getElements('div').each(function (element){

		// Track columns
		conter_column = conter_column + 1 ;
		total_counter = total_counter + 1 ;

		if(total_counter<=how_man_pannels){

			element.setStyles({'height':individual_height,'width':individual_width}) ;
			this_left_margin = ((conter_column-1)*individual_width)+(conter_column*image_margin) ;
			this_top_margin = ((conter_row-1)*individual_height)+(conter_row*image_margin) ;

			// Setup the links
			the_link = element.getElements('a') ;
			the_link.setStyles({'height':individual_height,'width':individual_width,'opacity':invisible_opacity,'line-height':individual_height}) ;
			the_link.addEvent('mouseover', function(event){
				this.set('morph', {duration: mouse_over_fadein}).morph({'opacity':1.0}) ;
			}) ;
			the_link.addEvent('mouseout', function(event){
				this.set('morph', {duration: mouse_over_fadeout}).morph({'opacity':invisible_opacity}) ;
			}) ;

			// Setup the load Effect
			if(use_effect=='cascade'){
				element.setStyles({'height':individual_height,'width':individual_width,'opacity':invisible_opacity}) ;
					var myfunction3 = element.animate()
						.delay(1000)
						.morph({'margin-left':this_left_margin,'margin-top':this_top_margin,'opacity':1.0,duration: load_effect_time})
					;
					myfunction3.start() ;

			} else if(use_effect=='bounce'){
				element.set('morph', {duration: load_effect_time, transition: 'bounce:out'});
				element.morph({'margin-left':this_left_margin,'margin-top':this_top_margin}) ;
			} else if(use_effect=='fade'){
				element.setStyles({'margin-left':this_left_margin,'margin-top':this_top_margin,'opacity':invisible_opacity}) ;
				element.set('morph', {duration: load_effect_time});
				element.morph({'opacity':1.0}) ;
			} else {
				element.setStyles({'margin-left':this_left_margin,'margin-top':this_top_margin}) ;
			}

			// Track columns
			if( conter_column==how_many_columns ){ conter_column=0 ; conter_row=conter_row+1 }

		}else{ // Else there are too many listed, hide this one.
			element.setStyles({'display':'none'}) ;
		}

		// deal with images
		zkeeper = 99 ; // image 1 = 100, image 2 = 99, image 3 = 98, etc
		element.getElements('img').each(function (eachimg){
			eachimg.setStyles({'width':individual_width,'height':individual_height}) ;

			// Animations
			initial_delay = timeline_array[total_counter] ;
			closing_delay = half_timeline-initial_delay ;
			if(zkeeper==99){
				var myfunction2 = eachimg.animate()
					.delay(load_effect_time)
					.serial()
						.delay(initial_delay)
						.tween('opacity',invisible_opacity, {
							duration: image_swap_trasition
						})
						.delay(image_2_display_length)
						.tween('opacity', 1.0, {
							duration: image_swap_trasition
						})
						.delay(closing_delay) 
						.repeat()
					.end() ;

				myfunction2.start() ;
			}
			eachimg.setStyles({'z-index':zkeeper}) ;
			zkeeper = zkeeper - 1 ;
		});
	});
});