var ScrapBook = new Class({	
    Implements: Options,
	options: {
		nom			:	'ScrapBook',
		container	:	document.body,
		stylesheet	:	'http://walkersshortbread.com/portals/walkers/script/ScrapBook/ScrapBook.css',
		columns		:	3,
		row_height	:	200,
		img_width	:	600,
		img_height	:	450
	},
	
	/* ======================================================================
	
		INIT
	
	=======================================================================*/
	initialize: function(options){
		/*------[	Options and internal variables	]------*/
		this.setOptions(options);
		this.nom		=	this.options.nom
		this.holder		=	this.options.container
		this.columns	=	this.options.columns
		this.row_h		=	this.options.row_height
		this.iwidth		=	this.options.img_width
		this.iheight	=	this.options.img_height
		/*------[	Attach StyleSheet	]------*/
		if(!document.body.scrapsCSS){ document.body.scrapsCSS = new Asset.css(this.options.stylesheet, {id: 'scrapsStyles'}); }
		/*------[	create Internal Book Layer	]------*/
		this.book = new Element('div').injectInside(this.holder).set('id', 'sb')
		this.cards = []
		
		this.setHeight()
		
		this.getImages()
	}, 
	setHeight: function(){
		var h = (Math.ceil(this.options.container.getElements('img').length/this.columns)*this.row_h)+100
		this.holder.setStyle('height', h)
	},
	/*
	getImages
		pull images from container into 
		book layer and apply rotations
	------------------------------------*/
	getImages: function(){
		/*------[	put images into divs	]------*/
		this.options.container.getElements('img').each(function(el,i){ 
			var card = new Element('div').injectInside(this.book).addClass('sb_card')
			card.grab(el) 
			this.cards.push(card)
		}.bind(this));
		/*------[	set rotation and positioning	]------*/
		this.book.p = this
		var curr_col	=	0
		var curr_row	=	0
		var step_col	=	this.holder.getStyle('width').toInt() / this.columns
		var step_row	=	this.row_h
		var baseSize	=	10
		
		/*------[	Setup the cards	]------*/
		this.book.getElements('div').each(function(el,i){
			el.iid=i
			/* trace('setCard ' +i+' :: '+el.getFirst('img').getAttribute('alt')) */
			
			/*------[	set text	]------*/
			el.defText = el.getFirst('img').getAttribute('alt')
			el.ttl = new Element('p').injectAfter(el.getFirst('img')).addClass('sb_copy').set('text', el.defText)
			
			/*------[	animation	]------*/
			el.anim = new Fx.Morph((el),{duration: 'short', transition: Fx.Transitions.Sine.easeInOut, link:'cancel'});
			/*------[	get small image scale	]------*/
			el.setStyle('width', step_col-50)
			
			/*------[	set rotation and position	]------*/
			if(Browser.Engine.trident){ el.ranTrans=$random(1,4); }
			else{ 
				el.ranTrans	=	el.getParent('div').p.offsetRandom(5);
				el.fade('hide')
				el.ta =1
				/* this.delayFade.delay(1000+(250*i), el) */
				el.fade(1)
			}
			el.def_left	=	(curr_col*step_col)+el.getParent('div').p.offsetRandom(20)
			el.def_top	=	(curr_row*step_row)+el.getParent('div').p.offsetRandom(20)
			var ranI	=	$random(100, 200)
			
			el.getParent('div').p.setRotation(el, el.ranTrans)
			el.setStyle('z-index', ranI)
			el.oi = ranI
			el.setStyles({
				position	:	'absolute',
				left		:	el.def_left,
				top			:	el.def_top
			})
				el.getFirst('img').setStyle('display', 'block')
			el.setStyle('font-size', baseSize)
			el.enabled = false
			curr_col++
			if(curr_col>el.getParent('div').p.columns - 1){curr_col = 0, curr_row++}
			
			/*------[	events	]------*/
			el.addEvents({
				'mouseenter': function(){
					if(this.enabled == true){
						this.setStyle('cursor', 'pointer')
						if(this.clicked!=true){
							this.ttl.set('html', this.defText+' <br /><br />click to zoom')
							this.setStyle('z-index', 3000)
							this.anim.start({ 'width': step_col+50, 'font-size': baseSize+(baseSize*((step_col+50)/this.getParent('div').p.iwidth)) })
						}
						/* trace('new width : '+step_col+' (+50) :: full width : '+this.getParent('div').p.iwidth) */
					}
					else{this.setStyle('cursor', 'default')}
				},
				'mouseleave': function(){
					if(this.clicked!=true){
							this.ttl.set('text', this.defText)
						this.anim.start({ 'width': step_col-50, 'left':this.def_left, 'top': el.def_top, 'font-size':baseSize })
						this.setStyle('z-index', this.oi)
						this.getParent('div').p.setRotation(this, this.ranTrans)
					}
				},
				'click': function(){
					if(this.enabled == true){
						if(this.clicked!=true){
							this.clicked=true
							this.getParent('div').p.disableAll()
							this.ttl.set('text', this.defText)
							this.anim.start({ 
								'width'	:	this.getParent('div').p.iwidth,
								'left'	:	(this.getParent('div').p.holder.getStyle('width').toInt() - this.getParent('div').p.iwidth) / 2,
								'top'	:	document.getScroll().y,
								'font-size': baseSize+baseSize*1.75
							})
							this.getParent('div').p.setRotation(this, 0)
							this.getParent('div').p.showClose.delay(100, this)
						}
						else{ this.close.fireEvent('click') }
					}
				}
			});
			
		});
		this.enableAll.delay(1000, this)
	},
	setRotation: function(obj, rot){
		if(Browser.Engine.gecko){ obj.setStyle('-moz-transform', 'rotate('+rot+'deg)') }
		else if(Browser.Engine.webkit){ obj.setStyle('-webkit-transform', 'rotate('+rot+'deg)') }
		else if(Browser.Engine.presto){	obj.setStyle('-o-transform', 'rotate('+rot+'deg)') }
		else if(Browser.Engine.trident){
			
			var ieRots = new Array(
				"M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104)",
				"M11=0.9990482215818578, M12=-0.043619387365336, M21=0.043619387365336, M22=0.9990482215818578)",
				"M11=0.9945218953682733, M12=0.10452846326765346, M21=-0.10452846326765346, M22=0.9945218953682733)",
				"M11=0.9986295347545738, M12=0.05233595624294383, M21=-0.05233595624294383, M22=0.9986295347545738)"
			);
			if(rot==0){
				obj.setStyle('filter',"progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)")
				obj.setStyle('-ms-filter',"progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)")
			}
			else{
				obj.setStyle('filter', "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', "+ieRots[obj.ranTrans-1])
				obj.setStyle('-ms-filter', "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', "+ieRots[obj.ranTrans-1])
			}
		}
		else{ obj.setStyle('-moz-transform', 'rotate('+rot+'deg)') }
		
	},
	showClose: function(){
		var obj = this
		obj.getParent('div').p.cards.each(function(el,i){
				if(el.iid==i){el.setStyle('z-index', el.oi)}
				else{el.setStyle('z-index', '3000')}
				
			/* trace('cards : '+i+' : z : '+el.getStyle('z-index')) */
		});
		obj.setStyle('z-index', '3000')
		this.enabled = true
		obj.close = new Element('div').injectAfter(obj.ttl).addClass('closeimage').set('html', '<p>close</p>')
		obj.close.p = this
		obj.close.setStyles({
			bottom	:	'-14%',
			right	:	'-5%'
		})
		obj.close.addEvents({

			'click': function(){
				this.p.enabled = false
				this.p.clicked = false
				this.p.fireEvent('mouseleave')
				this.p.getParent('div').p.enableAll.delay(1000, this.p.getParent('div').p)
				this.dispose()
			}
		});
	},
	
	offsetRandom: function(n){
		return($random(n*-1, n))
	},
	disableAll: function(){
		this.book.getElements('div').each(function(el,i){ el.enabled = false });
	},
	enableAll: function(){
		this.book.getElements('div').each(function(el,i){ el.enabled = true; el.clicked = false });
	},
	delayFade: function(){ this.fade(this.ta) }
	
	
	
});