// small functions
// ==========================

function site_morph(id, dur){
    return new Fx.Morph($(id), { duration: dur, link: 'chain', transition: 'quint:in:out' });  
}

function doc_width(){
    return $(document.body).getSize().x;
}

function get_edge(){
    var w = doc_width();
    if (w < 1200) w += 300;
    var fw = '-' + (1920 - w) + "px";
    return fw;
}

function content_fade_in(div){
    $(div).setStyles({display: 'block', opacity: 0}).fade(0,.85);
}

// larger functions
// ==========================

function slideShow(elms){
        // Version 0.2; Created by Kow, 2008; http://skyweb.hu/kow
        var pass = this;
        // initialise
        this.curImg = 0;
        this.slides = elms;
        this.slides.each(function(img, index){ 
            if(index > 0) img.fade(); 
            img.set('morph', { duration: 'long', transition: 'quint:in:out' });
        });
        this.next = function(){
            pass.curImg++;
            this.slides.each(function(img, index){ 
                img.morph({ opacity: 0 });
            }, this);
            if(pass.curImg == this.slides.length) pass.curImg = 0;
            this.slides[pass.curImg].morph({ opacity: 1 });
        }
    }

    function home_ss(img_no, parent, child) {
        // loading gif
        var loader = new Element('div').addClass('loader').inject($('content'),"top");
        var loader_gif = new Element('img', { src: './assets/loader.gif', alt: 'Downloading images...' }).injectInside(loader, "inside");
        // image container fx
        var img_window = site_morph(parent, 'long');
        
        // prepare imgs and insert to html
        var img_array = new Array();
        for (var i = 0; i < img_no; i++) {
            img_array.push("./images/content_home_" + (i + 1) + ".jpg");
        }

        var prepare_imgs = new Asset.images(img_array, {
            onComplete: function(){
                loader.fade('out').dispose();
                img_window.start({ 'height': 500 });
            }
        }).inject($(child), "top");
        
        var child_elms = $(child).getChildren('img');
        
        // create and start slideshow
        ss = new slideShow(child_elms);  
        ss.next.periodical(5000, ss);
    };

function col_slide(parent, status) {
    var pass = this;
    var move = site_morph($(parent), 'normal');           
    this.cur_loc = 0;
    this.loc_w = 0; 
    this.slides = $(parent).getChildren('div');
    this.dress = $(parent).getChildren('.col_dress');
    this.dress.each(function(item, index){ 
        var i = index + 1;
        var dress_img = item.getChildren('.col_dress_img');
        var dress_desc = item.getChildren('.col_dress_desc').setStyle('opacity', 0);        
        dress_img.addEvents({
        /*
            'mouseover': function(e){
                if (i < pass.cur_loc || i > pass.cur_loc) {
                    if (i > pass.cur_loc) console.log("go left");
                    if (i < pass.cur_loc) console.log("go right");
                };
            },
        */
            'click': function(e){
                e.stop();
                if (i < pass.cur_loc || i > pass.cur_loc) {
                    if (i > pass.cur_loc) pass.next();
                    if (i < pass.cur_loc) pass.prev();
                } else {
                    dress_desc.fade('toggle');
                };
            }
        });
    });
    this.info = function() {
        if(this.cur_loc != 0) {
            move.start({ 'margin-left': 0 });
            this.cur_loc = 0; 
            this.loc_w = 0; 
            this.status_update(); 
        }     
    }
    this.next = function() {
        if(this.cur_loc != this.slides.length-1) {
            this.loc_w += (this.slides[this.cur_loc].getSize().x)+4;
            move.start({ 'margin-left': "-" + this.loc_w }); 
            this.cur_loc++;
            this.status_update(); 
        }     
    }
    this.prev = function() {
        if(this.cur_loc != 0) {
            this.loc_w -= (this.slides[this.cur_loc-1].getSize().x)+4; 
            move.start({ 'margin-left': "-" + this.loc_w }); 
            this.cur_loc--;
            this.status_update();
        }
    }
    this.status_update = function() {
        if(this.cur_loc != 0) {
            return $(status).set('html', 'Dress ' + this.cur_loc);
        } else {
            return $(status).set('html', 'Collection info');
        }
    }
}

// **********************************************************************************************************************
// DOM READY EVENTS HERE
// **********************************************************************************************************************
window.addEvent('domready', function() {

    // create hover effect for navigation
    $$('a.button').addEvents({
        'mouseenter': function() { this.setStyle('background-position', 'bottom left'); },
        'mouseleave': function() { this.setStyle('background-position', 'top left'); }
    });

    var sub = $$('.sub_nav');                                                                    
    sub.setStyles({ opacity: 0, display: 'block' });
    $('li_collection').addEvents({
        'mouseenter': function() { sub.fade('toggle'); },
        'mouseleave': function() { sub.fade('toggle'); }
    });
       
    if ($('content_home')) {
        var home_images = $('home_images');
        var slide_edge = site_morph(home_images, 'normal');
        // start with home_image at edge of screen
        home_images.setStyle('margin-left', get_edge());
        
        // keep home_image to edge of screen when window resizes
        window.addEvent('resize', function() { 
            (Browser.Engine.trident) ? home_images.setStyle('margin-left', get_edge()) : slide_edge.start({ 'margin-left': get_edge() });
        });
        
        // load images then start slideshow
        home_ss(5, 'content_home', 'home_images');
    }
    
    if ($('content_collection')) {
        var controls = $('controls');
        var slide_controls = site_morph(controls, 'normal');
        
        // start with controls at center of screen and on resize
        controls.setStyle('width', doc_width());
        
        window.addEvent('resize', function() {
            controls.setStyle('width', doc_width()); 
        });
        
        // collection controls with slide functions and description fade toggle
        cs = new col_slide('content_collection', 'status');
        $('col_info').addEvent('click', function(e){ e.stop(); cs.info(); }); 
        $('col_next').addEvent('click', function(e){ e.stop(); cs.next(); }); 
        $('col_prev').addEvent('click', function(e){ e.stop(); cs.prev(); }); 
        
    }
    if ($('content_about')) { content_fade_in('content_about'); }
    if ($('content_accessories')) { content_fade_in('content_accessories'); }
    
// **********************************************************************************************************************
// END DOM READY
// **********************************************************************************************************************
});