diff --git a/README.md b/README.md
index ad543fc..f3d51a9 100644
--- a/README.md
+++ b/README.md
@@ -66,3 +66,210 @@ MIT License
 
 2. Install with `:NeoBundleInstall`.
 
+## Configuration tutorial
+In default, the statusline looks like:
+![lightline.vim - tutorial](https://raw.github.com/itchyny/lightline.vim/master/image/tutorial/1.png)
+If you want a wombat colorscheme, add the folowing settin to your .vimrc:
+```vim
+  let g:lightline = {
+        \ 'colorscheme': 'wombat',
+        \ }
+```
+to get:
+![lightline.vim - tutorial](https://raw.github.com/itchyny/lightline.vim/master/image/tutorial/2.png)
+
+If you have installed vim-fugitive, the branch status is automatically available:
+![lightline.vim - tutorial](https://raw.github.com/itchyny/lightline.vim/master/image/tutorial/3.png)
+but you find it annoying! So you add to your .vimrc:
+```vim
+  let g:lightline = {
+        \ 'colorscheme': 'wombat',
+        \ 'active': {
+        \   'left': [ [ 'mode', 'paste' ],
+        \             [ 'readonly', 'filename', 'modified' ] ] }
+        \ }
+```
+![lightline.vim - tutorial](https://raw.github.com/itchyny/lightline.vim/master/image/tutorial/4.png)
+OK. The branch section is removed.
+
+However, you find the readonly mark is not cool:
+![lightline.vim - tutorial](https://raw.github.com/itchyny/lightline.vim/master/image/tutorial/5.png)
+So you add the component setting (the following setting is effective with the integrated font for vim-powerline):
+```vim
+  let g:lightline = {
+        \ 'colorscheme': 'wombat',
+        \ 'active': {
+        \   'left': [ [ 'mode', 'paste' ],
+        \             [ 'readonly', 'filename', 'modified' ] ] },
+        \ 'component': {
+        \   'readonly': '%{&readonly?"⭤":""}'
+        \ }
+        \ }
+```
+![lightline.vim - tutorial](https://raw.github.com/itchyny/lightline.vim/master/image/tutorial/6.png)
+How nice!
+
+But the boundaries are quadrilateral. You may miss the powerline.
+You have installed a cool font for powerlines, so you can use it.
+```vim
+  let g:lightline = {
+        \ 'colorscheme': 'wombat',
+        \ 'active': {
+        \   'left': [ [ 'mode', 'paste' ],
+        \             [ 'readonly', 'filename', 'modified' ] ] },
+        \ 'component': {
+        \   'readonly': '%{&readonly?"⭤":""}'
+        \ },
+        \ 'separator': { 'left': '⮀', 'right': '⮂' },
+        \ 'subseparator': { 'left': '⮁', 'right': '⮃' }
+        \ }
+```
+![lightline.vim - tutorial](https://raw.github.com/itchyny/lightline.vim/master/image/tutorial/7.png)
+Hurrah! Cool!
+
+
+Now, you look into a help file to find the marks annoying.
+Help files are readonly and no-modifiable? We know, of cource!
+![lightline.vim - tutorial](https://raw.github.com/itchyny/lightline.vim/master/image/tutorial/8.png)
+OK, so you again edit your .vimrc.
+```vim
+  let g:lightline = {
+        \ 'colorscheme': 'wombat',
+        \ 'active': {
+        \   'left': [ [ 'mode', 'paste' ],
+        \             [ 'readonly', 'filename', 'modified' ] ] },
+        \ 'component': {
+        \   'readonly': '%{&filetype!="help"&& &readonly?"⭤":""}',
+        \   'modified': '%{&filetype=="help"?"":&modified?"+":&modifiable?"":"-"}'
+        \ },
+        \ 'separator': { 'left': '⮀', 'right': '⮂' },
+        \ 'subseparator': { 'left': '⮁', 'right': '⮃' }
+        \ }
+```
+![lightline.vim - tutorial](https://raw.github.com/itchyny/lightline.vim/master/image/tutorial/9.png)
+Huh? Weird!
+The component does not collapse even if it has no information!
+In order to avoid this, you set expressions to component\_flag, which becomes 1 only when the corresponding components have information.
+```vim
+  let g:lightline = {
+        \ 'colorscheme': 'wombat',
+        \ 'active': {
+        \   'left': [ [ 'mode', 'paste' ],
+        \             [ 'readonly', 'filename', 'modified' ] ] },
+        \ 'component': {
+        \   'readonly': '%{&filetype!="help"&& &readonly?"⭤":""}',
+        \   'modified': '%{&filetype=="help"?"":&modified?"+":&modifiable?"":"-"}'
+        \ },
+        \ 'component_flag': {
+        \   'readonly': '(&filetype!="help"&& &readonly)',
+        \   'modified': '(&filetype!="help"&&(&modified||!&modifiable))'
+        \ },
+        \ 'separator': { 'left': '⮀', 'right': '⮂' },
+        \ 'subseparator': { 'left': '⮁', 'right': '⮃' }
+        \ }
+```
+![lightline.vim - tutorial](https://raw.github.com/itchyny/lightline.vim/master/image/tutorial/10.png)
+Okey. Works nice.
+
+
+However, you may wonder we cannot gather these settings?
+Or, if you want to do something more complicated?
+
+
+In fact, the components can be created using functions.
+```vim
+  let g:lightline = {
+        \ 'colorscheme': 'wombat',
+        \ 'active': {
+        \   'left': [ [ 'mode', 'paste' ],
+        \             [ 'readonly', 'filename', 'modified' ] ] },
+        \ 'component_func': {
+        \   'readonly': 'MyReadonly',
+        \   'modified': 'MyModified'
+        \ },
+        \ 'separator': { 'left': '⮀', 'right': '⮂' },
+        \ 'subseparator': { 'left': '⮁', 'right': '⮃' }
+        \ }
+  function! MyModified()
+    if &filetype == "help"
+      return ""
+    elseif &modified
+      return "+"
+    elseif &modifiable
+      return ""
+    else
+      return ""
+    endif
+  endfunction
+  function! MyReadonly()
+    if &filetype == "help"
+      return ""
+    elseif &readonly
+      return "⭤"
+    else
+      return ""
+    endif
+  endfunction
+```
+![lightline.vim - tutorial](https://raw.github.com/itchyny/lightline.vim/master/image/tutorial/11.png)
+Fine and readable! 
+
+
+Finally, you come up with concatenating the three components:
+![lightline.vim - tutorial](https://raw.github.com/itchyny/lightline.vim/master/image/tutorial/12.png)
+Now you may now what to do.
+```vim
+  let g:lightline = {
+        \ 'colorscheme': 'wombat',
+        \ 'active': {
+        \   'left': [ [ 'mode', 'paste' ],
+        \             [ 'filename' ] ] },
+        \ 'component_func': {
+        \   'filename': 'MyFilename',
+        \   'readonly': 'MyReadonly',
+        \   'modified': 'MyModified'
+        \ },
+        \ 'separator': { 'left': '⮀', 'right': '⮂' },
+        \ 'subseparator': { 'left': '⮁', 'right': '⮃' }
+        \ }
+  function! MyModified()
+    if &filetype == "help"
+      return ""
+    elseif &modified
+      return "+"
+    elseif &modifiable
+      return ""
+    else
+      return ""
+    endif
+  endfunction
+  function! MyReadonly()
+    if &filetype == "help"
+      return ""
+    elseif &readonly
+      return "⭤"
+    else
+      return ""
+    endif
+  endfunction
+  function! MyFilename()
+    return ('' != MyReadonly() ? MyReadonly() . ' ' : '') .
+         \ ('' != expand('%t') ? expand('%t') : '[No Name]') .
+         \ ('' != MyModified() ? ' ' . MyModified() : '')
+  endfunction
+```
+Define your own filename component. It has priority over the component lightline has.
+![lightline.vim - tutorial](https://raw.github.com/itchyny/lightline.vim/master/image/tutorial/13.png)
+Looks nice.
+
+Of cource, you can name your component as you wish.
+```vim
+  let g:lightline = {
+        \ 'active': {
+        \   'left': [ [ 'mode', 'paste' ],
+        \             [ 'my_filename' ] ] },
+        \ 'component_func': {
+        \   'my_filename': 'MyFilename', ...
+```
+
+This is the end of the tutorial. Good luck with your nice statusline.
diff --git a/autoload/lightline.vim b/autoload/lightline.vim
index b70232b..69701e0 100644
--- a/autoload/lightline.vim
+++ b/autoload/lightline.vim
@@ -3,7 +3,7 @@
 " Version: 0.0
 " Author: itchyny
 " License: MIT License
-" Last Change: 2013/08/22 14:21:34.
+" Last Change: 2013/08/22 15:32:52.
 " =============================================================================
 
 let s:save_cpo = &cpo
@@ -163,9 +163,12 @@ function! lightline#highlight(mode)
 endfunction
 
 function! lightline#subseparator(x, y, s)
-  return '%{('.get(g:lightline.component_flag,a:x,has_key(g:lightline.component_func,a:x)?'!!strlen('.g:lightline.component_func[a:x].'())':"1").')*('.
-        \join(map(copy(a:y),'get(g:lightline.component_flag,v:val,has_key(g:lightline.component_func,v:val)?'.
-        \'"!!strlen(".g:lightline.component_func[v:val]."())":has_key(g:lightline.component,v:val)?"1":"0")'),'+').")?('".a:s."'):''}"
+  return '%{('.(has_key(g:lightline.component_func,a:x)?'!!strlen('.(g:lightline.component_func[a:x]).'())':get(g:lightline.component_flag,a:x,"1")).')*('.
+        \join(map(copy(a:y),'(has_key(g:lightline.component_func,v:val)?"!!strlen(".g:lightline.component_func[v:val]."())":'.
+        \'get(g:lightline.component_flag,v:val,has_key(g:lightline.component,v:val)?"1":"0"))'),'+').")?('".a:s."'):''}"
+  " return '%{('.get(g:lightline.component_flag,a:x,has_key(g:lightline.component_func,a:x)?'!!strlen('.g:lightline.component_func[a:x].'())':"1").')*('.
+  "       \join(map(copy(a:y),'get(g:lightline.component_flag,v:val,has_key(g:lightline.component_func,v:val)?'.
+  "       \'"!!strlen(".g:lightline.component_func[v:val]."())":has_key(g:lightline.component,v:val)?"1":"0")'),'+').")?('".a:s."'):''}"
 endfunction
 
 function! lightline#statusline(inactive)
@@ -176,7 +179,8 @@ function! lightline#statusline(inactive)
   for i in range(len(left))
     let _ .= printf('%%#LightLineLeft_%s_%d#', mode, i)
     for j in range(len(left[i]))
-      let _ .= '%( '.get(g:lightline.component,left[i][j],has_key(g:lightline.component_func,left[i][j])?'%{'.g:lightline.component_func[left[i][j]].'()}':'').' %)'
+      " let _ .= '%( '.get(g:lightline.component,left[i][j],has_key(g:lightline.component_func,left[i][j])?'%{'.g:lightline.component_func[left[i][j]].'()}':'').' %)'
+      let _ .= '%( '.(has_key(g:lightline.component_func,left[i][j])?'%{'.g:lightline.component_func[left[i][j]].'()}':get(g:lightline.component,left[i][j],'')).' %)'
       if j < len(left[i]) - 1
         let _ .= lightline#subseparator(left[i][j], left[i][j+1:], g:lightline.subseparator.left)
       endif
@@ -191,7 +195,8 @@ function! lightline#statusline(inactive)
       if j
         let _ .= lightline#subseparator(right[i][j], right[i][:j-1], g:lightline.subseparator.right)
       endif
-      let _ .= '%( '.get(g:lightline.component,right[i][j],has_key(g:lightline.component_func,right[i][j])?'%{'.g:lightline.component_func[right[i][j]].'()}':'').' %)'
+      " let _ .= '%( '.get(g:lightline.component,right[i][j],has_key(g:lightline.component_func,right[i][j])?'%{'.g:lightline.component_func[right[i][j]].'()}':'').' %)'
+      let _ .= '%( '.(has_key(g:lightline.component_func,right[i][j])?'%{'.g:lightline.component_func[right[i][j]].'()}':get(g:lightline.component,right[i][j],'')).' %)'
     endfor
   endfor
   return _