/**
 * @author Vitaly
 */

var types = [];

var Projects = {
    
    _templates: {
    thumbnail: new Template(
        '<a href="#"><span><img src="#{filename}" width="80" height="80" /></span><p>#{title}</p></a>'),
    details: new Template(
        '<img src="#{filename}" id="screenshot" width="530" height="240" />' +
        '<h2>#{title}</h2>' +
        '<div id="screenshots"></div>' +
        '<table id="data">' +
        '<tr><th>Client</th><td>#{client}</td></tr>' +
        '<tr><th>Roles</th><td>#{roles}</td></tr>' +
        '<tr><th>Industry</th><td>#{industry}</td></tr>' +
        '<tr><th>Year</th><td>#{year}</td></tr>' +
        '<tr><th>&nbsp;</th><td>#{description}</td></tr>' +
        '<tr><th>&nbsp;</th><td><p>#{description_jp}</p></td></tr>' +
        '<tr><th>&nbsp;</th><td><a href="#{project_url}" target="_blank">#{project_url}</a></td></tr>' +
        '</table>'),
    details_no_url: new Template(
        '<img src="#{filename}" id="screenshot" width="530" height="240" />' +
        '<h2>#{title}</h2>' +
        '<div id="screenshots"></div>' +
        '<table id="data">' +
        '<tr><th>Client</th><td>#{client}</td></tr>' +
        '<tr><th>Roles</th><td>#{roles}</td></tr>' +
        '<tr><th>Industry</th><td>#{industry}</td></tr>' +
        '<tr><th>Year</th><td>#{year}</td></tr>' +
        '<tr><th>&nbsp;</th><td>#{description}</td></tr>' +
        '<tr><th>&nbsp;</th><td><p>#{description_jp}</p></td></tr>' +
        '</table>'),
    screenshot: new Template(
        '<a title="#{title}" rel="lightbox[gallery]" href="data/projects/#{project}/#{ID}.jpg"></a>'),
    screenshotF: new Template(
        '<a title="#{title}" rel="lightbox[gallery]" href="data/projects/#{project}/#{ID}.jpg" id="sreenshots-btn">&nbsp;</a>')
    },
    
    _selected: 0,
    
    items: [],
    screenshots: [],
    
    updateThumbnails: function() {
        
        enableTypes();
        
        $('list').update('');
        
        this.items.each(function(n) {
            
            this.createThumbnailDOMFragment(n);
            
        }.bind(this));
        
        this._selected = this.items[0].ID;
        this.updateDetails();
        
    },
    
    getProjects: function() {
        
        new Ajax.Request('get-projects.php', {
            method: 'get',
            parameters: 'types=' + getTypes(),
            onSuccess: function(transport) {
                this.items = transport.responseText.evalJSON();
                //console.log(Object.inspect(this.items));
                this.updateThumbnails();
            }.bind(this)
        });
              
    },
    
    updateScreenshots: function() {
        
        var current = 0;
        
        this.screenshots.each(function(n) {
            
            this.createScreenshotDOMFragment(n, current);
            current++;
            
        }.bind(this));
        
        //initLightbox();
        
    },
    
    getScreenshots: function() {
        
        //console.info('calling getScreenshots()');
        
        new Ajax.Request('get-screenshots.php', {
            method: 'get',
            parameters: 'id=' + this._selected,
            onSuccess: function(transport) {
                this.screenshots = transport.responseText.evalJSON();
                //console.log(Object.inspect(this.screenshots));
                this.updateScreenshots();
            }.bind(this)
        });
              
    },
    
    getThumbFileName: function(i) {
        
        var f = '';
        if (i.project_thumbnail) {
            f = 'data/projects/' + i.ID + '/' + i.project_thumbnail;
        } else {
            f = 'images/default-thumbnail.jpg';
        }
        return f;
        
    },
    
    createThumbnailDOMFragment: function(item, n) {
        
        var element = $(document.createElement('div'));
        element.ID = item.ID;
        var tpl = this._templates['thumbnail'];
        var escapedItem = {
            ID: item.ID,
            title: item.project_title.truncate(12, '~').escapeHTML(),
            filename: this.getThumbFileName(item)
        };
        element.update(tpl.evaluate(escapedItem));
        $('list').appendChild(element);
        return element;
        
    },
    
    updateDetails: function() {
        
        //console.info('calling updateDetails()');
        
        //console.info("Displaying: " + this._selected);
        
        $('details').update('');
        
        var item = this.items.find(function(i) {
            if (i.ID == this._selected) return true;
        }.bind(this));
        
        this.createDetailsDOMFragment(item);
        
        this.getScreenshots();
        
    },
	
	showFullTitle: function(elt) {
        
		var item = this.items.find(function(i) {
            if (i.ID == elt.ID) return true;
        }.bind(this));
		
		$('callout').update(item.project_title.escapeHTML());
		$('callout').show();
		$('callout').clonePosition(elt, {
			setHeight: false,
			setWidth: false,
			offsetTop: 90,
			offsetLeft: 10
		});
        
    },
    
    getScreenshotFileName: function(i) {
        
        var f = '';
        if (i.project_screenshot) {
            f = 'data/projects/' + i.ID + '/' + i.project_screenshot;
        } else {
            f = 'images/default-screenshot.jpg';
        }
        return f;
        
    },
    
    createDetailsDOMFragment: function(item) {
        
        var element = $(document.createElement('div'));
        element.ID = item.ID;
        if (item.project_url) {
            
            var tpl = this._templates['details'];
            var escapedItem = {
                ID: item.ID,
                title: item.project_title.escapeHTML(),
                client: item.project_client.escapeHTML(),
                roles: item.project_roles.escapeHTML(),
                industry: item.project_industry.escapeHTML(),
                year: item.project_date.escapeHTML(),
                description: item.project_description.escapeHTML(),
                description_jp: item.project_description_jp.escapeHTML(),
                project_url: item.project_url.escapeHTML(),
                filename: this.getScreenshotFileName(item)
            };
            
        } else {
            
            var tpl = this._templates['details_no_url'];
            var escapedItem = {
                ID: item.ID,
                title: item.project_title.escapeHTML(),
                client: item.project_client.escapeHTML(),
                roles: item.project_roles.escapeHTML(),
                industry: item.project_industry.escapeHTML(),
                year: item.project_date.escapeHTML(),
                description: item.project_description.escapeHTML(),
                description_jp: item.project_description_jp.escapeHTML(),
                filename: this.getScreenshotFileName(item)
            };
            
        }
        element.update(tpl.evaluate(escapedItem));
        $('details').update(element);
        return element;
        
    },
    
    createScreenshotDOMFragment: function(item, n) {
        
        var element = $(document.createElement('span'));
        if (n == 0) {
            var tplName = 'screenshotF';
        } else {
            var tplName = 'screenshot';
        }
        //console.log('calling with template: ' + tplName);
        var tpl = this._templates[tplName];
        var escapedItem = {
            ID: item.ID,
            project: this._selected,
            title: item.screenshot_title.escapeHTML()
        };
        element.update(tpl.evaluate(escapedItem));
        $('screenshots').appendChild(element);
        return element;
        
    }
  
};

