//var slides=3;                        // Change This


window.addEvent('domready', function() {
                var pos = 0;
                var offset = 465;                // HOW MUCH TO MOVE
                var currentslide = 1;
                var items = $('sl-items');
                var fx = new Fx.Morph(items, {duration: 800, transition: Fx.Transitions.linear});
                //var fx = items.effects({duration: 800, transition: Fx.Transitions.linear});

                var scroll = new Fx.Scroll('sl-wrapper', {
                        offset:{'x':0, 'y':0},
                        transition: Fx.Transitions.Quad.easeOut
//                        transition: Fx.Transitions.Elastic.easeOut
                });

                $('sl-moveleft').addEvent('click', function(event) {
                        event = new Event(event).stop();
                        if(currentslide == 1) return;
                        currentslide--;
                        pos += -(offset);
                        fx.start({
                                'opacity': .3
                        }).chain(function(){
                                this.start.delay(800, this, { 'opacity': 1 });
                                scroll.start(pos);
                        });
                });


                $('sl-moveright').addEvent('click', function(event) {
                        event = new Event(event).stop();

                        if(currentslide >= slides) return;
                        currentslide++;
                        pos += offset;
                        fx.start({
                                'opacity': .3
                        }).chain(function(){
                                this.start.delay(800, this, { 'opacity': 1 });
                                scroll.start(pos);
                        });
                });





                $$('.icon').each(function(item){
                        item.addEvent('mouseover', function(event) {
                                event = new Event(event).stop();
                                var fx2 = new Fx.Morph(item, {duration: 100, transition: Fx.Transitions.linear});
                                //var fx2 = item.effects({duration: 200, transition: Fx.Transitions.linear});
				    var c_id = (item.id).substr(3).toInt();
                                fx2.start({
                                        'width': 102,
                                        'height':148,
                                        'margin-top': '-2',
                                        'margin-left': '-5'
                                });
				    if(c_id%4 == 0 && c_id!=0) {
					scroll.start(pos+20);
				    }
//                                alert(document.body.offsetWidth);
//                                alert(event.page.y);
//                                document.getElementById(item.id+'-hw').style.left = (event.client.x-50)+'px';
                                document.getElementById(item.id+'-hw').style.left = (event.page.x-50)+'px';
                                document.getElementById(item.id+'-hw').style.top = (event.page.y-150)+'px';
//                                alert(document.getElementById(item.id+'-hw').style.top);
                                document.getElementById(item.id+'-hw').style.display="block";

                        });
                        item.addEvent('mouseleave', function(event) {
                                var fx2 = new Fx.Morph(item, {duration: 100, transition: Fx.Transitions.linear});
                                //var fx2 = item.effects({duration: 200, transition: Fx.Transitions.linear});
				    var c_id = (item.id).substr(3).toInt();
                                fx2.start({
                                        'width': 70,
                                        'height':100,
                                        'margin-top': '0',
                                        'margin-left': '0'
                                });
				    if(c_id%4 == 0 && c_id!=0) {
					scroll.start(pos-20);
				    }
                                document.getElementById(item.id+'-hw').style.display="none";
                        });
                });


                scroll.toLeft();

});