function handleListOver(e) {
        
    var elt = e.element();
    
    if (elt.tagName == 'DIV')
        return;
    
    elt = elt.up('div');
    
    e.stop();
    
	console.log(elt.positionedOffset());
	
	Projects.showFullTitle(elt);
	
}

function handleListOut(e) {
        
    var elt = e.element();
    
    if (elt.tagName == 'DIV')
        return;
    
    elt = elt.up('div');
    
    e.stop();
    
	$('callout').hide();
	
}

function handleListClick(e) {
        
    var elt = e.element();
    
    if (elt.tagName == 'DIV')
        return;
    
    elt = elt.up('div');
    
    e.stop();
    
    Projects._selected = elt.ID;
    //$('page').scrollTo();
    window.scrollTo(0, 0);
    Projects.updateDetails();
    
}

function handleTypesClick(e) {
    
    var elt = e.element();
    
    if (elt.tagName == 'LABEL')
        return;
    
    disableTypes();
    
    Projects.getProjects();
    
    /*console.log(elt.type + ' from ' + elt.tagName)
    
    e.stopPropagation();
    if (elt.tagName == 'INPUT')
        return;
    if (elt.tagName == 'LABEL')
        elt = elt.up('LI').down('INPUT');
    
    getTypes();
    
    console.log('Found element: ' + elt.inspect());
    console.log('Checkbox Status is: ' + elt.checked);
    
    if (types.length > 1) {
        if (!elt.checked) {
            Projects.getProjects();
        }
    } else {
        Projects.getProjects();
    }*/
    
}

function getTypes() {
    
    types.clear();
    var elt = $('types').childElements();
    
    elt.each(function(n) {
        if(n.down('input').checked)
            types.push(n.down('input').readAttribute('name'));
    });
    
    //console.log('number of selected types: ' + types.length);
    //console.info("Selected Types: " + types.inspect());
    
    return types.join(",");
    
}

function bindUI() {
    
    Ajax.Responders.register({ 
        onCreate: function() {
            $('progress').show();
        },
        onComplete: function() {
            if (Ajax.activeRequestCount == 0)
            $('progress').hide();
        }
    });
    
}

function disableTypes() {

    $('types').stopObserving('click', handleTypesClick);
    
    var elt = $('types').childElements();
    
    elt.each(function(n) {
        n.down('input').disable();
    });
    
}

function enableTypes() {
    
    $('types').observe('click', handleTypesClick);

    var elt = $('types').childElements();
    
    elt.each(function(n) {
        n.down('input').enable();
    });
    
}

document.observe('dom:loaded', function() {
    
    bindUI();
    Projects.getProjects();
    $('list').observe('mouseover', handleListOver);
	$('list').observe('mouseout', handleListOut);
	$('list').observe('click', handleListClick);
    $('types').observe('click', handleTypesClick);
    
});